Web Design Leaves

<?php
// Instagram ビジネスアカウント ID
define('IGBA_ID', '123456789');
// Instagram ユーザーアクセストークン
define('INSTA_TOKEN', 'EAAFPcGBdBr0BAPuJxgo..........Y3kT4ZBf');

<?php
//ビジネスアカウント ID とアクセストークンを記述したファイルの読み込み
require 'libs/insta_vars.php';
//Instagram ビジネスアカウント ID
$business_id = IGBA_ID;
// ユーザーアクセストークン
$token = INSTA_TOKEN;

//以下は前述のコードと同じなので省略
//グラフAPI ホストURL（ルートエンドポイント）
$api = 'https://graph.facebook.com/';
//API のバージョン
$version = 'v20.0';
以下省略
...

//ビジネスアカウント ID とアクセストークンを記述したファイルの読み込み
require get_theme_file_path() . '/libs/insta_vars.php';
以下省略

// Instagram ユーザーアクセストークン
export const accessToken = "xxxxxxxxxx";
// Instagram ビジネスアカウント ID
export const businessID = "xxxxxx";

// 別ファイルに記述されたアクセストークン と Instagram ビジネスアカウント ID をインポートして変数に代入
import {accessToken, businessID} from './insta-val.js';

document.addEventListener('DOMContentLoaded', ()=> {
  // 出力先の要素を取得
  const target = document.getElementById('insta-div');
  if (target) {
    //グラフAPI ホストURL（ルートエンドポイント）
    const api = 'https://graph.facebook.com/';
    //API のバージョン
    const version = 'v20.0';
    // 表示件数
    const limit = target.dataset.thumbsLimit ? parseInt(target.dataset.thumbsLimit): 4;
    ・・・以下省略・・・
  }
});

<script src="js/insta-feeds.js" type="module"></script>

{
  "data": [
      ... データ（省略）
  ],
  "paging": {
    "cursors": {
      "after": "MTAxNTExOTQ1MjAwNzI5NDE=",
      "before": "NDMyNzQyODI3OTQw"
    },
    "previous": "https://graph.facebook.com/{your-user-id}/albums?limit=25&before=NDMyNzQyODI3OTQw"
    "next": "https://graph.facebook.com/{your-user-id}/albums?limit=25&after=MTAxNTExOTQ1MjAwNzI5NDE="
  }
}

