Web Design Leaves

<?php
//Instagram ビジネスアカウント ID
$business_id = "xxxxxx";
//アクセストークン
$token = 'xxxxxx';
//グラフAPI ホストURL（ルートエンドポイント）
$api = 'https://graph.facebook.com/';
//API のバージョン
$version = 'v20.0';
//取得するメディアの件数（0 または false を指定した場合は件数の制限なし）
$limit = '4';
//取得するフィールド
$field = 'caption,media_url,thumbnail_url,permalink,like_count,comments_count,media_type';
//クエリ（この場合、配列で記述して後で URL エンコード）
$query = [
  //取得件数の制限と取得するフィールドを指定（$countの値が0やfalseの場合は件数の制限なし）
  'fields' => $limit ? 'media.limit(' . $limit . '){' . $field . '}' : 'media{' . $field . '}',
  //アクセストークンを指定
  'access_token' => $token
];
//URL を作成（クエリは http_build_query() で URL エンコード）
$url = $api . $version . '/' . $business_id . '?' . http_build_query($query);

//cURL セッションを初期化
$ch = curl_init();
//取得する URL を指定
curl_setopt($ch, CURLOPT_URL, $url);
//GET メソッドを使用（省略可能）
curl_setopt($ch, CURLOPT_CUSTOMREQUEST, 'GET');
//戻り値を文字列で返す（データを結果として取得）
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
//結果を変数に代入（失敗すれば false、成功すれば取得結果が格納される）
$result = curl_exec($ch);
//cURL セッションを終了
curl_close($ch);

//レスポンスを格納する変数の初期化
$insta_response = null;
//エラーを表示するかどうか
$show_error = false;

if ($result) {
  //取得結果（JSON）をデコードしてレスポンスを格納する変数に代入
  $insta_response = json_decode($result);
  if (isset($insta_response->error)) {
    //$show_error が true  であれば
    if ($show_error) {
      //エラーコードとメッセージを表示
      echo '<p>エラーが発生しました</p> ';
      $error = $insta_response->error;
      echo '<p>Error Code :' . $error->code . ' </p> <code>' . $error->message . '</code>';
    }
    //レスポンスを格納する変数 $insta_response を false に
    $insta_response = false;
  } elseif (!isset($insta_response->media)) {
    // 投稿（メディア）が存在しない場合
    $insta_response = false;
  }
}

if ($insta_response) :  //取得結果にエラーがなく投稿が存在すれば一覧を出力
?>
  <div class="insta-wrapper">
    <h2><span class="insta-icon"></span>Instagram 一覧表示テスト</h2>
    <div class="insta-container">
      <?php
      //レスポンスのデータは配列なので foreach でループ処理
      foreach ($insta_response->media->data as $val) {
        //メディアタイプがビデオの場合
        if ($val->media_type === 'VIDEO') {
          $src = $val->thumbnail_url;
          //ビデオの場合は以下の HTML でアイコンを表示
          $video = '<span class="video-icon"></span>';
        }
        //メディアタイプが画像の場合
        else {
          $src = $val->media_url;
          $video = '';
        }
      ?>
        <div class="insta-media">
          <a href="<?php echo $val->permalink; ?>" target="_blank" rel="noopener">
            <img src="<?php echo $src; ?>" alt="<?php echo isset($val->caption) ? $val->caption : ''; ?>">
            <?php echo $video ? $video : ''; //ビデオの場合は追加の span 要素を出力 ?>
            <span class="like-count"><?php echo $val->like_count; ?></span>
            <span class="comments-count"><?php echo $val->comments_count; ?></span>
          </a>
        </div>
      <?php } ?>
    </div>
  </div>
<?php endif; ?>

<div class="insta-wrapper">
  <h2><span class="insta-icon"></span>Instagram 一覧表示テスト</h2>
  <div class="insta-container">
    <div class="insta-media">
      <a href="https://www.instagram.com/reel/C93YYr.../" target="_blank" rel="noopener">
        <img src="https://scontent-nrt1-2.cdninstagram.com/v/t51.29350-15/45..." alt="">
        <span class="video-icon"></span>
        <span class="like-count">0</span>
        <span class="comments-count">0</span>
      </a>
    </div>
    <div class="insta-media">
      <a href="https://www.instagram.com/p/C93War.../" target="_blank" rel="noopener">
        <img src="https://scontent-nrt1-2.cdninstagram.com/v/t51.29350-15/45,,," alt="">
        <span class="like-count">0</span>
        <span class="comments-count">0</span>
      </a>
    </div>
    <div class="insta-media">
      <a href="https://www.instagram.com/p/C9tsYZ.../" target="_blank" rel="noopener">
        <img src="https://scontent-nrt1-2.cdninstagram.com/v/t51.29350-15/45..." alt="">
        <span class="like-count">0</span>
        <span class="comments-count">0</span>
      </a>
    </div>
    <div class="insta-media">
      <a href="https://www.instagram.com/p/CW9Na.../" target="_blank" rel="noopener">
        <img src="https://scontent-nrt1-2.cdninstagram.com/v/t51.29350-15/26..." alt="Test">
        <span class="like-count">0</span>
        <span class="comments-count">0</span>
      </a>
    </div>
  </div>
</div>

.insta-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  grid-auto-rows: minmax(100px, auto);
  gap: 10px;
}

.insta-media {
  position: relative;
}

.insta-media img {
  max-width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
  display: block;
  width: 100%;
  height: auto;
}

.like-count,
.comments-count {
  position: absolute;
  bottom: 10px;
  color: #fff;
  filter: drop-shadow(1px 1px 1px #333);
}

.like-count {
  right: 25%;
}

.comments-count {
  right: 5%;
}

.like-count::before {
  content: "";
  display: inline-block;
  height: 18px;
  width: 18px;
  vertical-align: -3px;
  margin-right: 5px;
  background-repeat: no-repeat;
  /*アイコンのSVG画像*/
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23ffffff' viewBox='0 0 16 16'%3E  %3Cpath d='M8.864.046C7.908-.193 7.02.53 6.956 1.466c-.072 1.051-.23 2.016-.428 2.59-.125.36-.479 1.013-1.04 1.639-.557.623-1.282 1.178-2.131 1.41C2.685 7.288 2 7.87 2 8.72v4.001c0 .845.682 1.464 1.448 1.545 1.07.114 1.564.415 2.068.723l.048.03c.272.165.578.348.97.484.397.136.861.217 1.466.217h3.5c.937 0 1.599-.477 1.934-1.064a1.86 1.86 0 0 0 .254-.912c0-.152-.023-.312-.077-.464.201-.263.38-.578.488-.901.11-.33.172-.762.004-1.149.069-.13.12-.269.159-.403.077-.27.113-.568.113-.857 0-.288-.036-.585-.113-.856a2.144 2.144 0 0 0-.138-.362 1.9 1.9 0 0 0 .234-1.734c-.206-.592-.682-1.1-1.2-1.272-.847-.282-1.803-.276-2.516-.211a9.84 9.84 0 0 0-.443.05 9.365 9.365 0 0 0-.062-4.509A1.38 1.38 0 0 0 9.125.111L8.864.046zM11.5 14.721H8c-.51 0-.863-.069-1.14-.164-.281-.097-.506-.228-.776-.393l-.04-.024c-.555-.339-1.198-.731-2.49-.868-.333-.036-.554-.29-.554-.55V8.72c0-.254.226-.543.62-.65 1.095-.3 1.977-.996 2.614-1.708.635-.71 1.064-1.475 1.238-1.978.243-.7.407-1.768.482-2.85.025-.362.36-.594.667-.518l.262.066c.16.04.258.143.288.255a8.34 8.34 0 0 1-.145 4.725.5.5 0 0 0 .595.644l.003-.001.014-.003.058-.014a8.908 8.908 0 0 1 1.036-.157c.663-.06 1.457-.054 2.11.164.175.058.45.3.57.65.107.308.087.67-.266 1.022l-.353.353.353.354c.043.043.105.141.154.315.048.167.075.37.075.581 0 .212-.027.414-.075.582-.05.174-.111.272-.154.315l-.353.353.353.354c.047.047.109.177.005.488a2.224 2.224 0 0 1-.505.805l-.353.353.353.354c.006.005.041.05.041.17a.866.866 0 0 1-.121.416c-.165.288-.503.56-1.066.56z'/%3E%3C/svg%3E");
}

.comments-count::before {
  content: "";
  display: inline-block;
  height: 18px;
  width: 18px;
  vertical-align: -3px;
  margin-right: 5px;
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23ffffff' viewBox='0 0 16 16'%3E  %3Cpath d='M2.678 11.894a1 1 0 0 1 .287.801 10.97 10.97 0 0 1-.398 2c1.395-.323 2.247-.697 2.634-.893a1 1 0 0 1 .71-.074A8.06 8.06 0 0 0 8 14c3.996 0 7-2.807 7-6 0-3.192-3.004-6-7-6S1 4.808 1 8c0 1.468.617 2.83 1.678 3.894zm-.493 3.905a21.682 21.682 0 0 1-.713.129c-.2.032-.352-.176-.273-.362a9.68 9.68 0 0 0 .244-.637l.003-.01c.248-.72.45-1.548.524-2.319C.743 11.37 0 9.76 0 8c0-3.866 3.582-7 8-7s8 3.134 8 7-3.582 7-8 7a9.06 9.06 0 0 1-2.347-.306c-.52.263-1.639.742-3.468 1.105z'/%3E%3C/svg%3E");
}

.video-icon {
  position: absolute;
  top: 3px;
  right: 5px;
  filter: drop-shadow(1px 1px 1px #333);
}

.video-icon::before {
  content: "";
  display: inline-block;
  height: 18px;
  width: 18px;
  vertical-align: -3px;
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23ffffff' viewBox='0 0 16 16'%3E  %3Cpath fill-rule='evenodd' d='M0 5a2 2 0 0 1 2-2h7.5a2 2 0 0 1 1.983 1.738l3.11-1.382A1 1 0 0 1 16 4.269v7.462a1 1 0 0 1-1.406.913l-3.111-1.382A2 2 0 0 1 9.5 13H2a2 2 0 0 1-2-2V5zm11.5 5.175 3.5 1.556V4.269l-3.5 1.556v4.35zM2 4a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h7.5a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1H2z'/%3E%3C/svg%3E");
}

.insta-icon::before {
  content: "";
  display: inline-block;
  height: 30px;
  width: 30px;
  vertical-align: -6px;
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23a41867' viewBox='0 0 448 512'%3E%3Cpath d='M194.4 211.7a53.3 53.3 0 1 0 59.3 88.7 53.3 53.3 0 1 0 -59.3-88.7zm142.3-68.4c-5.2-5.2-11.5-9.3-18.4-12c-18.1-7.1-57.6-6.8-83.1-6.5c-4.1 0-7.9 .1-11.2 .1c-3.3 0-7.2 0-11.4-.1c-25.5-.3-64.8-.7-82.9 6.5c-6.9 2.7-13.1 6.8-18.4 12s-9.3 11.5-12 18.4c-7.1 18.1-6.7 57.7-6.5 83.2c0 4.1 .1 7.9 .1 11.1s0 7-.1 11.1c-.2 25.5-.6 65.1 6.5 83.2c2.7 6.9 6.8 13.1 12 18.4s11.5 9.3 18.4 12c18.1 7.1 57.6 6.8 83.1 6.5c4.1 0 7.9-.1 11.2-.1c3.3 0 7.2 0 11.4 .1c25.5 .3 64.8 .7 82.9-6.5c6.9-2.7 13.1-6.8 18.4-12s9.3-11.5 12-18.4c7.2-18 6.8-57.4 6.5-83c0-4.2-.1-8.1-.1-11.4s0-7.1 .1-11.4c.3-25.5 .7-64.9-6.5-83l0 0c-2.7-6.9-6.8-13.1-12-18.4zm-67.1 44.5A82 82 0 1 1 178.4 324.2a82 82 0 1 1 91.1-136.4zm29.2-1.3c-3.1-2.1-5.6-5.1-7.1-8.6s-1.8-7.3-1.1-11.1s2.6-7.1 5.2-9.8s6.1-4.5 9.8-5.2s7.6-.4 11.1 1.1s6.5 3.9 8.6 7s3.2 6.8 3.2 10.6c0 2.5-.5 5-1.4 7.3s-2.4 4.4-4.1 6.2s-3.9 3.2-6.2 4.2s-4.8 1.5-7.3 1.5l0 0c-3.8 0-7.5-1.1-10.6-3.2zM448 96c0-35.3-28.7-64-64-64H64C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H384c35.3 0 64-28.7 64-64V96zM357 389c-18.7 18.7-41.4 24.6-67 25.9c-26.4 1.5-105.6 1.5-132 0c-25.6-1.3-48.3-7.2-67-25.9s-24.6-41.4-25.8-67c-1.5-26.4-1.5-105.6 0-132c1.3-25.6 7.1-48.3 25.8-67s41.5-24.6 67-25.8c26.4-1.5 105.6-1.5 132 0c25.6 1.3 48.3 7.1 67 25.8s24.6 41.4 25.8 67c1.5 26.3 1.5 105.4 0 131.9c-1.3 25.6-7.1 48.3-25.8 67z'/%3E%3C/svg%3E");
  margin-right: 5px;
}

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

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

// 出力先の要素を取得
const target = document.getElementById('insta-div');
//import {accessToken, businessID} from './modules/insta-val.js';
if (target) {
  // Instagram ビジネスアカウント ID
  const businessID = "xxxxxx";
  // アクセストークン
  const accessToken = 'xxxxxx';
  //グラフAPI ホストURL（ルートエンドポイント）
  const api = 'https://graph.facebook.com/';
  //API のバージョン
  const version = 'v20.0';
  //表示件数
  const limit = 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,
    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(`リクエスト失敗:${response.status} ${response.statusText}`);
      }
    }).then((instaResponse) => {
      // 引数で受け取った json オブジェクトの media.data
      const data = instaResponse.media.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;
      });
      // 取得した画像データと見出しなどを出力
      target.innerHTML = `<div class="insta-wrapper">
<h2><span class="insta-icon"></span>インスタ一覧表示テスト JS</h2>
<div class="insta-container">${instaFeeds}</div>`;
    });
}