WEBサイトにInstagramを簡単に表示できるjQueryをご紹介

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

 

導入事例

https://tablestylesado.com/

 

 

 

関連記事

  1. SSL化に伴うhtaccessの記述方法について 動的(wordpre…

  2. メディア追加時の自動で挿入される「画像挿入時にwidthとheight…

  3. Advanced Custom Fieldsを活用した条件分岐 (中身…

  4. 投稿カテゴリーを一括変更できるWordPressプラグイン

  5. WordPress 半角の「"」や「'」が、全角に変換されてしまい、コ…

  6. WordPressの常時SSL化手順について、とても便利なプラグインを…