document.addEventListener("DOMContentLoaded", () => {
  // 次のデータのエンドポイントを入れる変数を宣言
  let next;

  // 出力先の要素を取得
  const target = document.getElementById("insta-div");

  if (target) {
    // Instagram ビジネスアカウント ID
    const businessID = "xxxxxx";
    // アクセストークン
    const accessToken = "xxxxxx";

    //グラフAPI ホストURL（ルートエンドポイント）
    const api = "https://graph.facebook.com/";
    // API のバージョン（使用するバージョンに応じて変更）
    const version = 'v20.0';
    // 表示件数（#insta-div に data-thumbs-limit 属性が指定されていればその値）
    const limit = target.dataset.thumbsLimit ? parseInt(target.dataset.thumbsLimit): 4;
    //取得するフィールド
    const field =
      "caption,media_url,thumbnail_url,permalink,like_count,comments_count,media_type";
    // fields パラメータ
    const fields = limit
      ? `media.limit(${limit}){${field}}`
      : `media{${field}}`;
    // 渡したいパラメータ（パラメーターを表すオブジェクト）
    const params = {
      fields,  // fields: fields, と同じこと
      access_token: accessToken,
    };
    // オブジェクト形式のパラメータをクエリ文字列に変換
    const query = new URLSearchParams(params);
    // fetch() に渡す URL の組み立て
    const url = `${api}/${version}/${businessID}?${query}`;

    fetch(url)
      .then((response) => {
        // ステータスが ok であればレスポンスを JSON として解析
        if (response.ok) {
          return response.json();
        } else {
          // ステータスが ok でなければエラーにする
          throw new Error(
            `Insta Fetch リクエスト失敗:${response.status} ${response.statusText}`
          );
        }
      })
      .then((instaResponse) => {
        // 次のデータのエンドポイントを取得
        next = instaResponse.media.paging.next;
        // 取得したデータから投稿一覧の HTML を作成（関数を別途定義）
        const instaFeeds = createInstaFeeds(instaResponse.media.data);

         // #insta-div に data-heading-text 属性が指定されていればその値を見出し文字列に（指定がなければ見出しを表示しない）
         const headingText =  target.dataset.headingText ? target.dataset.headingText: '';
         // #insta-div に data-heading-tag 属性が指定されていればその値を heading の要素に（デフォルトは h2）
         const headingTag = target.dataset.headingTag ? target.dataset.headingTag: 'h2';
         // 見出し部分のマークアップを作成
         const heading = headingText ? `<${headingTag} class="insta-icon">${headingText}</${headingTag}>`: '';

        if (!next) {
          // 取得した画像データと見出しなどを出力
          target.innerHTML = `<div class="insta-wrapper">
      ${heading}
      <div class="insta-container">${instaFeeds}</div>
    </div>`;
        } else {
          // 次のデータのエンドポイントが存在すれば、投稿を読み込むボタンを出力
          target.innerHTML = `<div class="insta-wrapper">
      ${heading}
      <div class="insta-container">${instaFeeds}</div>
      <button id="load-more-insta-feeds">Load More</button>
    </div>`;
          const loadMoreInstaFeeds = target.querySelector( "#load-more-insta-feeds");
          // 投稿を読み込むボタンをクリックしたら次のデータのエンドポイントからデータを取得
          if (loadMoreInstaFeeds) {
            loadMoreInstaFeeds.addEventListener("click", () => {
              loadMoreFeeds(next);
            });
          }
        }
      }).catch((error) => {
        console.warn(error.message);
        // エラーをページに表示する場合
        // target.innerHTML = `<p>エラー：${error.message} </p>`
      });
  }

  // 引数に fetch() で取得したレスポンスの data を受取、インスタ一覧の HTML を生成する関数
  function createInstaFeeds(data) {
    // 出力する値を入れる変数
    let instaFeeds = ""; // フィード部分の HTML
    let src = ""; // img の src
    let video = ""; // メディアタイプがビデオの場合に出力する要素
    // レスポンスのデータ（media.data）は配列なので forEach でループ処理
    data.forEach((item) => {
      // メディアタイプがビデオの場合
      if (item.media_type === "VIDEO") {
        src = item.thumbnail_url;
        // ビデオの場合は以下の span 要素でアイコンを表示
        video = '<span class="video-icon"></span>';
      }
      // メディアタイプが画像の場合
      else {
        src = item.media_url;
        video = "";
      }
      // フィード部分の HTML を作成
      const instaMediaDiv = `<div class="insta-media">
    <a href="${item.permalink}" target="_blank" rel="noopener">
      <img src="${src}" alt="${item.caption ? item.caption : ""}">
      ${video ? video : ""}
      <span class="like-count">${item.like_count}</span>
      <span class="comments-count">${item.comments_count}</span>
    </a>
  </div>
  `;
      instaFeeds += instaMediaDiv;
    });
    return instaFeeds;
  }

  // 次のデータのエンドポイント（url）を引数に受取、HTML を更新する関数
  function loadMoreFeeds(url) {
    fetch(url)
      .then((response) => {
        // ステータスが ok であればレスポンスを JSON として解析
        if (response.ok) {
          return response.json();
        } else {
          // ステータスが ok でなければエラーにする
          throw new Error(
            `リクエスト失敗:${response.status} ${response.statusText}`
          );
        }
      })
      .then((instaResponse) => {
        const instaFeeds = createInstaFeeds(instaResponse.data);
        // 次のデータのエンドポイントを取得（instaResponse.media.paging.next ではなく instaResponse.paging.next になる）
        next = instaResponse.paging.next;
        // 投稿のコンテナを取得
        const instaContainer = target.querySelector(".insta-container");
        if (instaContainer) {
          // 投稿のコンテナに追加の投稿の HTML を挿入
          instaContainer.insertAdjacentHTML("beforeend", instaFeeds);
          if (!next) {
            // 次のデータのエンドポイント（next）が存在しなければボタンを削除
            target.querySelector("#load-more-insta-feeds").remove();
          }
        }
      });
  }
});

#load-more-insta-feeds {
  background-color: #111;
  padding: 10px 20px;
  color: #fff;
  margin: 30px 0;
  cursor: pointer;
  border: none;
  transition: background-color .3s;
}

#load-more-insta-feeds:hover {
  background-color: #444;
}

<div id="insta-div" data-thumbs-limit="3" data-heading-text="インスタ表示テスト" data-heading-tag="h6"></div>

h3.insta-icon::before {
  height: 26px;
  width: 26px;
}

h4.insta-icon::before {
  height: 24px;
  width: 24px;
  vertical-align: -5px;
}

h5.insta-icon::before {
  height: 23px;
  width: 23px;
  vertical-align: -5px;
}

h6.insta-icon::before {
  height: 22px;
  width: 22px;
  vertical-align: -5px;
}

<div id="insta-div" data-thumbs-limit="3" data-max-media-count="12"></div>

document.addEventListener("DOMContentLoaded", () => {
  // 次のデータのエンドポイントを入れる変数を宣言
  let next;
  // 表示した投稿の総数
  let mediaLoaded = 0;

  // 出力先の要素を取得
  const target = document.getElementById("insta-div");

  if (target) {
    // Instagram ビジネスアカウント ID
    const businessID = "xxxxxx";
    // アクセストークン
    const accessToken = "xxxxxx";

    //グラフAPI ホストURL（ルートエンドポイント）
    const api = "https://graph.facebook.com/";
    // API のバージョン（使用するバージョンに応じて変更）
    const version = 'v20.0';
    // 表示件数（#insta-div に data-thumbs-limit 属性が指定されていればその値）
    const limit = target.dataset.thumbsLimit ? parseInt(target.dataset.thumbsLimit): 4;
    //取得するフィールド
    const field = "caption,media_url,thumbnail_url,permalink,like_count,comments_count,media_type";
    // fields パラメータ
    const fields = limit
      ? `media.limit(${limit}){${field}}`
      : `media{${field}}`;
    // 渡したいパラメータ（パラメーターを表すオブジェクト）
    const params = {
      fields,   // fields: fields, と同じこと
      access_token: accessToken,
    };
    // オブジェクト形式のパラメータをクエリ文字列に変換
    const query = new URLSearchParams(params);
    // fetch() に渡す URL の組み立て
    const url = `${api}/${version}/${businessID}?${query}`;

    fetch(url)
      .then((response) => {
        // ステータスが ok であればレスポンスを JSON として解析
        if (response.ok) {
          return response.json();
        } else {
          // ステータスが ok でなければエラーにする
          throw new Error(
            `Insta Fetch リクエスト失敗:${response.status} ${response.statusText}`
          );
        }
      })
      .then((instaResponse) => {
        // 次のデータのエンドポイントを取得
        next = instaResponse.media.paging.next;
        // 取得したデータから投稿一覧の HTML を作成（関数を別途定義）
        const instaFeeds = createInstaFeeds(instaResponse.media.data);
        // 最大表示数（#insta-div に data-max-media-count 属性が指定されていればその値）
        const maxMediaCount = target.dataset.maxMediaCount ? parseInt(target.dataset.maxMediaCount): 0;
        // 表示した投稿数をカウント
        mediaLoaded += limit;
         // #insta-div に data-heading-text 属性が指定されていればその値を見出し文字列に（指定がなければ見出しを表示しない）
         const headingText =  target.dataset.headingText ? target.dataset.headingText: '';
         // #insta-div に data-heading-tag 属性が指定されていればその値を heading の要素に（デフォルトは h2）
         const headingTag = target.dataset.headingTag ? target.dataset.headingTag: 'h2';
         // 見出し部分のマークアップを作成
         const heading = headingText ? `<${headingTag} class="insta-icon">${headingText}</${headingTag}>`: '';

        if (!next || (maxMediaCount && maxMediaCount <= mediaLoaded)) {
          // 取得した画像データと見出しなどを出力
          target.innerHTML = `<div class="insta-wrapper">
      ${heading}
      <div class="insta-container">${instaFeeds}</div>
    </div>`;
        } else {
          // 次のデータのエンドポイントが存在すれば、投稿を読み込むボタンを出力
          target.innerHTML = `<div class="insta-wrapper">
      ${heading}
      <div class="insta-container">${instaFeeds}</div>
      <button id="load-more-insta-feeds">Load More</button>
    </div>`;
          const loadMoreInstaFeeds = target.querySelector( "#load-more-insta-feeds");
          // 投稿を読み込むボタンをクリックしたら次のデータのエンドポイントからデータを取得
          if (loadMoreInstaFeeds) {
            loadMoreInstaFeeds.addEventListener("click", () => {
              // loadMoreFeeds() を呼び出す際に表示件数と最大表示数も引数に渡す
              loadMoreFeeds(next, limit, maxMediaCount);
            });
          }
        }
      }).catch((error) => {
        console.warn(error.message);
        // エラーをページに表示する場合
        // target.innerHTML = `<p>エラー：${error.message} </p>`
      });
  }

  // 引数に fetch() で取得したレスポンスの data を受取、インスタ一覧の HTML を生成する関数
  function createInstaFeeds(data) {
    // 出力する値を入れる変数
    let instaFeeds = ""; // フィード部分の HTML
    let src = ""; // img の src
    let video = ""; // メディアタイプがビデオの場合に出力する要素
    // レスポンスのデータ（media.data）は配列なので forEach でループ処理
    data.forEach((item) => {
      // メディアタイプがビデオの場合
      if (item.media_type === "VIDEO") {
        src = item.thumbnail_url;
        // ビデオの場合は以下の span 要素でアイコンを表示
        video = '<span class="video-icon"></span>';
      }
      // メディアタイプが画像の場合
      else {
        src = item.media_url;
        video = "";
      }
      // フィード部分の HTML を作成
      const instaMediaDiv = `<div class="insta-media">
    <a href="${item.permalink}" target="_blank" rel="noopener">
      <img src="${src}" alt="${item.caption ? item.caption : ""}">
      ${video ? video : ""}
      <span class="like-count">${item.like_count}</span>
      <span class="comments-count">${item.comments_count}</span>
    </a>
  </div>
  `;
      instaFeeds += instaMediaDiv;
    });
    return instaFeeds;
  }

  // 次のデータのエンドポイント（url）を引数に受取、HTML を更新する関数
  function loadMoreFeeds(url, limit, maxMediaCount) {
    fetch(url)
      .then((response) => {
        // ステータスが ok であればレスポンスを JSON として解析
        if (response.ok) {
          return response.json();
        } else {
          // ステータスが ok でなければエラーにする
          throw new Error(
            `リクエスト失敗:${response.status} ${response.statusText}`
          );
        }
      })
      .then((instaResponse) => {
        const instaFeeds = createInstaFeeds(instaResponse.data);
        // 次のデータのエンドポイントを取得（instaResponse.media.paging.next ではなく instaResponse.paging.next になる）
        next = instaResponse.paging.next;
        // 投稿のコンテナを取得
        const instaContainer = target.querySelector(".insta-container");
        if (instaContainer) {
          // 投稿のコンテナに追加の投稿の HTML を挿入
          instaContainer.insertAdjacentHTML("beforeend", instaFeeds);
          // 読み込み数をカウント
          mediaLoaded += limit;
          // next が存在しないか、表示数が最大表示数より大きければ
          if (!next ||  maxMediaCount && maxMediaCount <= mediaLoaded) {
            // 次のデータのエンドポイント（next）が存在しなければボタンを削除
            target.querySelector("#load-more-insta-feeds").remove();
          }
        }
      });
  }
});

