2021/11/24更新・・・バージョンアップが頻繁過ぎて最新はこちら。⇒Instagram Graph API（Ver更新…。）

完全な自社用忘備録その４です。（自社用なので、テキストのみです。画像が無いので判りづらい方、ゴメンナサイ。間違ってたらゴメンナサイ）

１月に取得した時は変わってなかったんですが、今日（2/24）新規にInstagramをHPに埋込更新があったので、Facebook For Developersにアクセスしたら・・・なんか違う、全然違う！・・・これ絶対Version上がってる（涙）

ということでVer10.0で新規取得した流れです。

 

前提として

・facebookアカウントを持ってること
・Instagramアカウントを持っていること

キーポイントは、順番通りに実行すること。

① facebookページを「先」に作成
② Instagramアカウントをビジネスアカウントに変更（スマホアプリ上でしかできない）
③ ビジネス関連の情報設定の際に、facebookページの作成があるが実行しないでスキップして完了。
④ ①のfecebookページの「設定」→「Instagram」で②のアカウントを設定

※FBは機能が順次追加されており、ぶっちゃけ広告ポータルやアクセス解析みたいな、いつかどこかでみた（Goog…）のと同じになってきてますのでわかり難くなっています。

 

ここまで準備できたら開始ですが、Ver10.0・・・なにかガッツリ変わってます。
※便宜上Ver10.0としてますが、Version表記になるのは「Instagram Graph API」なだけで「Facebook For Developers」はそんな表記ないです。

●まずは、新規ですので「Facebook開発者」の登録なんですが、まずこれの登録場所がわからなくなってる。。。ﾓｳﾔﾒﾃ。。。

まずか下記より
https://developers.facebook.com/
（新規の場合は、べつURLであってもすべて上記にリダイレクトされます）

上部メニューより「スタートガイド」を選択

「Facebook for Developersへようこそ」が表示されるので【次へ】
「使用したい連絡先メールアドレスを入力」で、メール認証。
※パスワードの入力を求められます。
※ここで、FBアカウントにメールアドレスを登録しておかないと、なにをしても次に進まず（というか反応しない）。
登録したら進むのですが、使用したい連絡先メールアドレスにFBに登録したメールアドレスにすると、
「すでに登録されてる」となり進みません。
別のメールアドレスにすると認証メールが送られる。
（あくまで私がやった時の流れです）

https://developers.facebook.com/apps/
が表示されれば開発者登録完了です。

 

❶ まずは

https://developers.facebook.com/apps/ より
「アプリを作成」をクリック→「ビジネス統合の管理」を選択して【次へ】
アプリ表示名など必要事項を入力して【アプリを作成】
作成できたら、サイドメニューの「設定」を確認。

※なお「設定」→「詳細設定」で「APIバージョンのアップグレード」でバージョンは最新になっているか要確認。

 

❷ 1番目のアクセストークンを取得

上部メインメニューの「ツール」→「グラフAPIエクスプローラ」をクリック
「ユーザーアクセストークンを取得」を選択
表示されたら、アクセス許可は以下を設定（Ver7.0よりなので、今後バージョンアップで変わる可能性あるので要確認）
public_profile
business_management
pages_show_list
pages_manage_ads
pages_manage_metadata
pages_read_engagement
pages_read_user_content
instagram_basic
instagram_manage_insights
instagram_manage_comments
その後【Generate Access Token】クリックして
【１番目のアクセストークン】を取得

 

❸ 2番目のアクセストークンを取得

https://developers.facebook.com/tools/debug/accesstoken
にアクセス後、１番目のアクセストークンを入力して「デバック」
表示後、【アクセストークンを延長】をクリック
※パスワードの入力を求められます。
すると、「この長期アクセストークンは〇〇〇〇年〇〇月〇〇日に期限切れとなります」と表示されるので、
表示されたトークン横の「デバック」クリック
すると、アクセストークンデバッガーページが更新され、再度表示されます。
この時一番上に表示されるのが、
【２番目のアクセストークン】です。

 

❹ 3番目のアクセストークンを取得

❷で表示した、「グラフAPIエクスプローラ」を開き、
・アクセストークンの項目に【2番目のアクセストークン　】を入力
・GET▼→v?.0▼/の欄に【　me/accounts　】と入力。
・「送信」クリック
すると中央に"data":～～が表示されるので、該当する"name"の"access_token"が、
【3番目のアクセストークン】です（無期限トークンです）
※無期限トークンかどうかは、
https://developers.facebook.com/tools/debug/accesstoken
にアクセス後、３番目のアクセストークンを入力して「デバック」して、期限が切られてなければOKですが、３番目のアクセストークンが以後の流れではあまり重要ではないので確認の必要はない。

 

❺ エラー

再度❷番で表示した、「グラフAPIエクスプローラ」を開き、
・アクセストークンの項目に【　３番目のアクセストークン　】を入力。
・GET▼→v?.0▼/の欄に【　me?fields=accounts{instagram_business_account}　】と入力
・「送信」クリック
すると必ず「エラー」となります。（検証したらVer8.0からどうも以下の流れになってた）

 

❻ 今度はOK？

❺番でエラーになった後に、（以下は❸番で画面更新された後に再度デバックするのと同じ作業ですが、❺番で１度エラーにならないとなぜか無期限トークンに切り替わらない）
アクセストークンデバッガー：
https://developers.facebook.com/tools/debug/accesstoken
にアクセス後、「２番目のアクセストークン」を入力して「デバック」
すると、アクセストークンデバッガーページが更新され、２番目のアクセストークンが綴りはそのままに【無期限トークン】に切り替わります。
この時一番上に表示されるのが、
【（便宜上）４番目のアクセストークン（＝２番目のアクセストークン）】です。

 

❼ Instagramビジネスアカウント

❺番と同じ手順で、４番目のアクセストークンで実行すると、エラーとならず
中央に"accounts"～が表示されるので、該当する"instagram_business_account"の値が【Instagramビジネスアカウント】です。
（複数を管理している場合、複数現れますので、❷番目で表示されるアカウント順の場所が該当するアカウントになります）

 

➑ 確認

下記で【４番目のアクセストークン】【Instagramビジネスアカウント】を該当箇所に置き換えて

https://graph.facebook.com/v10.0/【Instagramビジネスアカウント】?fields=name%2Cmedia.limit(【表示件数】)%7Bcaption%2Clike_count%2Cmedia_url%2Cpermalink%2Ctimestamp%2Cusername%7D&access_token=【４番目＝２番目のアクセストークン】

（一致するバージョンを記入）
ブラウザで実行して、JSON形式情報が表示すれば完了です

 

補足

❺番の一度エラーにならないと・・・というところは、アプリを何度作り直しても、別のFBアカウントでも同じ結果でした。
なんなんだろ、これ・・・。

今回は、「Instagram Graph API」が変わったというより、「Facebook For Developers」が変わってます。