search
LoginSignup
8
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

posted at

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 が投稿一件分のデータ。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
8
Help us understand the problem. What are the problem?