【簡単】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と連携したり、アクセストークンを何回も取得したりと大変ですが、埋め込むのは非常に簡単です。

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

Ads

関連記事

HTMLCSS プログラミング

CSSのnth-childを使い、子要素の最初、最後、偶数奇数、何番目以降を指定する方法

更新日:2020.06.11
76
WordPress プログラミング

【簡単wordpress】すべての投稿記事内にある同じURL・文字列を一括置換する方法【Search Regexプラグイン】

2022.02.08
130
HTMLCSS JavaScript プログラミング

【簡単】モーダルウィンドウをCSS、jqueryで作る方法

2020.05.23
97
HTMLCSS プログラミング

form(フォーム)タグでエンターキー送信を無効にする方法

2021.12.21
115