Instagram Graph APIを使ってみる

Instagram Graph APIを使う機会があったので、アカウントの設定・アクセストークンの取得を行い、自分の投稿を表示するまでの流れを試してみます。

Instagramのアカウントをプロアカウントに切り替える

まずはInstagramのアカウントをプロアカウントに切り替えます。
プロアカウントには「クリエイターアカウント」と「ビジネスアカウント」がありますが、今回はクリエイターアカウントに切り替えます。
アカウントの切り替えはPCからはできないようなので注意してください。

スマホアプリからハンバーガーメニューを開いて、設定を選択します。

アカウントを選択します。

プロアカウントに切り替えるを選択します。

クリエイターを選択します。

クリエイターアカウントの説明が表示されるので、次へを選択します。

アカウントに合ったカテゴリを選択します。

連絡先情報を必要に応じて変更します。

今設定した2項目をプロフィールに表示するかを設定します。
設定が終わったら完了を選択します。

Facebookページへのリンクですが、ここは後から設定するので「今はFacebookにリンクしない」を選択します。

これでプロアカウントへの切り替えが完了しました。

　

Facebookページにリンクする

次にInstagramのアカウントをFacebookページにリンクします。
今回はFacebookページを作成していないので、リンク時に作成するようにします。

引き続きスマホアプリで「プロフィールを編集」を選択します。

プロフィール情報のページを選択します。

Facebookページにリンクですが、既にFacebookページがある場合には「既存ページをリンク」を選択してください。
今回はFacebookページがないので、「facebookページを作成」を選択します。

続けるを選択します。

紐づけするアカウントでFacebookにログインします。

ログインを選択します。

これでFacebookページが作成され、プロアカウントとの連携ができました。
　

Facebookアプリの作成

次にFacebookアプリを作成します。
Facebook Developersにアクセスして、上部メニューから マイアプリ > アプリを作成 をクリックします。

アプリ名を入力して、アプリIDを作成します。

Facebookアプリが作成できました。
これでFacebookのAPIを使用することができるようになります。

　

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

次にアクセストークンの取得ですが、今回アクセストークンを3段階取得する必要があります。
まず1つ目の取得ですが、Facebook DevelopersのグラフAPIエクスプローラにアクセスして、トークンを取得 > ユーザーアクセストークンを取得 を選択します。

アクセスを許可する項目を選択します。
各項目の説明についてはこちらをご確認ください。

今回は「イベント・グループ・ページ」の「pages_show_list」「business_management」「manage_pages」と、「その他」の「instagram_basic」にチェックを入れました。
選択後、アクセストークンを取得をクリックします。

ログインを求められるのでログインして進みます。

先ほど設定した項目のアクセス許可を求められるので、OKをクリックします。

アクセストークンが表示されるので、後で使えるようにメモにコピペしておきます。

　

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

先ほど取得した1つ目のアクセストークンは有効期限は1時間しかないので、有効期限を延長する2つ目のアクセストークンを取得します。
先ほど作成したFacebookアプリのダッシュボード画面に戻り、設定 > ベーシックを選択します。

アプリIDとapp secretをメモにコピペします。
app secretはデフォルトだと非表示になっているので、右の表示ボタンをクリックして、パスワードを入力して表示させてからコピペしてください。

1つ目のアクセストークンとアプリID、app secretを使って、以下URLにブラウザでアクセスします。

https://graph.facebook.com/v4.0/oauth/access_token?grant_type=fb_exchange_token&client_id=【アプリID】&client_secret=【app secret】&fb_exchange_token=【1つ目のアクセストークン】

以下のように表示されるので、access_tokenの値をメモにコピペしておきます。
この値が2つ目のアクセストークンになります。

{"access_token":"XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX","token_type":"bearer","expires_in":5183999}

　

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

次は2つ目のアクセストークンを使い、有効期限のない3つ目のアクセストークンを取得します。
ブラウザで以下URLにアクセスします。

https://graph.facebook.com/v4.0/me?access_token=【2つ目のアクセストークン】

以下のように表示されるので、idの値をメモにコピペします。

{
   "name": "XXXXXX",
   "id": "XXXXXXXXXXXXXXXX"
}

先ほどのidを使い、ブラウザで以下URLにアクセスします。

https://graph.facebook.com/v4.0/【id】/accounts?access_token=【2つ目のアクセストークン】

