【簡単】jQueryを使って、Instagramをサイトに埋め込む方法

本記事ではjQueryを使って、Instagramをサイトに埋め込む方法を紹介します。

※事前にInstagramビジネスIDとアクセストークンが必要になります。

以下サイト様の方で取得方法がわかります。

https://www.teijitaisya.com/instagram-graph-api/

またjQueryを使う為のライブラリも埋め込むサイトに用意してください。

実装コード

  $(function() {
    $.ajax({
      type: "GET",
      url: 'https://graph.facebook.com/v10.0/ビジネスID?fields=name,media.limit(4){caption,media_url,thumbnail_url,permalink,like_count,comments_count,media_type}&access_token=アクセストークン',
      dataType: "json",
    }).done(function(json) {
      let ig = json.media.data;
      let html = "";
      for (let i = 0; i < ig.length; i++) {
        let link = ig[i].permalink;
        let image;
        if (!ig[i].thumbnail_url) {
          image = ig[i].media_url; // video
        } else {
          image = ig[i].thumbnail_url; // image
        }
        html +=
          '<a target="_blank" href="' + link + '"><div style="background-image: url(' + image + ');"></div></a>';
      }
      $(".instagram").append(html);
    });
  });

実装サンプルコードです。

コードの詳細は以下の通りです。

Instagramを埋め込むにはajax関数を用います。

上記コード内、ajax関数のオプションurl内にビジネスID、アクセストークンと書かれてる場所があるので、そちらに事前準備した InstagramビジネスIDとアクセストークン を入れます。

また同じオプションurl内、limitと書かれてる箇所のカッコ内に表示するInstagramの画像数を入れます。

上記コード内に定義されてる変数link、変数imageを使う事でInstagramへのリンク・画像を読み込む事ができます。

html関数を使って、定義した変数をhtmlで枠組みをし、append関数で埋め込みたいブロック要素に追加します。

以上で埋め込み完了です。

まとめ

事前準備がfacebookと連携したり、アクセストークンを何回も取得したりと大変ですが、埋め込むのは非常に簡単です。

以上で解説を終わります。

【簡単】jQueryを使って、Instagramをサイトに埋め込む方法

実装コード

まとめ

関連記事