1日かけて埋め込むことに成功したので、その備忘録です。
下準備
下準備でやらなければならないことは4つです。
- Facebookページの用意
- Instagramをプロアカウントに切り替える
- FacebookページとInstagramを連携する
- Facebookアプリの作成
ここまでは以下のサイトを見ながら作成していきました。
Instagram Graph APIを使用してWEBページに埋め込む手順
※1つのインスタグラムアカウントで連携できるFacebookページは1つまで
アクセストークン・ビジネスアカウントIDの取得
下準備の段階でFacebook for DeveloperでFacebookアプリを作成したかと思います。
今度はその中で埋め込みに必要なアクセストークンを合計3つ取得します。
こちらも以下のサイトを見ながら取得していきました。一番わかりやすかったです。
Instagram Graph APIの基本的な使い方・Webサイトにインスタの写真を埋め込みする方法
投稿一覧を表示するコード
2021.06.10
追記:自分のアカウントの情報だけを取得する場合は下のやり方でOK
クライアントのインスタグラムを埋め込む場合は、以下サイトを参考
Instagram Graph APIの基本的な使い方・Webサイトにインスタの写真を埋め込みする方法
アクセストークンを3つ取得してきたら、一度リクエストを投げてみます。
{instagram_business_account} | インスタのビジネスアカウントID |
{count} | 表示させたい数 |
{access_token} | 3つ目のアクセストークン |
以下のURLの{}を上記表を参考に自身のものに書き換えます。
<div class="wp-block-jin-gb-block-box simple-box6">
<div class="wp-block-columns">
<div class="wp-block-column" style="flex-basis: 100%">
<pre class="wp-block-code"><code>https://graph.facebook.com/v10.0/{instagram_business_account}?fields=name%2Cmedia.limit({count})%7Bcaption%2Cmedia_url%2Cthumbnail_url%2Cpermalink%7D&access_token={user_access_token}</code></pre>
</div>
</div>
</div>
※https://graph.facebook.com/v10.0~の下線部分はGraphAPIのバージョン(2021/5月現在)
ブラウザで入力してみて、JSON形式のデータが返ってきたらOKです。
ではコーディングしていきます。
今回は以下サイトを参考に、PHPで実装してみました。
2021年版!GraphAPIでインスタグラム投稿一覧を出力(JS/PHPサンプルコードあり)
<?php
$list = "";
$instagram = null;
$id = 'ビジネスアカウントID';
$token = '3つ目のアクセストークン';
$count = '8'; //表示させたい投稿数
$url = 'https://graph.facebook.com/v10.0/' . $id . '?fields=name,media.limit(' . $count . '){caption,media_url,thumbnail_url,permalink,like_count,comments_count,media_type}&access_token=' . $token;
$curl = curl_init();
curl_setopt($curl, CURLOPT_URL, $url);
curl_setopt($curl, CURLOPT_CUSTOMREQUEST, 'GET');
curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
$response = curl_exec($curl);
curl_close($curl);
//エラー
if ($response) {
$instagram = json_decode($response);
if (isset($instagram->error)) {
$instagram = null;
}
}
foreach ($instagram->media->data as $value) {
//メディアのタイプがビデオの場合、サムネを取得
if ($value->media_type == 'VIDEO') {
$src = $value->thumbnail_url;
$video = '<span class="video"></span>';
} else {
$src = $value->media_url;
$video = "";
}
$list .= '<li class="insta_item"><a href="' . $value->permalink . '" target="_blank"><img src="' . $src . '" alt="' . $value->caption . '">' . $video . '</a></li>';
}
echo '<ul class="insta_wrap">' . $list . '</ul>';
.insta_wrap{
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.insta_wrap li{
max-width: 40rem;
}
これでインスタ投稿一覧をウェブサイトに埋め込むことができました。
インスタの方で新しく投稿されると、サイトの方の投稿も自動で更新されます。
最後までお読みいただきありがとうございました◎