インスタグラムの画像自動取得　Instafeed.js について

実現したいこと

Instafeed.jsを使って、自分のアカウントの画像を最新6件表示させたい。

発生している問題

表示件数が、指定通りにならない。1〜2件、少なく表示されてしまう。

html
1<script>
2$(function() {
3   var userFeed = new Instafeed({
4        get: 'user',
5        userId: 423XXXXXXXX,
6        accessToken: '423XXXXXXXX.XXXXXXXX.XXXXXXXX.XXXXXXXX.',
7        limit: 6, //表示させる枚数
8        sortBy:'most-recent', //Newest to oldest.
9        resolution: 'low_resolution', //表示させるサムネイル画像の大きさ指定
10        template: '<li><a href="{{link}}" target="_blank"><img src="{{image}}" /></a><div>{{caption}}</div></li>',//表示させる形式
11        filter: function(image) {
12    return image.tags.indexOf('テスト') >= 0;
13  }
14    });
15    userFeed.run();
16});
17</script>

html
1    <div class="insta">
2        <ul id="instafeed"></ul>
3    </div>

css
1.insta ul#instafeed{
2    width:870px;
3    margin:50px auto;
4}
5.insta ul#instafeed{
6    text-align: left;
7    font-size:0;
8}
9.insta ul#instafeed li{
10    display: inline-block;
11    width:280px;
12    margin:0 15px 20px 0;
13    vertical-align: top;
14    font-size:14px;
15    line-height: 1.4;
16}
17.insta ul#instafeed li:nth-child(3n){
18    margin-right: 0;
19}
20.insta ul#instafeed li img{
21    width:280px;
22    margin:0 0 6px;
23}

この指定だと4件しか表示されません。
instafeed.min.jsはダウンロードしたまま、一切変更していません。

limit: 1,･･･1件表示
limit: 2,･･･1件表示
limit: 3,･･･2件表示
limit: 4,･･･2件表示
limit: 5,･･･3件表示
limit: 5,以降は2件少なく表示されます。
現在、「limit: 8,」の指定で一応6件表示させています。

何が原因なのか解らず困っています。
どなたかご教授いただけないでしょうか。
何卒よろしくお願いいたします。

行動規範の内容に同意します

回答1件

ベストアンサー

思い切って自作するのはいかがでしょうか。
※ jQueryは使用前提。
※ HTMLとCSSは提示頂いたもので問題ないです。

javascript
1$(function(){
2  var accessToken = '423XXXXXXXX.XXXXXXXX.XXXXXXXX.XXXXXXXX'; //取得したアクセストークンを貼り付ける
3  $.getJSON('https://api.instagram.com/v1/users/self/media/recent/?access_token='+accessToken+'&callback=?',function (insta) {
4    $.each(insta.data,function (photos,src) {
5      if ( photos === 6 ) { return false; } //上限設定
6      $('<li><a href="'+src.link+'" target="_blank"><img src="'+src.images.standard_resolution.url+'"></a><div>'+src.caption.text+'</div></li>').appendTo('#instafeed');
7    });
8  });
9});

参考記事
［JQuery］たった9行でInstagram（インスタグラム）の写真一覧をWebサイトに表示する。
※ 私の記事で恐縮ですが（汗）

投稿2016/12/09 02:19

takumaro_web

総合スコア301

korokorota

2016/12/09 05:50 編集

回答いただきありがとうございます。自作は自分には難し過ぎると考えていたのですが、自作用のコードも載せていただき本当にありがとうございます。サイトも拝見させていただきました。わずか数行で作成できるんですね。早速試してみたところ、何故か1つしか表示されませんでした。変更したのは、アクセストークンだけです。元々それ以外の記述ヶ所に問題があって影響しているのでしょうか。厚かましいお願いで恐縮ですが、できれば一度見ていただけないでしょうか。 jquery初心者ですみません。

takumaro_web

2016/12/09 04:29 編集

原因がわかりました。インスタグラムのコメント（写真の説明）を必ず表示するように設定されているようですが、インスタグラム側にコメント（写真の説明）が設定されていない写真があるようです。（＝キャプションを探しにいってnullが返ってきてしまうためエラーが起きておりました。）解決方法1 インスタグラム側でコメントをすべて入れる。解決方法2 コメントのオプションを止める。 $(function(){ var accessToken = '423XXXXXXXX.XXXXXXXX.XXXXXXXX.XXXXXXXX'; //取得したアクセストークンを貼り付ける $.getJSON('https://api.instagram.com/v1/users/self/media/recent/?access_token='+accessToken+'&callback=?',function (insta) { $.each(insta.data,function (photos,src) { if ( photos === 6 ) { return false; } //上限設定 $('<li><a href="'+src.link+'" target="_blank"><img src="'+src.images.standard_resolution.url+'"></a></li>').appendTo('#instafeed'); }); }); });

takumaro_web

2016/12/09 04:33

また、Instafeed.jsは正しい挙動かと思います。コメントが無い画像は表示しないだけで、カウントされてしまっているようです。

korokorota

2016/12/09 05:30

早々に見ていただき、ありがとうございます！そういう事だったんですね。非常によく解りました。本当にありがとうございます。制作側から投稿日を表示させたいと要望があったのですが、稿日を表示させる事ができなかったので、コメントに投稿日を書いてもらいそれを表示させようという事になり、コメントを入れるようにしました。なので、解決策1で対応しようと思います。丁寧に見ていただき、解説いただきまして本当にありがとうございました！！

takumaro_web

2016/12/09 05:42

解決されたようでなによりです。また、テストURLは編集から削除しておいたほうが良いかもしれません。

korokorota

2016/12/11 15:50 編集

大変申し訳ございません。もう一つだけ質問させていただいてもよろしいでしょうか。インスタグラムで全てにコメントを追加いたしました。 takumaro_web様の自作のjavascriptでサイトに「#テスト」が付いたものだけを限定で表示させることは可能でしょうか。何度も本当にすみません。

takumaro_web

2016/12/12 00:21

jsを以下のようなロジックに変更すれば可能かと思います。 ①写真を取得する。 ②コメントを取得する。 ③「#テスト」という文字列を探す。 ④ ③がtrueのときのみ、DOMを生成する。挑戦してみてくださいー！

korokorota

2016/12/12 04:29

何度もすみません。ありがとうございます。挑戦してみます！