はじめに
思った以上に簡単にinstagramが実装できたので。
記しておこうと思います。
実装
こちらでソースを取得し「jquery.instagramFeed.min.js」をファイル内に配置します。（今回はjsのファイル内に設置しています。）↓
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
</head>
<body>
<div id="instagram-feed1"></div>
<script src="./js/jquery.instagramFeed.min.js"></script>
<script>
(function($){
$(window).on('load', function(){
$.instagramFeed({
'username': 'instagram', usernameを記入
'container': "#instagram-feed1", idを取得:上に表示されます
'display_profile': true,
'display_biography': true,
'display_gallery': true,
'display_captions': true,
'max_tries': 8,
'callback': null,
'styling': true,
'items': 8,
'items_per_row': 4,
'margin': 1,
'lazy_load': true,
'on_error': console.error
});
});
})(jQuery);
</script>
</body>
</html>
これでusernameのところに書いたinstagramが表示されます！！
あとはcssでお好みで他の装飾を・・・
終わりに
かなり簡単に実装ができました！！
便利ですね。
参考
細かい設定はこちらから見ることができます。↓
Railsで実装。こちらは後ほど確認。