最近v9.0試したら、v6.0くらいのときに作成した手順書通りに動かなかった。
埋め込むだけなのにマジで面倒。

マニュアルとしてやったことをここにメモしておく。

まずはクライアントに下記を操作していただく必要がある。

  • Instagramをビジネスアカウントに切り替えていただく
  • Facebookページを作成していただく
  • 作成していただいたFacebookページで自社のアカウントに「管理者」権限を付与していただく

API呼び出しのための情報を取得する

  1. https://developers.facebook.com/ にFacebookアカウントでログイン
  2. 「ビジネス統合の管理」で任意のアプリを作成
  3. 「設定→ベーシック」のカテゴリ、アプリアイコン、プライバシーポリシーのURLを入力
  4. 画面内の「アプリID」と「app secret」をメモ
  5. https://developers.facebook.com/tools/explorer/ で「ユーザーまたはページ」のセレクトボックス内の「ページアクセストークン」で任意のFacebookページを選択し、次のアクセス許可を入力してから「Generate Access Token」ボタンをクリック
    ・pages_show_list
    ・business_management
    ・instagram_basic
    ・instagram_manage_comments
    ・instagram_manage_insights
    ・pages_read_engagement
    ・pages_manage_metadata
    ・pages_read_user_content
    ・pages_manage_ads
    ・public_profile
  6. 表示されるアクセストークン1をメモ(アクセストークンは3つある)
  7. 「https://graph.facebook.com/v9.0/oauth/access_token?grant_type=fb_exchange_token&client_id=【アプリID】&client_secret=【app secret】&fb_exchange_token=【アクセストークン1】」
    にアクセスし、JSONの「access_token」をメモ(アクセストークン2)
  8. 「https://graph.facebook.com/v8.0/me?access_token=【アクセストークン2】」
    にアクセスし、JSONの「id」をメモ(ID)
  9. 「https://graph.facebook.com/v9.0/【ID】/accounts?access_token=【アクセストークン2】」
    にアクセスし、JSONの「access_token」をメモ(アクセストークン3)
  10. https://developers.facebook.com/tools/debug/accesstoken/ にアクセスし、アクセストークン3を送信して、(5)の設定が反映されているか、有効期限が「受け取らない」に設定されているかを確認
  11. 問題なければ、https://developers.facebook.com/tools/explorer/
    「me?fields=accounts{instagram_business_account}」
    を入力して、「送信ボタン」をクリック
  12. 表示されたJSONの「instagram_business_account」をメモする(ビジネスID)

JavaScriptで表示

下記を参考に改変する。

document.addEventListener('DOMContentLoaded', function() {
  const $instagram = document.querySelector('#instagram-widget');
  if ($instagram) {
    var insta_media_limit = '5'; // 画像表示数
    var insta_business_id = 'ビジネスID';
    var insta_access_token = 'アクセストークン3';
    axios.get('https://graph.facebook.com/v9.0/' + insta_business_id + '?fields=name%2Cmedia.limit(' + insta_media_limit + ')%7Bcaption%2Cmedia_url%2Cthumbnail_url%2Cpermalink%7D&access_token=' + insta_access_token, {}).then(function(response) {
      const data = response.data.media.data;
      data.forEach(function(d) {
        const $a = document.createElement('a');
        const $img = document.createElement('img');
        $a.setAttribute('href', d.permalink);
        $a.setAttribute('target', '_blank');
        $a.setAttribute('rel', 'noopener noreferrer');
        if (d.thumbnail_url) {
          $img.setAttribute('src', d.thumbnail_url);
        } else {
          $img.setAttribute('src', d.media_url);
        }
        $img.setAttribute('alt', d.caption);
        $a.appendChild($img);
        $instagram.appendChild($a);
      });
    }).catch(function(error) {
      console.log(error);
    });
  }
});

以上がv9.0のAPIを使うまでのフローである。
長かった。。。