Instagram Graph APIを利用する

サイトにInstagramのサムネイルを表示するTipsのご紹介

というのも6/29に急にHP上のInstagramのサムネイルが表示されなくなり急遽対応したという話...
昨年末から切替期間があったけど対応できてなかった...汗

前提として...

Instagram Graph APIを使うにあたり、
「InstagramビジネスアカウントID」と「アクセストークン(第三トークン)」を取得する必要があります。
いろいろ記事があるのでググってみると良いかなと

自分はこちらを参考にさせていただきました...ありがとうございます！
https://www.bravo-web.com/news/instagram-graph-api

実装について

もともと「instafeed.js」を使用してたのですが、2020/7時点でInstagram Graph APIに対応してない様子だったため、既存部分をこちらの内容で変更しました。

JavaScript

【InstagramビジネスアカウントID】、【アクセストークン】の部分はご自身のものに差し替えてください。
また、【表示したい画像数】も任意の数値へ変更してください

$.ajax({
   type: 'GET',
   url: 'https://graph.facebook.com/v5.0/【InstagramビジネスアカウントID】?fields=name%2Cmedia.limit(【表示したい画像数】)%7Bcaption%2Clike_count%2Cmedia_url%2Cpermalink%2Cthumbnail_url%7D&access_token=【アクセストークン】',
   dataType: 'json',
   success: function(json) {		    	
       var ig = json.media.data;
       var html = "";
       for (var i = 0; i < ig.length; i++) {
           var link = ig[i].permalink;
           var image = ig[i].media_url;
           html += '<div><a href="' + link + '" target="_blank"><img src="' + image + '"></a></div>'
       }
       $(".instagram").append(html);
   }
});

HTML

<div class="instagram"></div>

まとめ

【InstagramビジネスアカウントID】、【アクセストークン】が取得できれば意外とあっさりできちゃいました。
ただし、このままのコードの場合、動画が含まれた場合にサムネイルが表示されないという現象が発生します...
こちらの解決方法については次の投稿でお伝えします！