<div id="insta-div" data-thumbs-limit="3" data-heading-text="インスタ表示テスト"></div>

// 別ファイルに記述されたアクセストークン と Instagram ビジネスアカウント ID をインポートして変数に代入
import {accessToken, businessID} from './insta-val.js';

document.addEventListener("DOMContentLoaded", () => {
  // 次のデータのエンドポイントを入れる変数を宣言
  let next;
  // 表示した投稿の総数
  let mediaLoaded = 0;

  // 出力先の要素を取得
  const target = document.getElementById("insta-div");

  if (target) {
    //グラフAPI ホストURL（ルートエンドポイント）
    const api = "https://graph.facebook.com/";
    // API のバージョン（使用するバージョンに応じて変更）
    const version = 'v20.0';
    // 表示件数（#insta-div に data-thumbs-limit 属性が指定されていればその値）
    const limit = target.dataset.thumbsLimit ? parseInt(target.dataset.thumbsLimit): 4;
    //取得するフィールド
    const field = "caption,media_url,thumbnail_url,permalink,like_count,comments_count,media_type";
    // fields パラメータ
    const fields = limit
      ? `media.limit(${limit}){${field}}`
      : `media{${field}}`;
    // 渡したいパラメータ（パラメーターを表すオブジェクト）
    const params = {
      fields,   // fields: fields, と同じこと
      access_token: accessToken,
    };
    // オブジェクト形式のパラメータをクエリ文字列に変換
    const query = new URLSearchParams(params);
    // fetch() に渡す URL の組み立て
    const url = `${api}/${version}/${businessID}?${query}`;

    fetch(url)
      .then((response) => {
        // ステータスが ok であればレスポンスを JSON として解析
        if (response.ok) {
          return response.json();
        } else {
          // ステータスが ok でなければエラーにする
          throw new Error(
            `Insta Fetch リクエスト失敗:${response.status} ${response.statusText}`
          );
        }
      })
      .then((instaResponse) => {
        // 次のデータのエンドポイントを取得
        next = instaResponse.media.paging.next;
        // 取得したデータから投稿一覧の HTML を作成（関数を別途定義）
        const instaFeeds = createInstaFeeds(instaResponse.media.data);
        // 最大表示数（#insta-div に data-max-media-count 属性が指定されていればその値）
        const maxMediaCount = target.dataset.maxMediaCount ? parseInt(target.dataset.maxMediaCount): 0;
        // 表示した投稿数をカウント
        mediaLoaded += limit;
         // #insta-div に data-heading-text 属性が指定されていればその値を見出し文字列に（指定がなければ見出しを表示しない）
         const headingText =  target.dataset.headingText ? target.dataset.headingText: '';
         // #insta-div に data-heading-tag 属性が指定されていればその値を heading の要素に（デフォルトは h2）
         const headingTag = target.dataset.headingTag ? target.dataset.headingTag: 'h2';
         // 見出し部分のマークアップを作成
         const heading = headingText ? `<${headingTag} class="insta-icon">${headingText}</${headingTag}>`: '';

        if (!next || (maxMediaCount && maxMediaCount <= mediaLoaded)) {
          // 取得した画像データと見出しなどを出力
          target.innerHTML = `<div class="insta-wrapper">
      ${heading}
      <div class="insta-container">${instaFeeds}</div>
    </div>`;
        } else {
          // 次のデータのエンドポイントが存在すれば、投稿を読み込むボタンを出力
          target.innerHTML = `<div class="insta-wrapper">
      ${heading}
      <div class="insta-container">${instaFeeds}</div>
      <button id="load-more-insta-feeds">Load More</button>
    </div>`;
          const loadMoreInstaFeeds = target.querySelector( "#load-more-insta-feeds");
          // 投稿を読み込むボタンをクリックしたら次のデータのエンドポイントからデータを取得
          if (loadMoreInstaFeeds) {
            loadMoreInstaFeeds.addEventListener("click", () => {
              // loadMoreFeeds() を呼び出す際に表示件数と最大表示数も引数に渡す
              loadMoreFeeds(next, limit, maxMediaCount);
            });
          }
        }
      }).catch((error) => {
        console.warn(error.message);
        // エラーをページに表示する場合
        // target.innerHTML = `<p>エラー：${error.message} </p>`
      });
  }

  // 引数に fetch() で取得したレスポンスの data を受取、インスタ一覧の HTML を生成する関数
  function createInstaFeeds(data) {
    // 出力する値を入れる変数
    let instaFeeds = ""; // フィード部分の HTML
    let src = ""; // img の src
    let video = ""; // メディアタイプがビデオの場合に出力する要素
    // レスポンスのデータ（media.data）は配列なので forEach でループ処理
    data.forEach((item) => {
      // メディアタイプがビデオの場合
      if (item.media_type === "VIDEO") {
        src = item.thumbnail_url;
        // ビデオの場合は以下の span 要素でアイコンを表示
        video = '<span class="video-icon"></span>';
      }
      // メディアタイプが画像の場合
      else {
        src = item.media_url;
        video = "";
      }
      // フィード部分の HTML を作成
      const instaMediaDiv = `<div class="insta-media">
    <a href="${item.permalink}" target="_blank" rel="noopener">
      <img src="${src}" alt="${item.caption ? item.caption : ""}">
      ${video ? video : ""}
      <span class="like-count">${item.like_count}</span>
      <span class="comments-count">${item.comments_count}</span>
    </a>
  </div>
  `;
      instaFeeds += instaMediaDiv;
    });
    return instaFeeds;
  }

  // 次のデータのエンドポイント（url）を引数に受取、HTML を更新する関数
  function loadMoreFeeds(url, limit, maxMediaCount) {
    fetch(url)
      .then((response) => {
        // ステータスが ok であればレスポンスを JSON として解析
        if (response.ok) {
          return response.json();
        } else {
          // ステータスが ok でなければエラーにする
          throw new Error(
            `リクエスト失敗:${response.status} ${response.statusText}`
          );
        }
      })
      .then((instaResponse) => {
        const instaFeeds = createInstaFeeds(instaResponse.data);
        // 次のデータのエンドポイントを取得（instaResponse.media.paging.next ではなく instaResponse.paging.next になる）
        next = instaResponse.paging.next;
        // 投稿のコンテナを取得
        const instaContainer = target.querySelector(".insta-container");
        if (instaContainer) {
          // 投稿のコンテナに追加の投稿の HTML を挿入
          instaContainer.insertAdjacentHTML("beforeend", instaFeeds);
          // 読み込み数をカウント
          mediaLoaded += limit;
          // next が存在しないか、表示数が最大表示数より大きければ
          if (!next ||  maxMediaCount && maxMediaCount <= mediaLoaded) {
            // 次のデータのエンドポイント（next）が存在しなければボタンを削除
            target.querySelector("#load-more-insta-feeds").remove();
          }
        }
      });
  }
});

