Instagramの投稿一覧をサイトに埋め込む方法

Instagramの投稿一覧をサイトに埋め込む方法

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;
}

これでインスタ投稿一覧をウェブサイトに埋め込むことができました。

インスタの方で新しく投稿されると、サイトの方の投稿も自動で更新されます。

最後までお読みいただきありがとうございました◎

よかったらシェアしてね!
  • URLをコピーしました!
目次