WEBサイトにInstagramを簡単に表示できるjQueryをご紹介
該当ソース箇所に以下記述を追加
●●JS関係をヘッダー内に記述●●
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="js/insta.js"></script>
●●表示したい箇所に以下記述を●●
<ul id="instafeed" class="sliderm"></ul>
●●以下にインスタグラムAPIで取得した情報を入力●●
<script type="text/javascript">
var userFeed = new Instafeed({
get: 'user',
userId: ★★★★★★★★★,
accessToken: '★★★★★★★★★,■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■',
limit: 15,
sortBy: "most-recent",
resolution:'standard_resolution', // thumbnail (default) - 150x150 | low_resolution - 306x306 | standard_resolution - 612x612
template: '<li><a href="{{link}}" target="_blank"><img src="{{image}}" alt="{{caption}}" /></a></li>'
});
userFeed.run();
</script>
※注意事項
初期値だと画像サイズがとても小さいため、スマホで閲覧すると画質が悪いです。そのため resolution: 'standard_resolution',//612×612のサイズで出力 項目を追加する必要あり
https://api.instagram.com/oauth/authorize/?client_id=★★★&redirect_uri=URL&response_type=token
インスタグラムのアクセストークン取得方法（★ と ■）より取得方法 こちらを参照 https://liginc.co.jp/367167
引用元
https://qiita.com/JumpeiSato/items/f042a915ec0d5e38e49b
導入事例