export const accessToken = 'EAAMSs5U6BZAUBO7Vub3OU5c.......';
export const businessID = "12345678901234567";

function add_my_insta_scripts() {
  // フロントページであれば JavaScript を読み込む
  if(is_front_page()) {
    wp_enqueue_script(
      'instaFeeds',
      get_theme_file_uri( '/insta/insta-feeds.js' ),
      array(),
      filemtime( get_theme_file_path( '/insta/insta-feeds.js' ) ),
      true
    );
  }

}
add_action( 'wp_enqueue_scripts', 'add_my_insta_scripts' );

// import を使って外部ファイルに記述された ID とトークンを読み込む場合は type="module" を追加
function add_type_module_to_js($tag, $handle, $src) {
  if('instaFeeds' !== $handle) {
    return $tag;
  }
  return '<script type="module" src="' . esc_url($src) . '"></script>';
}
add_filter('script_loader_tag', 'add_type_module_to_js', 10, 3);

// wp_script_attributes で type="module" を追加
function add_type_attribute( $attributes ) {
  if ( isset( $attributes['id'] ) && $attributes['id'] === 'instaFeeds-js' ) {
    $attributes['type'] = 'module';
  }
  return $attributes;
}
add_filter( 'wp_script_attributes', 'add_type_attribute', 10, 1 );

