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
この記事が気に入ったらサポートをしてみませんか?