ユーザのinstagramの読み込みは【3番目のアクセストークン】までの取得で可能だったのですが、ハッシュタグで読み込む場合に【3番目のアクセストークン】では情報を取得できず(「グラフAPIエクスプローラ」上では表示しているのでこれがまたややこしい)。
【4番目(期限あり)】→【5番目(無期限)】と更新していくことで表示させることができたのでそのメモです。
「ハッシュタグのIDを取得」まではいろいろなサイトで解説されているので省略します。
「ハッシュタグのIDを取得」してからサイトに表示させるまでに焦点を絞っています。
【事前準備】
①facebookページを作成
②Instagramアカウントを作成
③Instagramアカウントをビジネスアカウントに変更
④①で作成したfecebookページを②のInstagramアカウントを紐付ける
【ユーザ画像の表示方法】
⑤FACEBOOK for Developersでアプリを作成
⑥グラフAPIエクスプローラでアクセストークン取得(3回やる)
⑦instagram_business_accountの確認
⑧「instagram_business_account ID」と「アクセストークン」の2つで、ユーザの画像読み込みができるようになります。
【ハッシュタグの画像の表示方法】
⑨ハッシュタグのIDを取得
ここからハマりました。
1)以下で「グラフAPIエクスプローラ」上では表示ができるようになるが、ブラウザでURLを入力しても取得できていない状態になる
https://graph.facebook.com/v10.0/【ハッシュタグのID】/top_media?user_id=【インスタビジネスID】&fields=timestamp,media_url,media_type,id,children{media_url,permalink},permalink,caption&access_token=【3番目のアクセストークン】
※「&fields=」の中身はお好みで変更してください。
グラフAPIエクスプローラ
https://developers.facebook.com/tools/explorer
ブラウザで見ると下記のようにエラーになって読み込めない
2)「グラフAPIエクスプローラ」に戻って、ページ下の「コードを取得」ボタンをクリックしてタブの「cURL」を選択して「cURL」の内容を保存
curl -i -X GET \
https://graph.facebook.com/v10.0/【ハッシュタグのID】/top_media?user_id=【インスタビジネスID】&fields=timestamp,media_url,media_type,id,children{media_url,permalink},permalink,caption&access_token=【4番目のアクセストークン】
※4番目のアクセストークンがあらわれます。
「cURL」内の「&access_token=」以下の「第4のアクセストークン」をメモ
3番めの期限を無制限にしたアクセストークンではない「第4のアクセストークン」は期限も1時間に戻っている。
3)アクセストークンデバッガーで「第4のアクセストークン」を入力。「デバック」ボタンをクリック。
アクセストークンデバッガー
https://developers.facebook.com/tools/debug/accesstoken/
「有効期限」が「(約1時間以内)」になっているのを確認。
※ちょっと時間がたっていて45分となっていますが、たぶんすぐに見れば1時間以内となっていると思います。
4)「アクセストークンを延長」
左下の「アクセストークンを延長」ボタンをクリック
facebookのパスワードを入力
ページ下に「第5のアクセストークン」が表示されるので、表示の右の「デバック」ボタンをクリック。
「有効期限」が「受け取らない」になっているのを確認。(無期限化が完了)
5)1)の【3番目のアクセストークン】の箇所を「第5のアクセストークン」に差し替える
https://graph.facebook.com/v10.0/【ハッシュタグのID】/top_media?user_id=【インスタビジネスID】&fields=timestamp,media_url,media_type,id,children{media_url,permalink},permalink,caption&access_token=【5番目のアクセストークン】
6)これで、ブラウザで確認
1時間後でも表示できていればOK
phpなどでデータを表示させます。
【3番目のアクセストークン】で「グラフAPIエクスプローラ」上ではデータが表示されるので、うまくいっていると思っていたのが落とし穴でした。
ネットで検索しても【5番目のアクセストークン】までは出てこなかったので、同じようにお困りの方のお役に経てばと思って記録しました。
Instagram Graph APIは更新が多いので、またやり方が変わるかもしれません。
現状「v10.0」での実装を想定します。