Help us understand the problem. What is going on with this article?

Instagram の API (2020年4月以降)

Instagramの画像を自作のwebページに表示したかったのですが
なにやら2020年4月から仕様が変わったらしく
ぐぐったものがあまり役に立たなかったので
忘備録としてAPIが使えるまでの手順を残します。

まとめ

access_tokeninstagram_business_accountのidが必要。

output API input input input
access_token /accounts 自分のfacebookID OAuth access_token
instagram_business_account.id /me?fields=instagram_business_account access_token
自分のfacebookID /me? OAuth access_token
OAuth access_token /oauth/access_token?grant_type=fb_exchange_token client_id client_secret fb_exchange_token
client_id https://developers.facebook.com/apps/ から対象アプリの「アプリID」を確認
client_secret https://developers.facebook.com/apps/ から対象アプリの「app secret」を確認
fb_exchange_token https://developers.facebook.com/tools/explorer/ で生成

0. 前提

1. fb_exchange_token を作成

グラフAPIエクスプローラにアクセスする。
https://developers.facebook.com/tools/explorer/

以下のパーミッション設定を行う。

設定項目 設定値
Facebookアプリ (自作アプリ)
ユーザーまたはページ ユーザートークン
アクセス許可 business_management
pages_show_list
instagram_basic
public_profile(規定値)

Generate Access Token を押下する。
すると上部のテキストボックスに生成したトークンが表示される。250文字くらい。
(Copy Tokenボタンを押すと便利)

2. OAuthでclientのアクセストークンを作成

clientとは上記で選んだ自作のFacebookアプリのこと。
OAuthに必要なのは以下の3点。

  • client_id
  • client_secret
  • fb_exchange_token (上記で作成したもの)

2.1. アプリIDとapp secretの確認

client_idとclient_secretは下記ページから確認。
https://developers.facebook.com/apps/

Facebookアプリの一覧が表示されるので、fb_exchange_token作成時と同じものを選択。
その後の画面で 設定ベーシック のページを開いて以下を確認する。

  • アプリID → client_idになる
  • app secret → client_secretになる

app secretは 表示 ボタンを押すと確認できる。
(この時パスワードの入力を求められるが、Facebookのものを入力する)

2.2. RESTでアクセストークン発行

ここまで準備できたら、以下のURLをブラウザでアクセスする。
バージョン番号はグラフAPIエクスプローラ(前述)のものに合わせる。
執筆時点では v7.0

https://graph.facebook.com/v7.0/oauth/access_token?grant_type=fb_exchange_token&client_id={client_id}&client_secret={client_secret}&fb_exchange_token={手順1のfb_exchange_token}

するとブラウザに以下のような結果が表示される。
この時のアクセストークンは190文字くらい。

結果
{"access_token":"X0xoX0xoX0xoX0xoX0xoX0xoX0xoX0xoX0xoX0xoX0xoX0xoX0xoX0xoX0xoX0xoX0xoX0xoX0xoX0xoX0xoX0xoX0xoX0xoX0xoX0xoX0xoX0xoX0xoX0xoX0xoX0xoX0xoX0xoX0xoX0xoX0xoX0xoX0xoX0xoX0xoX0xoX0xoX0xoX0xoX0xoX0xo","token_type":"bearer"}

3. APIで利用するアクセストークンの作成

3.1. 自分のfacebookIDを調べる

ブラウザで以下URLにアクセスする。id が自分のfacebookIDになる。

https://graph.facebook.com/v7.0/me?access_token={手順2のaccess_token}

結果
{
   "name": "\u81EA\u5206\u306E\u540D\u524D",
   "id": "123456789012345"
}

3.2. アクセストークン発行

ブラウザで以下URLにアクセスする。

https://graph.facebook.com/v7.0/{自分のfacebookID}/accounts?access_token={手順2のaccess_token}

