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

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

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

2020.01.27

気付いたらInstagram Grap APIのバージョンが4.0になっていました。

ということで、これを使ってウェブサイトにInstagramの写真を自動更新表示させる方法を下記します。

※以下のような新しいグラフエクスプローラー画面で、やってみましたがうまくいきませんでした。赤丸のリンククリックで以前のものに戻してから行ってください。

手順としては以下となります。

「Facebookページ」と「Instagramビジネスアカウント」を連携する
Facebook for Developersでアプリを作成。アプリ名とメールアドレスのみで大丈夫。
2で作ったアプリを選択した状態で、グラフAPIエクスプローラで【第1トークン】を発行。
・アクセストークン欄右のプルダウンでユーザーアクセストークンを取得
・【page_show_list、publich_pages、manage_pages、instagram_basic】にチェックを入れて取得をクリック
FacebookページやらInstagramやらの許可を入れる。
アクセストークン欄に「第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トークンになる）
8でメモした【第2トークン】を以下URL中に入力してアクセス
https://graph.facebook.com/v4.0/me?access_token= 【第2トークン】
9でアクセスした画面内の【name】【id】をメモる
10の【id】と【第2トークン】を使って以下URLにアクセス
https://graph.facebook.com/v4.0/【id】/accounts?access_token=【第2トークン】
jsonが表示されるはずなので、その中の【access_token】をメモる（第3トークンになる）
12の【第3トークン】の有効期限をここで一応確認
期限が受け取らないになってれば問題なし。
【InstagramビジネスID】を取得する
グラフAPIエクスプローラのアクセストークン欄に【第3トークン】を入れて、アクセストークン欄すぐ下のバーに「me?fields=instagram_business_account」と入れて、送信ボタンクリック
さらに下のとこに【instagram_business_account】の【id】が【InstagramビジネスID】になる。
phpで表示は以下コード。

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