Instagram Graph APIを使おう！
インスタグラムはみなさん活用されてますか？
活用されている方は、きっと意識高い写真や動画をアップされている事だと思います。
嫁も例に漏れずフル活用しており、現在は育児系インスタグラムを定期的に公開しています。僕のノーイクメンぶりも垣間見れますので、ぜひご覧ください＾＾
そんな活用されている方々の中には自分のブログにのっけて自動更新！なんて人はInstagram APIを利用している人も多いと思います。が、実はこのInstagram API近々サービス終了となってしまいますので、現在そのまま利用している人は「何もしていないのに画像が表示されなくなった。」なんて事も。
「何もしてないのに〜」は僕の中では全く信用ならないフレーズですが、今回は当たりです。だってサービス終了ですからね（笑）
Instagram Graph APIを使おう
サービスが終了してしまうともちろんInstagram APIは使えなくなってしまいますが、その代わりにと言っては何ですが、現在Instagram Graph APIが利用可能です。
こちらは、以前のInstagram APIとは主旨が違い、インスタグラムのビジネスアカウントで利用できるAPIになります。
従って、ビジネスアカウントではない個人アカウントのままではIntasgram Graph APIを利用する事ができません。
ビジネスアカウントに変更するのはとても簡単です。ただ、ビジネスアカウントに変更すると「鍵アカウントに出来ない」「シェアできる場所が連携しているFacebookページのみ」など若干の制約を受けます。
ビジネスアカウントについてはこちらでも紹介しております。合わせてご覧ください！
Instagram Graph APIを利用するには？
さて本題。
Instagram Graph APIを利用する為には、若干面倒な作業が必要になります。
工程は長いですが、そんなに専門的なスキルが必要になる事はなく、下記に沿って進めれば簡単に完了できます。Instagram APIのプレゼン動画送ってとかSandbox解除するより万倍楽です＾＾
Instagram Graph APIを利用するための流れ
- 自分のインスタアカウントをビジネスアカウントに変更。
- Facebookページを用意し（連携するFacebookアカウントで表示できればOK）、1で変更したビジネスアカウントと連携。
- Facebook開発者管理ページやGraph APIエクスプローラーを利用して、APIを表示するのに必要な文字列（アクセストークン）を取得する。
- ビジネスアカウントIDを取得。
あれ？たったの4工程ですね。簡単簡単！^-^
実はこの中でも3の工程が非常にめんどくさいです。最終的に使うアクセストークンを取得するために3回程行ったり来たりする羽目になります。
と言っても難しくはなくただただ面倒くさいだけです（笑）
インスタグラムアカウントをビジネスアカウントに変更
インスタアカウントをビジネスアカウントに変更
まずは今持っているアカウントをビジネスアカウントに変更します。変更の仕方は下記にまとめてありますので、参照してください。
Instagramアカウントをプロアカウントに変更しよう！気をつけたいのは、ビジネスアカウントに変更時にFacebookページを新規作成するのではなく、あらかじめFacebookアカウント側でFacebookページを作っておき、それと連携させる事です。以前はそうしないとアクセストークンに期限がついてしまうという話を聞いた事がありました。
今はわからないですけど、特に理由がなければそうしておくと安心だと思います！
Facebookページとインスタグラムビジネスアカウントを連携
上記のビジネスアカウントに変更時に、ページを選択したかと思いますが、Facebook側でも連携の作業が必要になります。
連携するfacebookページを作成
基本的にフローチャートにそって進めればページを完成させられます。
途中途中で認証や確認などが出る場合もありますが基本的に肯定していけばOKです！
インスタグラムアカウントとリンクさせる
facebookページを作成しましたら、今回使用するインスタグラムアカウントとリンクさせます。
こちらも設定から指示に従って進めるだけで簡単に連携を完了できると思います！
こちらも途中途中で確認や認証が出る場合がありますが、基本的に肯定していけば大丈夫です。
こちらは後からも変更可能ですので、メールアドレスさえ入力すれば他は省略可能です。
これでfacebookページとインスタグラムアカウントの連携完了です！
次からはお待ちかね、アクセストークンの取得に進みます。
Facebookアプリを作成する
Instagram Graph APIを利用するにはFacebookアプリを作成する必要があります。今回のようなAPIなどの機能を利用するにはFacebookアプリを介して行うと言った仕組みのようです。
facebook for developerでアプリを作成
まず、facebook for developersへアクセスし、アプリの作成を行います。
既にログインされている場合はそのまま、右上のスタートガイドからDeveloperアカウントを作成し、アプリの作成に進みます。
こちらも殆ど指示に従ってハイハイ言っておけば完了する工程です^^
開発者アカウントを作成
当てはまるものはなんでも良いですが、僕はかっこいいなと思ったので開発者にしました。
アプリを作成
アプリケーション名はなんでも大丈夫です。但し、instagramやfacebook等の固有名詞は使用できなかったはず。
ちなみに僕だけかもしれませんが、下記の画面で入力後「アプリIDを作成してください」ボタンを押しても全く反応しませんでした。キャンセルは反応します（笑）
その場合は、一度ページの更新を行いましょう。更新はWindowsの場合はF5、Macの場合はCommand+Rです。
更新すると右上の「スタートガイド」のところが、「マイアプリ」に変わっていると思います。そのメニューの中から「アプリを作成」メニューをクリックすると、下記と同じ画面が表示されます。
そこから改めて情報を入力し、「アプリIDを作成してください」ボタンを押すと先に進めました。
なんででしょうね。iPadだったからかな^^;
上記の画面になればとりあえず完了です！
引き続きAPIを使用するのに必要なアクセストークンを取得していきます。
アクセストークンを取得する
1個目のアクセストークンを取得
facebook for developersのグラフAPIエクスプローラにアクセスし、アクセストークンの取得を行います。
右上あたりにある「トークンを取得」メニューから「ユーザーアクセストークンを取得」を選択します。
グラフAPIを利用する際に許可する処理の設定を行います。
他のサイトさんを参考にした感じだと、自分のアカウントのデータだけ取得できれば良いという場合は、上記画像の赤枠部分。
- pages_show_list
- business_management
- manage_pages
- instagram_basic
他のアカウントの情報も取得したい場合はそれに加えて青枠部分。
- instagram_manage_comments
- instagram_manage_insights
を設定すると良い様です。
ログインの確認やアクセス許可の確認等が出てきた場合は、指示に従ってハイハイ言っておけば大丈夫です。
設定を終わらせると最初の画面に戻りますが、その際にアクセストークンの欄を見ると意味不明な文字列が並んでいると思います。それが今回取得した1個目のアクセストークンになります。これは2個目のアクセストークンを取得する際に使用しますので、どこかにコピペしておいてください。
2個目のアクセストークンを取得
続けて2個目のアクセストークンの取得を行います。
facebook for developersページへ戻り、右上の「マイアプリ」メニューから今回作成したアプリ名を選択し、ダッシュボード画面に移動します。
設定のベーシックメニューに入ると上の方に「アプリID」と「app secret」という項目があるので、その二つの情報をコピペして取っておきます。
「app secret」は表示する際にパスワードを要求されると思いますので、facebookのパスワードを入力すると内容が表示されます。
APIにアクセスしてアクセストークンを取得
これまでにメモっておいた「1個目のアクセストークン」「アプリID」「app secret」の3個を使用します。
下記URL内のそれぞれの場所を置き換えてブラウザでアクセスしてみてください。置き換えはカッコ（「」）ごと置き換えてください。
https://graph.facebook.com/v4.0/oauth/access_token?grant_type=fb_exchange_token&client_id=「アプリID」&client_secret=「app secret」&fb_exchange_token=「1個目のアクセストークン」下記の様な内容が表示されれば成功です！
赤枠部分のaccess_token:「英数字の羅列」部分が2個目のアクセストークンです。これもこの後使用しますので、コピペしておいてください。
3個目のアクセストークンを取得
最後のアクセストークンを取得します。
まずは先ほど取得した「2個目のアクセストークン」を使用し、下記URLにアクセスします。
https://graph.facebook.com/v4.0/me?access_token=「2個目のアクセストークン」ブラウザからアクセスし、下記の様な内容が表示されれば成功です。
表示内容の赤枠部分、「id」の値をコピペしておきます。すぐに使います。
続けて、「2個目のアクセストークン」と「先ほど取得したid」を使用し、下記URLにアクセスします。
https://graph.facebook.com/v4.0/「先ほど取得したid」/accounts?access_token=「2個目のアクセストークン」ブラウザからアクセスし、下記の様な内容が表示されれば成功です！
赤枠部分が3個目のアクセストークンになります。これは実際の運用時に使用するアクセストークンになりますので、ありがたくコピペしておいてください。
ちなみに、複数のfacebookページがある場合、同じ様なデータのまとまりが複数表示されます。その場合は「name」部分の名前が今回連携したfacebookページになっているまとまりがあるはずなので、その中の「access_token」の値をコピペしてください。
トークンの内容をチェック
3個目のアクセストークン（実際に運用する際に使用するトークン）を無事取得できたら、そのトークンの内容におかしい所がないかを、アクセストークンデバッガーを使用して確認します。
- 有効期限が「受け取らない」になっている。
- スコープにトークン作成時にアクセス許可をした内容が表示されている。
上記の内容になっていれば大丈夫ですが、そうでない場合はトークン作成からやり直してみましょう。
インスタグラムビジネスIDを取得
実際にAPIを使用し投稿データをページに表示させる際には、先ほど取得した3個目のアクセストークンと今回取得するインスタグラムビジネスIDの二つを使用します。
インスタグラムビジネスIDはfacebook for developerページにアクセスし、下記の手順で取得をします。
- アクセストークンに3個目のアクセストークンを入力。
- その下のアドレス部分の「？」以降の文字列をfields=instagram_business_accountに変更。
- 送信ボタンを押す。
すると下の結果フォームに上記画像の様な内容が表示されれば成功です！
青枠部分がビジネスアカウントIDになります。こちらもありがたくコピペしておいてください。
実際にデータを取得してみる
これでAPIを利用して情報を取得する為の準備が整いました！
実際に下記のURLで「インスタグラムビジネスID」と「3個目のアクセストークン」を置き換えてブラウザからアクセスしてみましょう。
https://graph.facebook.com/v4.0/「ビジネスアカウントID」?fields=name,media{caption,media_url,permalink,timestamp,username}&access_token=「3個目のアクセストークン」下記の様な情報が取り込めたら成功です！
逆にerrorの様な文字が含まれる内容が表示されている場合、トークンやIDが間違っている可能性があります。その場合はもう一度情報が正しいか見直してみましょう。
まとめ
今回はとりあえずInstagram Graph APIを使用する為の情報を取得するまでの流れをご紹介しました。
これが使えると、自分のサイトやブログでインスタグラムの投稿を表示させてる場合に、わざわざサイトを更新しなくても、インスタグラムに投稿さえすれば勝手に投稿されます。これは便利ですね！
自動で簡単に出来る事は今回の様に、なるべく手を煩わせなくても大丈夫な仕組みを作っていうのは運用の面で言えば非常に大事です。
次は、実際にページに表示する方法をご紹介したいと思います。