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

Instagram Grap APIの最新バージョン7.0でInstagramの写真とURLを取得し、自動表示させる方法を下記します。基本的なやり方は今までのバージョンとそう差異はありません。

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

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

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

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

アプロの左メニュー「プロダクト」から、「InstagramグラフAPI」と「Instagram Basic Display」の「設定」をクリック。
※クリック後の画面は無視してよい。
※「Instagram Basic Display」は関係なさそうですが、一応･･･。

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

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

Facebookアプリを選択
「ユーザーまたはページ」は「ユーザーアクセストークンを取得」を選択
「アクセス許可」で「public_profile」「instagram_basic」「pages_show_list」「pages_manage_metadata」を追加
「Generate Access Token」をクリック
利用したいインスタビジネスアカウント・アクセスできるFacebookページの設定を選択して次へ
許可するアクセスの設定は全てチェックし、レビュー申請は無視して完了をクリック
アクセストークン欄にでた【第1トークン】をメモする。

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

https://graph.facebook.com/v7.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/v7.0/me?access_token= 【第2トークン】

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

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

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

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

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

【第3トークン】の有効期限をここで一応確認。「有効期限」が受け取らないになっていれば問題ありません。
※「デバッグ」ボタン上の「APIバージョン」を「v7.0」にする

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

https://graph.facebook.com/v7.0/me?fields=instagram_business_account&access_token=【第3トークン】

上記URLの【】に第3トークンを入力してアクセス。
【instagram_business_account】の【id】をメモします。
これが【instagramビジネスID】となります。

9.自動表示させる

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

<ul>
	<?php
	$num   = 【取得数】;
	$fb_api = 'https://graph.facebook.com/v7.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>

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