【保存版】Instagram Graph APIの使用方法

Instagram APIは2020年で提供を終了する

個人情報流出事故の対策として、Instagram APIは2020年でサービスを終了する。ネットでInstagram写真取得とかを検索してみると、Instagram APIの記事がヒットしてしまうのでInstagram Graph APIを使用する手順をメモ。

Instagram Graph APIを使用するための前準備

下記の通り、InstagramのビジネスアカウントとFacebookが必要。

Instagram Graph APIはInstagramののビジネスアカウントが必要

Instagaramの投稿を取得するためには、Instagramをビジネスアカウントにする必要がある。

Facebookページも必要

Facebookページと、Instagramビジネスアカウントを連携される必要があるので、Facebookページの作成もしくは、Facebookページの管理者権限も必要になる。

Facebookページを作成して、Instagramのビジネスアカウントにする。
そして、Facebookアプリを作成しておく。

1つ目のアクセストークンを取得する

Facebook開発者ページのGraph APIエクスプローラ (2019年12月21日現在のバージョンはv5.0)

https://developers.facebook.com/tools/explorer/

右側のアクセストークンと書かれたエリアがあるので、そちらのセレクトボックスを操作する

Facebookアプリ

自分が作成したFacebookアプリをセレクトボックスから選択する。

ユーザまたはページ

ユーザートークンを選択

アクセス許可

  • manage_pages
  • pages_show_list
  • instagram_basic
  • public_profile

上記の許可があれば問題ないと思う。

上記の操作をして Get Access Tokenをクリックすると、1段階目のユーザートークンが取得できるので、メモする。

2つ目のアクセストークンを取得する

APIエクスプローラー画面上部のマイアプリをクリックして、自分の作成したアプリを選択する。
設定 > ベーシックを選択し アプリIDapp secretをメモして控える。

https://graph.facebook.com/v5.0/oauth/access_token?grant_type=fb_exchange_token&client_id=XXXXXX&client_secret=YYYYYY&fb_exchange_token=ZZZZZZ
  • client_id=のあとにアプリIDを代入 (XXXXXX)部分
  • client_secret=のあとにapp secretを代入 (YYYYYY)部分
  • fb_exchange_totkenのあとに第1段階目のアクセストークンを代入 (ZZZZZZ)部分

上記の設定をしてURLにアクセスすると、

{
  access_token: "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
  token_type: "bearer"
}

というレスポンスが返ってくる。 このaccess_tokenが2段階目のアクセストークンなのでメモして控えておく。

3つ目のアクセストークンを取得する

https://graph.facebook.com/v5.0/me?access_token=XXXXXXXXXXXXXX

XXXXXXXXXXXXXX部分に2段階目のaccess_tokenを代入する。

アクセスすると、下記のレスポンスが返ってくる。

{
  name: "XXXX XXX",
  id: "YYYYYYYYYYYY"
}

idを控えて、下記のURLにアクセスする。

https://graph.facebook.com/v4.0/XXXXXX/accounts?access_token=YYYYYY
  • XXXXXXidを代入する
  • YYYYYYに2段階目のaccess_tokenを代入する

上記のURLにアクセスすると下記のレスポンスが返ってくる

{
  data: [
    {
      access_token: "XXXXXXXX"
      // 省略
    }
  ]
}

access_tokenの部分が、3段階目のアクセストークンになる。
複数アプリがある場合は、複数データが返ってくる。

InstagramビジネスアカウントIDを取得する

https://developers.facebook.com/tools/debug/accesstoken/

アクセストークデバッカーで、3段階目のトークンをチェックする。

有効期限が受け取らないになっているかつ、スコープ部分が設定したものになっていれば問題なし。
エクスプローラに再びアクセスする。

https://developers.facebook.com/tools/explorer/

GETの部分に

me?fields=accounts{instagram_business_account}

を代入し、送信ボタンをクリックする。

{
  "instagram_business_account": {
    "id": "17841419615689171"
    },
}

このinstagram_business_accountをメモして控えておく。

Instagramの投稿を取得するプログラムを書く

値が返されるフィールド

フィールド名 説明
caption アルバムの子を除く
children カルーセルアルバムのみ
comments アルバムの子、コメントの返信、キャプションを除く
comments_count アルバムの子とキャプションを除く、返信を含む
id
ig_id
is_comment_enabled アルバムの子を除く
like_count アルバムの子、およびメディアオブジェクトから作成された宣伝投稿への「いいね!」を除く。返信を含む
media_type
media_url
owner クエリを実行したIGユーザーがIGメディアオブジェクトも所有している場合にのみ返されます。それ以外の場合は、usernameフィールドが含まれます
permalink
shortcode
thumbnail_url (動画のIGメディアオブジェクトでのみ表示可能)
timestamp
username
// Constant.js
const INSTAGRAM = {
  BUSINESS_ID: 'XXXXXXXXXXXX',
  LIMIT: 8,
  TOKEN: 'YYYYYYYYYYYYYYYYYYYYYYYYYYYYY'
}

export default INSTAGRAM
// GetInstagramFeed.js
import INSTAGRAM from './Constant.js'

const { BUSINESS_ID, LIMIT, TOKEN } = INSTAGRAM

$.ajax({
  type: 'GET',
  url: `https://graph.facebook.com/v5.0/${BUSINESS_ID}?fields=name%2Cmedia.limit(${LIMIT})%7Bcaption%2Clike_count%2Cmedia_url%2Cpermalink%2Cmedia_type%2Cthumbnail_url%2Ctimestamp%2Cusername%7D&access_token=${TOKEN}`,
  dataType: 'json',
  success: (res) => {
    const { data } = res.data
  }
})

取得する部分については、

fields=name,media.limit(8){caption,like_count,media_url,permalink,media_type,thumbnail_url,timestamp,username}{}中にフィールドを追加して上げればよい。いらないものは削除する。

参考

https://developers.facebook.com/docs/instagram-api/reference/media/