webページにインスタ埋め込みの表示側(Instagram Graph API)

導入の基本は「えるぺぐ」さん参照

動画が表示されないので、吐き出しのJavaScriptを下記に修正。

$.getJSON("setting/instagram.php")
  .done(function(instagram_data) {
    const gallery_data = instagram_data["business_discovery"]["media"]["data"];
    let mediaItems = "";
    const mediaItemsLimit = 10; // 画像および動画の表示数の制限

    for (let i = 0; i < mediaItemsLimit; i++) {
      const mediaType = gallery_data[i].media_type;
      const caption = gallery_data[i].caption ? gallery_data[i].caption : '記事はありません。';

      if (mediaType === "IMAGE") {
        // 画像を表示
        mediaItems += '<li><img src="' + gallery_data[i].media_url + '">' + caption + '</li>';
      } else if (mediaType === "VIDEO") {
        // 動画を表示
        mediaItems += '<li><video controls style="width:190px;"><source src="' + gallery_data[i].media_url + '" type="video/mp4">Your browser does not support the video tag.</video>' + caption + '</li>';
      }
    }
    $("#gallery").append(mediaItems);
  })
  .fail(function(jqxhr, textStatus, error) {
    console.log("Request failed: " + textStatus + ", " + error);
  });

修正内容)

  • 動画も表示

  • 10個表示

  • テキストがなければ「記事はありません」と表示。

よろしければスキを m(_ _)m

この記事が気に入ったらサポートをしてみませんか?