Instagram GraphAPI で画像一覧をWordPressで実装するパターン例

# ビジネスカウントID
INSTAGRAM_BUSINESS_ACCOUNT_ID=00000000000000000

# 有効期限なしのアクセストークン
INSTAGRAM_ETERNAL_ACCESS_TOKEN=XXXXXXXXXXXXXXXXXXXXXX

wp_enqueue_script( 'handlebars', get_theme_file_uri('/js/handlebars/handlebars.js'), [], 0, true);
wp_enqueue_script( 'instagram-list', get_theme_file_uri('/js/instagram-list.js'), ['handlebars', 'jquery'], 0, true);

// ajaxDataをinstagram-list.jsスクリプトに渡す。
// nonceを生成し、値をcheck_ajax_referer()に渡して認証させる。
wp_localize_script(
  'instagram-list',
  'ajaxData',
  [
    'nonce' => wp_create_nonce('ajax_nonce'),
    'ajaxurl' => admin_url('admin-ajax.php')
  ]
);

<ul class="instagram_list" data-instagram-list>

<script id="instagram_list_item" type="text/x-handlebars-template">

{{#each items}}

  <li><a href="{{permalink}}" target="_blank">

    <img src="{{src}}" alt="{{caption}}">

  </a></li>

{{/each}}

</script>

</ul>

/**
 * Instagramのデータを取得してリストに追加
 */
$.ajax({
    type: 'POST',
    url: ajaxData.ajaxurl, // WordPress AjaxのURL
    data: {
        nonce: ajaxData.nonce,             // CSRF対策用のnonce値を送信
        action: 'get_instagram_list'       // サーバー側で実行するWordPress Ajaxアクション
    },
    success: function(response) {
        // レスポンスが不正な場合やエラーの場合
        if (typeof response.success === 'undefined' || response.success !== true) {
            console.error('Ajax Error:', response);
            return;
        }

        // 成功の場合、Instagramデータを表示
        append_instagram_list(response);
    },
    error: function(xhr, status, error) {
        // Ajax通信自体でエラーが発生した場合
        console.error('Ajax通信エラー:', error);
    }
});

/**
 * インスタグラムのデータを追加
 * @param {object} response Instagram APIのレスポンス
 */
function append_instagram_list(response) {
    const $instagram_list = $('[data-instagram-list]');             // 画像リストを挿入する要素
    const $instagram_list_item_template = $('#instagram_list_item'); // Handlebarsテンプレート

    // 該当要素が存在しない場合は処理を終了
    if ($instagram_list.length === 0 || $instagram_list_item_template.length === 0) {
        return;
    }

    // レスポンスからメディアデータを取得。データがない場合は空の配列を設定
    const instagram_list_items = response.data && response.data.media && response.data.media.data ? response.data.media.data : [];

    // メディアタイプに応じてsrc（画像URLまたは動画サムネイルURL）を設定
    const items = instagram_list_items.map(item => ({
        ...item,
        src: item.media_type === 'VIDEO' ? item.thumbnail_url : item.media_url
    }));

    // Handlebarsテンプレートをコンパイルし、HTMLを生成
    const template = Handlebars.compile($instagram_list_item_template.html());
    const html = template({
        items: items
    });

    // 生成したHTMLをリスト要素に挿入
    $instagram_list.html(html);
}

// Ajaxリクエストのハンドラーを登録
// `wp_ajax_`はログインユーザー向け、`wp_ajax_nopriv_`は未ログインユーザー向け
add_action('wp_ajax_get_instagram_list', 'handle_get_instagram_list');
add_action('wp_ajax_nopriv_get_instagram_list', 'handle_get_instagram_list');

function handle_get_instagram_list() {
    // nonceチェック（CSRF対策）。クライアントサイドから送られたnonce値を検証
    check_ajax_referer('ajax_nonce', 'nonce');

    // Instagram APIからデータを取得する関数を呼び出す
    $response = get_instagram_list_from_api();

    // APIリクエストの成否に応じてJSONレスポンスを返す
    if ($response === null) {
        wp_send_json_error('APIリクエストに失敗しました'); // 失敗時はエラーレスポンス
    } else {
        wp_send_json_success($response); // 成功時はデータをJSONで返す
    }
}

/**
 * Instagram APIからデータを取得する
 * @return object|null 成功時はデコードされたJSONデータ（stdClassオブジェクト）、失敗時はnull
 */
function get_instagram_list_from_api() {
    // 環境変数からビジネスカウントIDとアクセストークンを取得
    $instagram_business_account_id = getenv('INSTAGRAM_BUSINESS_ACCOUNT_ID');
    $eternal_access_token = getenv('INSTAGRAM_ETERNAL_ACCESS_TOKEN');

    // Instagram Graph APIのURLを構築
    // 取得したいフィールド（name, mediaなど）を指定し、メディアの取得数も制御
    $url = 'https://graph.facebook.com/v22.0/' . $instagram_business_account_id . '?fields=name,media.limit(8){caption,media_url,thumbnail_url,permalink,like_count,comments_count,media_type}&access_token=' . $eternal_access_token;

    // cURLを使ってAPIリクエストを送信
    $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);

    // cURLが失敗した場合
    if ($response === false) {
        return null;
    }

    // JSONレスポンスをデコードして返す
    return json_decode($response);
}