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. ブログ、ウェブメディアで引用する時の書き方について

  2. アナリティクスのタグを複数設置する正しいやり方

  3. WordPressのユーザー権限毎の仕様

  4. WordPressをマルチサイト化

  5. ホームページ制作は"お客様も一緒に"作らないと集客のできるサイトはでき…

  6. wordpress カテゴリー取得方法 カテゴリー名 スラッグ 子カ…