Featured image of post WebサイトにInstagramの投稿を表示する方法 Instagram Graph API(v10.0)

WebサイトにInstagramの投稿を表示する方法 Instagram Graph API(v10.0)

こんにちは。

前に「WebサイトにInstagramの投稿を簡単に表示する方法」をご紹介しました。

WebサイトにInstagramの投稿を簡単に表示する方法

WebサイトにInstagramの投稿を簡単に表示する方法

すごく簡単に出来るのですが、表示されない事が結構ありまして、Instagram(Facebook)が提供しているAPIを取得する方法も試してみる事にしました。

かなり面倒なのと、何やってるのかよくわからない…状態になってます。そしてAPIの仕様変更の頻度が高いらしく、こちらもメンテナンスがかなり大変そうです。なかなか一筋縄にはいかないですが、始めていきます。最終的には、APIで使用する【ビジネスアカウントID】と【アクセストークン(無期限)】をゲットするのが目的です。

前提条件

  • Facebookアカウントがある事
  • Facebook for Developerに登録済みである事
  • Instagramアカウントがある事

Instagramでビジネスアカウントを作成

Instagramアプリの方から

\[設定\]

-

\[アカウント\]

に入ると、「プロアカウントに切り替える」とあるので選択します。

適切なカテゴリを選択します。

完了します。

プロアカウントに切り替えるか、と聞いてくるので、「OK」にします。

ビジネス、クリエイターのどちらかを選択します。

連絡先登録は今はスキップします。

Facebookにログインと出れば、完了です。スキップしてもログインしてもOKです。次はPCから作業します。

Facebookページ作成とInstagramアカウントを連携

個人のFacebookアカウントからページ作成をします。

以下はもう連携済みですが、ページの設定の

\[Instagram\]

からInstagram連携をします。

アプリ作成

Facebook for Developerにアクセスして、アプリを作成します。

以下を入力します。

アプリを作成すると以下画面が出るので、InstagramグラフAPIを選びます。

アクセストークン発行①(有効期限1時間)

同じくFacebook for Developerにて、ツールよりグラフAPIエクスプローラを選択します。

アクセス許可に pages_show_list business_management instagram_basic instagram_manage_insights instagram_manage_comments instagram_content_publish public_profile を選択して、「Generate Access Token」にてトークンを取得します。

これが【第1アクセストークン】です。

アクセストークン発行②(有効期限2ヶ月)

ツールからアクセストークンデバッガーを選択します。

先ほど取得した、【第1アクセストークン】を入力して「デバック」をクリックします。

以下のように表示されるので、「アクセストークンの延長」をクリックします。

以下が表示されたら、「デバック」をクリックします。

パスワードを求められます。

その後表示されたページ上に【第2アクセストークン】があります。

アクセストークン発行③(無期限)

グラフAPIエクスプローラに戻って、【第2アクセストークン】を入力します。GETのURLに「me/accounts」と入力して「送信」をクリックします。dataのaccess_tokenが【第3アクセストークン】です。

無期限である事を確かめるには、アクセストークンデバッガーから【第3アクセストークン】を入力してデバッグします。

グラフAPIエクスプローラに戻って、【第3アクセストークン】を入力します。GETのURLに「me?fields=accounts{instagram_business_account}」と入力して「送信」をクリックします。エラーになります。。

本来はここで終わりのはずですが、、なぜかエラーになるのでもう少し頑張ります。

アクセストークン発行④(③エラー対応)

アクセストークンデバッガーで【第2アクセストークン】を入力してデバッグします。すると、なんという事でしょう。無期限トークンになっています。意味がわかりません。

というわけで、グラフAPIエクスプローラに戻って、【第2アクセストークン】を入力します。GETのURLに「me?fields=accounts{instagram_business_account}」と入力して「送信」をクリックします。

これで【ビジネスアカウントID】も取得できました。

最後に以下をブラウザにて入力して結果が返ってこれば終了です。【XXXX】の部分を書き換えてください。【】は不要です。

https://graph.facebook.com/v10.0/【ビジネスアカウントID】?fields=name%2Cmedia.limit(10)%7Bcaption%2Clike_count%2Cmedia_url%2Cpermalink%2Ctimestamp%2Cusername%7D&access_token=【第2アクセストークン】

Licensed under CC BY-NC-SA 4.0
Hugo で構築されています。
テーマ StackJimmy によって設計されています。