Instagram Graph API を利用してつまづいた話

Instagram Graph API を利用するためには、アクセストークンとか Instagram ビジネスアカウント ID とかを取得する必要があるのですが、その手続きがなかなかすんなりいきませんでした。

また何かやろうとしたとき、同じような問題に直面しそうなので備忘録として残しておきます。

発生した問題
原因
1. １つ目：Facebookページを作っていなかった
  1. ２つ目：Instagram のビジネスアカウントIDをちゃんと取得できていなかった

発生した問題

Instagram Graph API を使用するための手続き・手順は↓のブログに紹介されているものが有名です。

Instagram Graph APIの基本的な使い方・Webサイトにインスタの写真を埋め込みする方法

（2020年2月2日追記：本記事の内容をより簡略化したツール「API Query Maker」を作成しました！詳しくはAPI Query Makerの使い方・Instagram Graph API編をご覧になってみてください！本記事で紹介し

今回私もこちらを参考にさせてもらってやっていきました。

ご注意

最初に断っておきますが、こちらのブログが不親切とか間違っているとかいうことは一切ありません。（というかかなり親切な説明です）
今回発生した問題は、私自身が Facebook やインスタとかの SNS に疎いのが原因です。

悩んだ点が２つあります。

１つ目：３段階目のアクセストークン取得に失敗する

上記ブログでいう「３段階目のアクセストークン」の取得において、以下のような応答が返ってきました。

{
   "data": [

   ]
}

つまり、空の応答が返ってきたわけです。

これについてかなりハマりました（というかググってもなかなかこの事象がひっかからない、というかそもそもググり方がわからない）。

２つ目：Instagram Graph API を使用してみると、「(#100) Tried accessing nonexisting field～」とかいうエラーが返ってくる

１つ目の問題を無事クリアして、いざInstagram Graph API を使用してみると、以下の応答が返ってきました。

{
  "error": {
    "message": "(#100) Tried accessing nonexisting field (media) on node type (Application)",
    "type": "OAuthException",
    "code": 100,
    "fbtrace_id": "XXXXXXXXXXXXX"
  }
}

これはキーワードでググったら結構サイトは見つかるんですが、結構いろんなシチュエーションで発生するエラーらしく、私の解決策になるようなものはなかなか見つかりませんでした。

もうちょっと詳細な経緯

Instagram Graph API を利用するためには、以下の手順を追う必要があります。

Instagram でビジネスアカウントを作る
Facebook でアカウントを作る
Facebook ページを作る
Facebook ページと Instagram のビジネスアカウントを連携させる
アクセストークンを取得する（３段階ステップがある）
Instagram ビジネスアカウントを取得する
ここまで来て、やっと Instagram Graph API が利用可能になる

正直、かなりきついです・・・。
特に、Instagram なんて使ったことないからアプリにも慣れていないし、なんか凄く使いにくいし（個人的にですが）・・・

で、今回は１つ目として、 5. のアクセストークン取得の３段階目で、上記の「空のdataが応答として帰ってくる」現象が起きました。
２つ目として、7. の

原因

１つ目：Facebookページを作っていなかった

かなりググって、やっと同じ問題に直面している人を見つけました。

Instagram Graph API設定時、有効期限なしのアクセストークンが取得できません。

こんにちは。 Webサイトを作成しておりますが、インスタグラムの画像を表示させたいのです。久留米あかつき幼稚園様のサイト

この質問者も私と同じところで悩んでいました。
で、結論として Facebookページと Instagram を連携してなかったのです。

この「Facebookページ」というのが曲者でした。

ただ Facebook のアカウントを連携させるだけではなく、「Facebookページ」なるものがあるということを知りませんでした。

この Facebookページを作って、インスタのアプリに登録すると、上記問題は解決しました。

２つ目：Instagram のビジネスアカウントIDをちゃんと取得できていなかった

これは、自分がちゃんとした手順を踏んでいなかったのが原因です。

下記のように、３段階目のアクセストークンを取得した後、グラフAPIエクスプローラで、以下のように me?fields=instagram_business_account を送信して、「"instagram_business_account"」を取得する必要がありました。

これを使って、以下のように URL をたたくことで、うまく API が動作しました。

https://graph.facebook.com/v4.0/【ビジネスアカウントID】/accounts?access_token=【アクセストークン】

愚痴ですが、３段階目のアクセストークンを取得する段階で、「"id"」なるものが登場するのですが、それが Instagram ビジネスアカウントIDだと思い込んでいました。あの "id" の存在意義って、アクセストークン取得するためだけだったのか・・・いろんな id が登場しすぎて非常にややこしいです。