結果
{
   "data": [
      {
         "access_token": "X0xoX0xoX0xoX0xoX0xoX0xoX0xoX0xoX0xoX0xoX0xoX0xoX0xoX0xoX0xoX0xoX0xoX0xoX0xoX0xoX0xoX0xoX0xoX0xoX0xoX0xoX0xoX0xoX0xoX0xoX0xoX0xoX0xoX0xoX0xoX0xoX0xoX0xoX0xoX0xoX0xoX0xoX0xoX0xoX0xoX0xoX0xoX0xoX0xoX0xo",
         "category": "\u30DA\u30FC\u30B8\u306E\u30AB\u30C6\u30B4\u30EA",
         "category_list": [
            {
               "id": "1234567890123456",
               "name": "\u30DA\u30FC\u30B8\u306E\u30AB\u30C6\u30B4\u30EA"
            }
         ],
         "name": "facebook_page_name",
         "id": "123456789012345",
         "tasks": [
            "ANALYZE",
            "ADVERTISE",
            "MODERATE",
            "CREATE_CONTENT",
            "MANAGE"
         ]
      }
   ],
   "paging": {
      "cursors": {
         "before": "X0xoX0xoX0xoX0xoX0xo",
         "after": "X0xoX0xoX0xoX0xoX0xo"
      }
   }
}

data とはfacebookページの属性情報。
ここで取り出した access_token がAPIで使える。

3.3. 作成したトークンの確認

アクセストークンデバッガーを使うと有効期限やスコープ(権限)を確認できる。
https://developers.facebook.com/tools/debug/accesstoken/

トークンを入力して デバッグ ボタンを押す。

アクセストークン情報
(途中省略)
有効期限 受け取らない
(途中省略)
スコープ page_show_list, business_management, instagram_basic, public_profile

有効期限が 受け取らない になっていること、
スコープが手順1で指定したものになっていることを確認する。

3.4. instagram_business_accountを確認

https://graph.facebook.com/v7.0/me?fields=instagram_business_account&access_token={手順3のaccess_token}

結果
{
   "instagram_business_account": {
      "id": "12345678901234567"
   },
   "id": "123456789012345"
}

4. 動作確認

試しに自分の投稿を取得してみる。

https://graph.facebook.com/v7.0/{instagram_business_accountのid}/?fields=name,media{caption,media_url,permalink}&access_token={手順3のaccess_token}

結果
{
   "name": "\u30A4\u30F3\u30B9\u30BF\u8868\u793A\u540D",
   "media": {
      "data": [
         {
            "caption": "%u6295%u7A3F%u3057%u305F%u30B3%u30E1%u30F3%u30C8",
            "media_url": "https://scontent-nrt1-1.xx.fbcdn.net/v/t51.2885-15/12345678_123456789012345_1234567890123456789_n.jpg?_nc_cat=123&_nc_sid=X0xoX0&_nc_oc=X0xoX0xoX0xoX0xoX_X0xoX0xoX0xoX0xoX0xoX0xoX0xoX0xoX0xoX0xoX0x_X0xoX0xoX0xo_X0xoX0xoX0_Eb&_nc_ht=scontent-nrt1-1.xx&oh=X0xoX0xoX0xoX0xoX0xoX0xoX0xoX0xo&oe=X0X0X0X0",
            "permalink": "https://www.instagram.com/p/B_X0xoX0xoX/",
            "id": "12345678901234567"
         },
         {
            "caption": "%u6295%u7A3F%u3057%u305F%u30B3%u30E1%u30F3%u30C8",
            "media_url": "https://scontent-nrt1-1.xx.fbcdn.net/v/t51.2885-15/12345678_123456789012345_1234567890123456789_n.jpg?_nc_cat=123&_nc_sid=X0xoX0&_nc_oc=X0xoX0xoX0xoX0xoX_X0xoX0xoX0xoX0xoX0xoX0xoX0xoX0xoX0xoX0xoX0x_X0xoX0xoX0xo_X0xoX0xoX0_Eb&_nc_ht=scontent-nrt1-1.xx&oh=X0xoX0xoX0xoX0xoX0xoX0xoX0xoX0xo&oe=X0X0X0X0",
            "permalink": "https://www.instagram.com/p/B_X0xoX0xoX/",
            "id": "12345678901234567"
         }
      ],
      "paging": {
         "cursors": {
            "before": "X0xoX0xoX0xoX0xoX0xoX0xoX0xoX0xoX0xoX0xoX0xoX0xoX0xoX0xoX0xoX0xoX0xoX0xoX0xoX0xoX0xoX0xoX0xoX0xoX0xoX0xoX0xoX0xoX0xoX0xoX0xoX0xoX",
            "after": "X0xoX0xoX0xoX0xoX0xoX0xoX0xoX0xoX0xoX0xoX0xoX0xoX0xoX0xoX0xoX0xoX0xoX0xoX0xoX0xoX0xoX0xoX0xoX0xoX0xoX0xoX0xoX0xoX0xoX0xoX0x"
         }
      }
   },
   "id": "12345678901234567"
}

data が投稿一件分のデータ。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした