Blogイロコトのブログ
インスタグラムの投稿画像をWebサイトに埋め込んで表示させる方法（Instagram Graph API）※ 2020年7月以降の対応
- コーディング
こんにちは、isshyです。前回の記事からもう１ヶ月が経とうとしています・・・早いですね。。
今回はInstagram(インスタグラム)の投稿画像を、Instagram Graph APIを使ってWebサイトに表示させる/埋め込む方法を書いてみました。（実装ページはこちら）
いままで使っていた旧Instagram APIは2020年6月29日で廃止になりました。今回のやり方に変更しないと投稿画像が表示されなくなりますのでご注意ください。(詳しくはインスタグラムのデベロッパー向けサイトにて)
目次
事前に準備するもの
・Facebookアカウント
・Instagramアカウント
・スマートフォン
ビジネスアカウントに変更する
- スマートフォンにてInstagramにログイン（PCでは×）
- メニューより「設定」→「アカウント」→「プロアカウントに切り替える」を選択
- カテゴリを選択、その後「クリエイター」または「ビジネス」どちらかを選択して完了です。
Facebookページにリンク
1.作成したFacebookページをPCで開き、「作成」を選択しページを作成する。（ページ名やカテゴリはなんでも良いです。）
2.作成したページより「設定」→「Instagram」→「アカウントをリンク」
アプリの作成
https://developers.facebook.com/
「マイアプリ」→「アプリの作成」→「製品を追加」にてInstagramを追加。
アクセストークンの取得（1回目）
https://developers.facebook.com/tools/explorer/
1.下記を確認し、「Generate Access Token」をクリック
Facebookアプリ：作成したアプリ名
ユーザーまたはページ：トークンを取得
2.下記を選択し、「Generate Access Token」をクリック
アクセス許可：
pages_show_list
business_management
instagram_basic
「以下のアクセス許可に、Facebookでは使用が許可されていないものがあります。」が別窓で表示されたらOKを押す。アクセストークンをメモする。（アクセストークン１とする）
アクセストークンの取得（2回目）
1.「マイアプリ」→作成したアプリを選択
2. 左の項目の設定→「ベーシック」を選択
「アプリID」「app secret」をメモする。
3.メモした「アプリID」「app secret」「アクセストークン」を使い、下記にアクセス。表示されたaccess_tokenメモする。（アクセストークン２とする）
https://graph.facebook.com/v6.0/oauth/access_token?grant_type=fb_exchange_token&client_id=[アプリidをコピペ]&client_secret=[app secretをコピペ]&fb_exchange_token=[アクセストークン1をコピペ]
表示されたaccess_tokenメモする。（アクセストークン２とする）
{"access_token":"ここに表示される文字列をコピーする","token_type":"bearer","expires_in":000000}
4.アクセストークン2を使い、下記にアクセスする。
https://graph.facebook.com/v6.0/me?access_token=[アクセストークン2をコピペ]
IDをメモする。
{
"name": "\u0000\1111 \2222\3333",
"id": "ここに表示される文字列をコピーする"
}
アクセストークンの取得（3回目）
https://graph.facebook.com/v6.0/[idをコピペ]/accounts?access_token=[アクセストークン2をコピペ]
access_tokenをメモする。（アクセストークン３とする）
"data": [
{
"access_token": "ここに表示される文字列をコピーする",
"category": "",
"category_list": [
{
"id": "",
"name": ""
}
],
"name": "",
"id": "",
"tasks": [
"",
"",
"",
"",
""
]
},
instagram_business_accountの確認
https://developers.facebook.com/tools/explorer/ に再度アクセス。上の入力窓にme?fields=accounts{instagram_business_account,name}をコピペしてエンター。
instagram_business_accountのIDをメモする。
{
"accounts": {
"data": [
{
"instagram_business_account": {
"id": "ここの文字列をコピーする"
},
"name": "",
"id": ""
},
{
"name": "",
"id": ""
}
],
"paging": {
"cursors": {
"before": "",
"after": ""
}
}
},
"id": ""
}
画像データを取得
上記で取得したinstagram_business_accountのIDとアクセストークン３を使用して画像を取得します。下記は1例ですが、これをCSSで整形すれば画像一覧の完成です！これでWebサイトやキャンペーンページ上にインスタグラムで投稿した写真/画像を表示できます。
実装したページはこちらを参照してください。
<ul class="insta-list">
<?php
$count = '4'; //画像取得数
$id = 'xxx'; //InstagramビジネスアカウントID
$token = ''; // アクセストークン3
$json = file_get_contents("https://graph.facebook.com/v6.0/{$id}?fields=name%2Cmedia.limit({$count})%7Bcaption%2Cmedia_url%2Cthumbnail_url%2Cpermalink%7D&access_token={$token}");
$json = mb_convert_encoding($json, 'UTF8', 'ASCII,JIS,UTF-8,EUC-JP,SJIS-WIN');
$obj = json_decode($json, true);
$insta = [];
foreach ($obj['media']['data'] as $k => $v) {
if ($v['thumbnail_url']) {
$data = [
'img' => $v['thumbnail_url'], // 投稿が動画だったらサムネURLを取得
'caption' => $v['caption'], // キャプション
'link' => $v['permalink'], // パーマリンク
];
} else {
$data = [
'img' => $v['media_url'],
'caption' => $v['caption'],
'link' => $v['permalink'],
];
}
$insta[] = $data;
}
foreach ($insta as $k => $v){
echo '<li><a href="'.$v['link'].'" target="_blank"><img src="'.$v['img'].'" alt="'.$v['caption'].'"></a></li>';
}
?>
</ul>
レート制限について
また、以前のAPIでは1時間に200回の呼び出し制限がありましたが、今回のInstagram Graph APIはユーザーの数の200倍となっています。
つまり、100ユーザーいれば1時間に1万回が呼び出し制限となります！これにより、アクセスのあるページにも使いやすくなったのではないでしょうか。
まとめ＆最後に
インスタグラムの画像をWebサイトやキャンペーンページ上に表示させたいというご要望は結構ありますので、この機会にできる様にしておくと良いと思います。
イロコトではエンタメ系(アニメ・ゲーム・漫画・イベントなど)のお仕事が多いですが、コーポレートサイトやLPなどの多岐にわったWebクリエイティブの制作を行なっていますので、基本的にはどのような業種やジャンルでもお引き受けしております。まずは下記お問い合わせフォームよりお気軽にご依頼ください。
isshy
アプリケーションエンジニア/Webディレクター ゲームと🍓好き。