以下のように表示されるので、access_tokenをメモにコピペします。
Facebookページが複数ある場合はdataの値が複数表示されるので、注意してください。

{
   "data": [
      {
         "access_token": "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
         "category": "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
         "category_list": [
            {
               "id": "XXXXXXXXXX",
               "name": "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"
            }
         ],
         "name": "XXXXX",
         "id": "XXXXXXXXXXXXXXX",
         "tasks": [
            "ANALYZE",
            "ADVERTISE",
            "MODERATE",
            "CREATE_CONTENT",
            "MANAGE"
         ]
      }
   ],
   "paging": { XXXXX }
   }
}

これで3つ目のアクセストークンが取得できました。
この3つ目のアクセストークンを使って投稿データを取得するようになります。
　

アクセストークンの確認

取得したアクセストークンが問題ないかを確認します。
Facebook Developersのアクセストークンデバッカーにアクセスして、先ほどのアクセストークンを入力してデバックをクリックします。

有効期限が受け取らないになっていれば問題なさそうです。

　

InstagramのビジネスアカウントIDの取得

最後にInstagramのビジネスアカウントIDを取得します。
グラフAPIエクスプローラにアクセスして、アクセストークンに3つ目のアクセストークンをいれます。
その下のURLに「me?fields=instagram_business_account」を入れて右の送信をクリックします。

以下のように表示されるので、instagram_business_accountのidをメモにコピペします。

{
  "instagram_business_account": {
    "id": "XXXXXXXXXXXXXXXXX"
  },
  "id": "XXXXXXXXXXXXXXX"
}

これで必要な情報が一通り揃いました。
　

投稿の取得

ここまでで取得した情報を使って、実際に投稿を取得してみます。
以下のURLで取得できます。

https://graph.facebook.com/v4.0/【ビジネスアカウントID】?fields=【取得するパラメータ】&access_token=【3つ目のアクセストークン】

パラメータで指定できる項目はこちらをご確認ください。

PHPでデータの取得を行います。

get.php

<?php
$accessToken = 'アクセストークン'; // アクセストークン
$businessId = 'ビジネスアカウントID'; // ビジネスアカウントID
$fields = 'media{caption,media_url,permalink,timestamp}'; // 取得するデータのパラメータ

$url = 'https://graph.facebook.com/v4.0/'.$businessId."?fields=".$fields."&access_token=".$accessToken;

$jsonData = file_get_contents($url);

$json = json_decode($jsonData, true);
echo json_encode($json["media"]["data"]);

データが取得できていることが確認できました。
Instagramから投稿を取得するデモページ

JavaScriptでこのデータを取得して、HTMLに表示させてみます。
まずはHTMLです。

<div id="sample"></div>

JavaScriptのAjaxでget.phpの内容を取得して、HTMLに埋め込むようにします。

$(function() {
	$.ajax({
		url: 'get.php',
		dataType: 'json',
		success: function(data) {
			var insert = '<ul>';
				for (var i = 0; i < data.length; i++) {
					insert += '<li>';
						// 画像とリンク先
						insert += '<a href="' + data[i]['permalink'] + '" target="_blank">';
							insert += '<img src="' + data[i]['media_url'] + '" class="instagram-image" />';
						insert += '</a>';

						insert += '<div class="instagram-data">';
							// 日付
							var d = new Date(data[i]['timestamp']);
							var year  = d.getFullYear();
							var month = d.getMonth() + 1;
							var day  = d.getDate();
							insert += '<div class="date">' + year + '/' + month + '/' + day + '</div>';
						insert += '</div>';
					insert += '</li>';
				};
			insert += '</ul>';
			$('#sample').append(insert);
		}
	});
});

これで投稿内容を表示することができました。
Instagramから投稿を取得して表示するデモページ
今回表示部分をJavaScriptで行いましたが、PHPでそのまま表示まで行っても問題ありません。
　

【参考サイト】

• どう使う？Instagramに新しく追加されたクリエイターアカウント
• InstagramグラフAPI – Instagramプラットフォーム
• Instagram Graph APIの基本的な使い方・Webサイトにインスタの写真を埋め込みする方法 | Arrown
• 新Instagram Graph APIを使ってインスタグラムの画像をWebサイトに表示させる | GOO-UP（グーアップ）