function add_my_insta_scripts() {
  // フロントページまたは投稿個別ページであれば JavaScript を読み込む
  if(is_front_page() || is_single()) {
    wp_enqueue_script(
      'instaFeeds',
      get_theme_file_uri( '/insta/insta-feeds.js' ),
      array(),
      filemtime( get_theme_file_path( '/insta/insta-feeds.js' ) ),
      true
    );
  }

}
add_action( 'wp_enqueue_scripts', 'add_my_insta_scripts' );

// import を使って外部ファイルに記述された ID とトークンを読み込む場合は type="module" を追加
function add_type_module_to_js($tag, $handle, $src) {
  if('instaFeeds' !== $handle) {
    return $tag;
  }
  return '<script type="module" src="' . esc_url($src) . '"></script>';
}
add_filter('script_loader_tag', 'add_type_module_to_js', 10, 3);

<div class="insta-div"></div>

// 出力先の要素を取得
//const target = document.getElementById("insta-div");
// 上記を以下に変更
const target = document.getElementsByClassName("insta-div")[0];

 .catch((error) => {
  console.warn(error.message);
  // エラーをページに表示する場合
  // target.innerHTML = `<p>エラー：${error.message} </p>`
});

.catch((error) => {
  console.warn(error.message);
  // ログインしている場合はエラーをページに表示
  if ( document.body.classList.contains( 'logged-in' ) ) {
    target.innerHTML = `<div class="insta-error" style="background-color:pink; padding:20px; margin:50px 0;">
    <h2>エラー</h2>
    <p>${error.message} </p>
  </div>`;
  }
});

