Instagram Graph APIで動画投稿のサムネイルを取得する

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

その１はこちら

Instagramの投稿内容が画像だけでなく、動画も含まれてた場合ですが、
その１でご紹介した対応だとサムネイルが表示されない現象が発生します。

解決方法としては、サムネイルに使用する画像のリンクを使い分けるという感じとなります。

写真の場合は「data.media_url」のリンクを使用して、
動画の場合は「data.thumbnail_url」のリンクを使用する。

で、写真の場合は「data.thumbnail_url」が定義されないため、
「data.thumbnail_url」が有効か否かで使い分ければOKという話です。

JavaScript

$.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;
           if(!ig[i].thumbnail_url) {
               // 動画の場合はこちら
               image = ig[i].media_url;
           } else {
               // 写真の場合はこちら
               image = ig[i].thumbnail_url;
           }
          html += '<div><a href="' + link + '" target="_blank"><img src="' + image + '"></a></div>'
      }
      $(".instagram").append(html);
  }
});

対応するにあたり自分としてハマったポイントとしては、「thumbnail_url」が取得できない...
原因としては、「fields」で「thumbnail_url」が指定されてなかったというオチ...ご注意を！