Instagram Graph API

今年にInstagramAPIが使えなくなるので、Facebookと連動した
Instagram Graph APIを使う際のメモをざっくりまとめました。

Instagram

(スマホアプリ上でしか操作できないっぽいです)
・ビジネスアカウントに切り替え
https://www.iscle.com/web-it/instagram/insta-business-account.html
・Facebookアカウントと連携

Facebook

・Facebookビジネスページ作成※
 ※ビジネスページ作成する際の住所登録の注意点、ローマ字である程度打ち込んで出てきた住所にする。直接打ち込んだ住所では登録できない。
・Facebook developerでInstagram連携用のアプリ作成
・あとは参考サイトに従ってトークンやIGビジネスIDを取得

参考サイト
https://goo-up.com/796/
https://himemo.net/archives/371
http://yachin29.hatenablog.com/entry/2018/05/07/044459
https://hyp.llc/tips/instagram-graph-api/

取得したURLを下記に入れれば、取り敢えず表示は完了です。
調整が必要な場合は、別途CSSで調整します。

<script>
$(function(){
  $.ajax({
    type: 'GET',
    url: '*****************************',
    dataType: 'json',
    success: function(json) {
      var html = '';
      var insta = json.media.data;
      var insta_cnt = insta.length;
      if(insta_cnt > 9){
        insta_cnt = 9;
      }
      for (var i = 0; i < insta_cnt; i++) {
        html += '<div ><a href="' + insta[i].permalink + '" target="_blank"><img src="' + insta[i].media_url + '"></a></div>';
      }
      $("#instafeed").append(html);			
    },
    error: function() {
    //エラー時の処理
    }
  });
});	
</script>