株式会社イロコト株式会社イロコト

Blogイロコトのブログ

  1. Home
  2. Blog
  3. インスタグラムの投稿画像をWebサイトに埋め込んで表示させる方法(Instagram Graph API)※ 2020年7月以降の対応

インスタグラムの投稿画像をWebサイトに埋め込んで表示させる方法(Instagram Graph API)※ 2020年7月以降の対応

2020.06.06
2020.06.16
  • コーディング
インスタグラムの投稿画像をWebサイトに表示する方法

こんにちは、isshyです。前回の記事からもう1ヶ月が経とうとしています・・・早いですね。。

 

今回はInstagram(インスタグラム)の投稿画像を、Instagram Graph APIを使ってWebサイトに表示させる/埋め込む方法を書いてみました。(実装ページはこちら

 

いままで使っていたInstagram APIは2020年6月29日で廃止の予定なので、今回のやり方に変更しないと投稿画像が表示されなくなる可能性がありますのでご注意ください。(詳しくはインスタグラムのデベロッパー向けサイトにて)

 

 

事前に準備するもの

・Facebookアカウント

・Instagramアカウント

・スマートフォン

 

 

ビジネスアカウントに変更する

  1. スマートフォンにてInstagramにログイン(PCでは×)
  2. メニューより「設定」→「アカウント」→「プロアカウントに切り替える」を選択
  3. 「クリエイター」または「ビジネス」どちらかを選択

 

 

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を押す。アクセストークンをメモする。(アクセストークン1とする)

 

 

 

アクセストークンの取得(2回目)

1.「マイアプリ」→作成したアプリを選択

2. 左の項目の設定→「ベーシック」を選択

 

「アプリID」「app secret」をメモする。

 

3.メモした「アプリID」「app secret」「アクセストークン」を使い、下記にアクセス。表示されたaccess_tokenメモする。(アクセストークン2とする)

 

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メモする。(アクセストークン2とする)

{"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をメモする。(アクセストークン3とする)

 "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アクセストークン3を使用して画像を取得します。下記は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クリエイティブの制作を行なっていますので、基本的にはどのような業種やジャンルでもお引き受けしております。

Contact

案件のご相談や、弊社についてのご質問など、
お気軽にご連絡くださいませ。

お問い合わせ
ページトップ