Instagram Graph API

20200221追記
BSとECで設置方法が異なります。
この記事で、提供された情報が使える情報かを確認した後は各手順に従ってください。
BS：Instagram Graph API
EC：続、Instagram Graph API
===========================================

これなに

2020年廃止予定のInstagram API（アクセストークン）に変わり用意された
Instagram投稿を取得可能なAPI。
Facebook連携やビジネスアカウント化が必要などハードルが上がっている。

参考

下記参考サイトの通りにやれば必要情報の取得はできる。
https://arrown-blog.com/instagram-business-account/
https://arrown-blog.com/instagram-graph-api/

取得後、使える情報かを確認する

下記情報を立てはめてブラウザでアクセスする

https://graph.facebook.com/【InstagramビジネスアカウントID】?fields=name,media.limit(20){caption,like_count,media_url,permalink,timestamp,username}&access_token=【3つ目の無期限アクセストークン】

取得したJSONの中にInstagramの投稿画像のURLが入っていれば成功。

展開方法

Instafeed.jsが使えないため、自前で取得する必要がある。
jQuery simplyScrollは使えるので活かしで。
下記のようなJavaScriptになる。

$(function(){
  var targetElm = '#instafeed'; // selector
  var options = {
    id: '【InstagramビジネスアカウントID】',
    limit: 20,
    access_token: '【3つ目の無期限アクセストークン】'
  };
  $.ajax({
    url: 'https://graph.facebook.com/'+options.id,
    data: {
      fields: 'name,media.limit('+options.limit+'){caption,like_count,comments_count,media_url,permalink,timestamp,username}',
      access_token: options.access_token
    }
  }).done(function(json){
    var lists = json.media.data.map(function(data){
      return '<li><a href="'+data.permalink+'" target="_blank"><img src="'+data.media_url+'" alt="'+data.caption.replace(/\n/gm, '')+'"><div class="insta_options"><span class="insta_likes">'+data.like_count+'</span><span class="insta_comments">'+data.comments_count+'</span></div></a></li>';
    }).join('');
    $(targetElm).append(lists).simplyScroll({
      speed: 2,
    });
  })
})