Instagram APIのハッシュタグ表示でハマった「5番目のアクセストークン」

f:id:hashimotoblog:20210325190318p:plain

ユーザの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を入力しても取得できていない状態になる

f:id:hashimotoblog:20210325190357p:plain



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

 

 

ブラウザで見ると下記のようにエラーになって読み込めない

f:id:hashimotoblog:20210325190444p:plain

 

 

 

2)「グラフAPIエクスプローラ」に戻って、ページ下の「コードを取得」ボタンをクリックしてタブの「cURL」を選択して「cURL」の内容を保存 

f:id:hashimotoblog:20210325190516p:plain

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時間以内)」になっているのを確認。

f:id:hashimotoblog:20210325190552p:plain

※ちょっと時間がたっていて45分となっていますが、たぶんすぐに見れば1時間以内となっていると思います。

 

4)「アクセストークンを延長」

f:id:hashimotoblog:20210325190644p:plain
左下の「アクセストークンを延長」ボタンをクリック

facebookのパスワードを入力

 

 

ページ下に「第5のアクセストークン」が表示されるので、表示の右の「デバック」ボタンをクリック。

f:id:hashimotoblog:20210325190714p:plain

 

「有効期限」が「受け取らない」になっているのを確認。(無期限化が完了)

f:id:hashimotoblog:20210325190734p:plain
 

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」での実装を想定します。