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) – 150×150 | low_resolution – 306×306 | standard_resolution – 612×612
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. 検索エンジン(robot)に特定のディレクトリだけインデックスさせない…

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

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

  4. sidebar.php ウィジェットを使用しないでオリジナルで制作 カ…

  5. カテゴリー名、スラッグの取得方法

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