import { accessToken, businessID } from "./insta-val.js";

document.addEventListener("DOMContentLoaded", () => {
  let next;
  let mediaLoaded = 0;
  const target = document.getElementById("insta-div");

  if (target) {
    const api = "https://graph.facebook.com/";
    const version = "v20.0";
    const limit = target.dataset.thumbsLimit ? parseInt(target.dataset.thumbsLimit) : 4;
    const field = "caption,media_url,thumbnail_url,permalink,like_count,comments_count,media_type";
    const fields = limit ? `media.limit(${limit}){${field}}` : `media{${field}}`;
    const params = {
      fields,
      access_token: accessToken,
    };
    const query = new URLSearchParams(params);
    const url = `${api}/${version}/${businessID}?${query}`;

    fetch(url)
      .then((response) => {
        if (response.ok) {
          return response.json();
        } else {
          throw new Error(
            `Insta Fetch リクエスト失敗:${response.status} ${response.statusText}`
          );
        }
      })
      .then((instaResponse) => {
        next = instaResponse.media.paging.next;
        const instaFeeds = createInstaFeeds(instaResponse.media.data);
        const maxMediaCount = target.dataset.maxMediaCount ? parseInt(target.dataset.maxMediaCount) : 0;
        mediaLoaded += limit;
        const headingText = target.dataset.headingText ? target.dataset.headingText : "";
        const headingTag = target.dataset.headingTag ? target.dataset.headingTag : "h2";
        const heading = headingText ? `<${headingTag} class="insta-icon">${headingText}</${headingTag}>` : "";
        if (!next || (maxMediaCount && maxMediaCount <= mediaLoaded)) {
          target.innerHTML = `<div class="insta-wrapper">
      ${heading}
      <div class="insta-container">${instaFeeds}</div>
    </div>`;
        } else {
          target.innerHTML = `<div class="insta-wrapper">
      ${heading}
      <div class="insta-container">${instaFeeds}</div>
      <button id="load-more-insta-feeds">Load More</button>
    </div>`;
          const loadMoreInstaFeeds = target.querySelector( "#load-more-insta-feeds");
          if (loadMoreInstaFeeds) {
            loadMoreInstaFeeds.addEventListener("click", () => {
              loadMoreFeeds(next, limit, maxMediaCount);
            });
          }
        }
      })
      .catch((error) => {
        console.warn(error.message);
        // 管理者としてログインしていればエラーを表示
        showErrorForAdmin(error.message);
      });
  }

  function createInstaFeeds(data) {
    let instaFeeds = "";
    let src = "";
    let video = "";
    data.forEach((item) => {
      if (item.media_type === "VIDEO") {
        src = item.thumbnail_url;
        video = '<span class="video-icon"></span>';
      }
      else {
        src = item.media_url;
        video = "";
      }
      const instaMediaDiv = `<div class="insta-media">
    <a href="${item.permalink}" target="_blank" rel="noopener">
      <img src="${src}" alt="${item.caption ? item.caption : ""}">
      ${video ? video : ""}
      <span class="like-count">${item.like_count}</span>
      <span class="comments-count">${item.comments_count}</span>
    </a>
  </div>
  `;
      instaFeeds += instaMediaDiv;
    });
    return instaFeeds;
  }

  function loadMoreFeeds(url, limit, maxMediaCount) {
    fetch(url)
      .then((response) => {
        if (response.ok) {
          return response.json();
        } else {
          throw new Error(
            `リクエスト失敗:${response.status} ${response.statusText}`
          );
        }
      })
      .then((instaResponse) => {
        const instaFeeds = createInstaFeeds(instaResponse.data);
        next = instaResponse.paging.next;
        const instaContainer = target.querySelector(".insta-container");
        if (instaContainer) {
          instaContainer.insertAdjacentHTML("beforeend", instaFeeds);
          mediaLoaded += limit;
          if (!next || (maxMediaCount && maxMediaCount <= mediaLoaded)) {
            target.querySelector("#load-more-insta-feeds").remove();
          }
        }
      });
  }

  // Ajax で管理者としてログインしているかを判定してエラーを表示する関数（引数 message には出力するエラーメッセージを受け取る）
  function showErrorForAdmin(message) {
    const data = {
      // アクション名
      action: "login_state_action",
      // nonce（ajax_params はインライン script に出力されたオブジェクト）
      _ajax_nonce: ajax_params.ajax_nonce,
    };
    const xhr = new XMLHttpRequest();
    xhr.responseType = "json";
    // リクエスト先 URL は ajax_params.ajaxurl
    xhr.open("POST", ajax_params.ajaxurl);
    xhr.addEventListener("readystatechange", () => {
      if (xhr.readyState === 4) {
        if (xhr.status >= 200 && xhr.status < 300) {
          // レスポンスの loggedin と isAdminUser が true であればエラーを表示
          if (xhr.response.loggedin && xhr.response.isAdminUser) {
            target.innerHTML = `<div class="insta-error" style="background-color:pink; padding:20px; margin:50px 0;">
            <h2>エラー</h2>
            <p>${message} </p>
          </div>`;
          }
        } else {
          console.log(`失敗: ${xhr.status} (${xhr.statusText})`);
        }
      }
    });
    xhr.send(new URLSearchParams(data));
  }
});

