(cache)Instagram API廃止に備えてInstagram Graph API（グラフAPI）へ移行

Instagram APIからInstagram Graph APIへ移行した際の作業まとめです。

やりたい事

自身の管理しているInstagramビジネスアカウントの投稿を自身のウェブサイトにグリッド表示する。
それぞれの投稿にキャプション・いいね数を表示させる
それぞれの投稿のリンクをクリックするとInstagram投稿ページが表示される

注意

アプリのステータスを「開発中」として動作させているため、ある日突然このやり方が通用しなくなる可能性があります。

FacebookページとInstagramビジネスアカウントを連携させる

いままではInstagramのトークンを取得しURLを叩けば済んだのですが、Facebook側で色々と作業する必要があるようです。
Facebookページを用意し、Facebookページの管理画面からInstagramビジネスアカウントを連携します。

アプリを作成

Facebook for Developers https://developers.facebook.com/ でアプリを作成します。
アプリ名とメールアドレスのみ入力し、ほかは特に触らなくてOKでした。

トークンの発行

グラフAPIエクスプローラー https://developers.facebook.com/tools/explorer/でトークンを発行します。
アプリのドロップダウンからアプリを選択し、「ユーザーアクセストークンを取得」を選びます。
次の画像のように、3つの項目にチェックを入れます。
【2018.07.21 追記】
突然(?)一部のFacebookページの「instagram_business_account」が取得できない状態になりました。トークンを発行する際の権限「business_management」にもチェックを入れたところ、instagram_business_accountが再び取得できるようになりました。
追記2.
Instagram Stories（ストーリー）を取得したい場合は「instagram_manage_insights」にもチェックを入れます

Facebookのアクセス権許可などが出てきますので、OKを押して進みます。
【トークン】が発行されると「アクセストークン」欄に長い文字列が表示されます。
このトークンを利用するとInstagram投稿などを取得できるのですが、1時間ほどで無効になってしまうトークンです。
このトークンの有効期限を延長し、有効期限なしのトークンを取得します。

トークン期限の延長

右上のマイアプリ→アプリ名→設定から【アプリID】【app secret】を調べます。
それらに加え、さきほど取得した【トークン】を使って次のURLにアクセスします。

https://graph.facebook.com/v3.0/oauth/access_token?grant_type=fb_exchange_token&client_id=【アプリID】&client_secret=【app_secret】&fb_exchange_token=【トークン】

うまくいくとブラウザの画面に次のような表示が出ると思います。

{"access_token":"長い文字列","token_type":"bearer","expires_in":5183791}

この表示されているaccess_tokenをコピーして保存しておきます（【トークン2】と呼びます）。

有効期限なしのアクセストークン取得

先ほど保存した【トークン2】を使い、次のURLにアクセスします。

https://graph.facebook.com/v3.0/me?access_token=【トークン2】

画面に表示されているidをコピーして保存しておきます（【id】と呼びます）。
【id】【トークン2】を使い、次のURLにアクセスします。

https://graph.facebook.com/v3.0/【id】/accounts?access_token=【トークン2】

JSONが表示されたら、その中の「access_token」を保存します。これが最終的に使用するアクセストークンになります（【トークン3】と呼びます）。

トークンを確認してみる

アクセストークンデバッガで【トークン3】の有効期限を確認してみます。https://developers.facebook.com/tools/debug/accesstoken/

「有効期限」が「受け取らない」になっていれば成功です。
また「スコープ」に「instagram_basic」も入っていると思います。

Instagram投稿を取得する

以下のURLにアクセスするとJSON形式でインスタグラム投稿を含むレスポンスが返ってきます。

https://graph.facebook.com/v3.0/【IGビジネスID】?fields=name%2Cmedia.limit(【件数】)%7Bcaption%2Clike_count%2Cmedia_url%2Cpermalink%2Ctimestamp%2Cusername%7D&access_token=【トークン3】

【IGビジネスID】が必要になりますので、グラフAPIエクスプローラー https://developers.facebook.com/tools/explorer/ で調べます。
アクセストークン欄に【トークン3】を入力し、アドレスバーのような箇所に次の内容を入力します。

me?fields=accounts{instagram_business_account}

こんな感じです

送信ボタンを押すと、JSON形式で結果が表示されます。
その中の「instagram_business_account」の「id」が、【IGビジネスID】となります。

"instagram_business_account": {
"id": "999999999999999999"
},

Instagram投稿を取り出す

https://graph.facebook.com/v3.0/【IGビジネスID】?fields=name%2Cmedia.limit(【件数】)%7Bcaption%2Clike_count%2Cmedia_url%2Cpermalink%2Ctimestamp%2Cusername%7D&access_token=【トークン3】

上記URLにアクセスすると、以前のようなJSON形式で結果を取得できます。
また、グラフAPIエクスプローラー https://developers.facebook.com/tools/explorer/ で好きな項目を含めたり、実際に動作させて結果を確認できたりします。

グラフAPIエクスプローラー左側の入力欄から、自分の欲しい項目を追加したり、件数を指定したりできます。
アドレスバーのような箇所に次の内容を入力します。
【IGビジネスID】?fields=media