[Instagram Graph API5.0対応] Instagramの写真を埋め込む方法

※InstagramGraphAPIが7.0になりました。以下記事を参考下さい。

[Instagram Graph API7.0対応] Instagramの写真を埋め込む方法

2020.08.01

最近の案件でインスタを自動で表示するものがあったので、作業を進めようとしたところ、いつの間にやら･･･Instagram Grap APIのバージョンが5.0になっていました。

ということで、5.0バージョンでウェブサイトにInstagramの写真を自動更新表示させる方法を下記します。

1.Facebookページ」と「Instagramビジネスアカウント」を連携する

インスタグラムアカウントをビジネスアカウントに切り替える
Instagram公式ヘルプ参照
Facebookページとインスタグラムアカウントを連携する
Facebook公式ヘルプ参照

2.Facebook for Developersでアプリを作成

※個人アカウントを開発者アカウントにする必要があります（要携帯番号登録）
Facebook for Developersにアクセスし、「マイアプリ」のアプリ作成からアプリ作成。
最初のアプリ名とメールアドレスを入力して作成するだけでOKです。
作成したら、アプリ画面を開いて「設定」→「ベーシック」の以下画面開いて、「アプリID」と「app secret」をメモする。

3.グラフAPIエクスプローラーで、作ったアプリを選択して【第1トークン】を発行。

グラフAPIエクスプローラーはこちら

Facebookアプリを選択
「ユーザーまたはページ」は「ユーザートークン」を指定
「アクセス許可」で「public_profile」「manage_pages」「instagram_basic」「pages_show_list」を追加
「Get Access Token」をクリック
許可するためのポップアップ画面が出てくるので、進めていくと以下のような画面に最後たどりつくので、全て「はい」にして完了
※レビュー申請とかありますがとりあえずしなくてもいけました。
アクセストークン欄にでた【第1トークン】をメモする。

4.第2トークンを発行する

https://graph.facebook.com/v5.0/oauth/access_token?grant_type=fb_exchange_token&client_id=【アプリID】&client_secret=【app_secret】&fb_exchange_token=【第1トークン】

上記URLの【】をそれぞれ埋めてアクセスし、出てきた【access_token】をメモする。
これが第2トークンとなります。

5.【id】を取得する

https://graph.facebook.com/v5.0/me?access_token= 【第2トークン】

【】に第2トークンを入力してアクセス、出てきた【id】をメモする

6.第3トークンを発行する

https://graph.facebook.com/v5.0/【id】/accounts?access_token=【第2トークン】

【】をそれぞれ入力してアクセス。
jsonが表示されれば成功です。【access_token】をメモする。これが第3トークンとなります。

7.トークンの有効期限を確認する

【第3トークン】の有効期限をここで一応確認。「有効期限」が受け取らないになっていれば問題ありません。

8.【InstagramビジネスID】を取得する

グラフAPIエクスプローラに戻り、アクセストークン欄に【第3トークン】を入れ、「me?fields=id,name」となっている箇所に

me?fields=instagram_business_account

と入力し、送信をクリック

下のボックスに【instagram_business_account】の【id】があるので、それをメモします。
これが【instagramビジネスID】となります。

9.自動表示させる

以下をPHPで記述してサーバーにアップしましょう。
動画があるとその投稿部分だけ表示されないので、何か対策を。
改造とか、他に出力したいのがあるとかは任意で。

<ul>
	<?php
	$num   = 【取得数】;
	$fb_api = 'https://graph.facebook.com/v5.0/';
	$insta_id = 'InstagramビジネスID'; 
	$token = '第3トークン';
	$query = 'media.limit('. $num. '){caption,like_count,media_url,permalink,timestamp}'; //何を取得するか
	$insta_json  = file_get_contents("{$fb_api}{$insta_id}?fields={$query}&access_token={$token}");
	$insta_data  = json_decode($insta_json);
	?>
	<?php
		foreach((array)$insta_data->media->data as $post){ ?>
		<li><a href="<?php echo $post->permalink; ?>" target="_blank"><img src="<?php echo $post->media_url; ?>"></a></li>
	<?php } ?>
</ul>

※↑では写真の場合しかサムネイルが表示されません。動画でもサムネイルを表示させる場合は以下記事を参照下さい。