最近v9.0試したら、v6.0くらいのときに作成した手順書通りに動かなかった。
埋め込むだけなのにマジで面倒。
マニュアルとしてやったことをここにメモしておく。
まずはクライアントに下記を操作していただく必要がある。
- Instagramをビジネスアカウントに切り替えていただく
- Facebookページを作成していただく
- 作成していただいたFacebookページで自社のアカウントに「管理者」権限を付与していただく
API呼び出しのための情報を取得する
- https://developers.facebook.com/ にFacebookアカウントでログイン
- 「ビジネス統合の管理」で任意のアプリを作成
- 「設定→ベーシック」のカテゴリ、アプリアイコン、プライバシーポリシーのURLを入力
- 画面内の「アプリID」と「app secret」をメモ
- 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
※追記 v18 の場合、以下
・pages_show_list
・business_management
・instagram_basic
・instagram_manage_comments
・instagram_manage_insights
・instagram_content_publish
・instagram_manage_messages
・pages_read_engagement
・instagram_shopping_tag_products
・public_profile - 表示されるアクセストークン１をメモ（アクセストークンは3つある）
- 「https://graph.facebook.com/v9.0/oauth/access_token?grant_type=fb_exchange_token&client_id=【アプリID】&client_secret=【app secret】&fb_exchange_token=【アクセストークン１】」
にアクセスし、JSONの「access_token」をメモ（アクセストークン２） - 「https://graph.facebook.com/v8.0/me?access_token=【アクセストークン２】」
にアクセスし、JSONの「id」をメモ（ID） - 「https://graph.facebook.com/v9.0/【ID】/accounts?access_token=【アクセストークン２】」
にアクセスし、JSONの「access_token」をメモ（アクセストークン３） - https://developers.facebook.com/tools/debug/accesstoken/ にアクセスし、アクセストークン３を送信して、（５）の設定が反映されているか、有効期限が「受け取らない」に設定されているかを確認
- 問題なければ、https://developers.facebook.com/tools/explorer/ で
「me?fields=accounts{instagram_business_account}」
を入力して、「送信ボタン」をクリック - 表示されたJSONの「instagram_business_account」をメモする（ビジネスID）
JavaScriptで表示
下記を参考に改変する。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
</head>
<body>
<div id="instagram-widget"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.21.1/axios.min.js"></script>
<script src="insta.js"></script>
</body>
</html>// insta.js
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 = 'アクセストークン３';
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を使うまでのフローである。
長かった。。。