function add_my_insta_scripts() {
  if (is_front_page() || is_single()) {
    wp_enqueue_script(
      'instaFeeds',
      get_theme_file_uri('/insta/insta-feeds.js'),
      array(),
      filemtime(get_theme_file_path('/insta/insta-feeds.js')),
      true
    );

    // AJAX のリクエスト URL と nonce を出力
    wp_add_inline_script(
      // 上記で登録したハンドル名を指定
      'instaFeeds',
      // script タグに出力する JavaScript（変数 ajax_params に格納されたオブジェクト）
      'const ajax_params = ' . json_encode(array(
        'ajaxurl' => admin_url('admin-ajax.php'),
        'ajax_nonce' => wp_create_nonce('login-state-ajax-nonce'),
      )),
      // script タグを対象のスクリプトの前に出力するための指定
      'before'
    );
  }
}
add_action('wp_enqueue_scripts', 'add_my_insta_scripts');

// AJAX ハンドラの定義
function login_state_ajax_handler() {
  check_ajax_referer('login-state-ajax-nonce');
  // ユーザーのログイン状態を取得して返す
  $data = [
    'loggedin' => is_user_logged_in(),
    'isAdminUser' => current_user_can('manage_options'),
  ];
  wp_send_json($data);
}
$action_name = 'login_state_action';
add_action('wp_ajax_' . $action_name, 'login_state_ajax_handler');
add_action('wp_ajax_nopriv_' . $action_name, 'login_state_ajax_handler');

// insta-feeds.js をモジュールに
function add_type_attribute( $attributes ) {
  if ( isset( $attributes['id'] ) && $attributes['id'] === 'instaFeeds-js' ) {
    $attributes['type'] = 'module';
  }
  return $attributes;
}
add_filter( 'wp_script_attributes', 'add_type_attribute', 10, 1 );