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