前提・実現したいこと
現在、JSでインスタグラフAPIを実装しています。
自分が書いたコメントを取得したいと思い、下記の方法①~④を試したのですが、
いかんせんJSが詳しくなく、いずれの方法もつまづいています。
JSに詳しいとかの問題でなく、入力するアクセストークンが間違っている…?のかもしれません…。
環境
・Windows
・VScode
・ローカル環境で実験中
↓これは、きちんと表示されています。
なにもいじってない状態のコード
HTML
1<div class="instacontainer"> 2 <ul id="instafeed" class="row"></ul> 3</div>
JS
1$(function(){ 2 $.ajax({ 3 type: 'GET', 4 url: 'https://graph.facebook.com/v3.0/自分のID→17841445667xxxxxx?(基本的には、ここに書かれているものを、下記のコードでも試しています)fields=name%2Cmedia.limit(8)%7Bcaption%2Clike_count%2Cmedia_url%2Cpermalink%2Ctimestamp%2Cusername%7D&access_token=自分のアクセストークン(基本的には、ここに書かれているものを、下記のコードでも試しています)', 5 dataType: 'json', 6 success: function(json) { 7 var html = ''; 8 var insta = json.media.data; 9 for (var i = 0; i < insta.length; i++) { 10 html += '<div ><a href="' + insta[i].permalink + '" target="_blank"><img src="' + insta[i].medi![イメージ説明](26ddcc2f0bbf364017a083c349eabda7.jpeg)+ '"></a></div>'; 11 } 12 $("#instafeed").append(html); 13 }, 14 15 error: function() { 16 17 //エラー時の処理 18 } 19 }); 20}); 21
やってみたこと
その①叶うなら今のコードのままcaptionを表示するコードを追加したかった
http://cly7796.net/wp/javascript/try-using-the-instagram-api/
こちらを参考にしました。
HTML
1<div class="instacontainer"> 2 <div id="instafeed" class="row"></div> 3 <p class="caption"></p> 4</div>
JS
1$(function(){ 2 $.ajax({ 3 type: 'GET', 4 url: 'https://graph.facebook.com/v3.0/17841445667xxxxxx?fields=name%2Cmedia.limit(8)%7Bcaption%2Clike_count%2Cmedia_url%2Cpermalink%2Ctimestamp%2Cusername%7D&access_token=自分のアクセストークン', 5 dataType: 'json', 6 success: function(json) { 7 var insert = '<ul>'; 8 for (var i = 0; i < data.length; i++) { 9 insert += '<li>'; 10 11 // caption 12 if(data['data'][i]['caption'] != null) { 13 insert += '<p class="caption">' + data['data'][i]['caption']['text'] + '</p>'; 14 } 15 16 var html = ''; 17 var insta = json.media.data; 18 for (var i = 0; i < insta.length; i++) { 19 html += '<div ><a href="' + insta[i].permalink + '" target="_blank"><img src="' + insta[i].media_url + '"></a></div>'; 20 } 21 $("#instafeed").append(html); 22 }, 23 error: function() { 24 25 //エラー時の処理 26 } 27 }); 28});
インスタグラフAPIの部分が表示されませんでした。
その②参考サイトにかいてあるコードにマルっと変えて、取得を試みた
HTML
1<div class="instacontainer"> 2 <div id="instafeed" class="row"></div> ←divに変更しました 3</div>
JS
1 2$(function() { 3 var accessToken = '自分のアクセストークン'; 4 var userid = ユーザーID(17841445667xxxxxxともう一個、ユーザーIDらしきものが二個あったので二個ためしましたがいずれもだめ); // ユーザーID 5 var count = 8; // 取得件数 6 $.ajax({ 7 url: 'https://api.instagram.com/v1/users/' + userid + '/media/recent/?access_token=' + accessToken + '&count=' + count, 8 dataType: 'jsonp', 9 success: function(data) { 10 var insert = '<ul>'; 11 for (var i = 0; i < data['data'].length; i++) { 12 insert += '<li>'; 13 14 // 画像とリンク先 15 insert += '<a href="' + data['data'][i]['link'] + '" target="_blank">'; 16 insert += '<img src="' + data['data'][i]['images']['thumbnail']['url'] + '" class="instagram-image" />'; 17 insert += '</a>'; 18 19 insert += '<div class="instagram-data">'; 20 21 // 日付 22 var d = new Date(data['data'][i]['created_time'] * 1000); 23 var year = d.getFullYear(); 24 var month = d.getMonth() + 1; 25 var day = d.getDate(); 26 insert += '<div class="date">' + year + '/' + month + '/' + day + '</div>'; 27 28 // caption 29 if(data['data'][i]['caption'] != null) { 30 insert += '<p class="caption">' + data['data'][i]['caption']['text'] + '</p>'; 31 } 32 33 // いいね 34 insert += '<div class="instagram-like">'; 35 insert += '<div class="like-count">いいね数: ' + data['data'][i]['likes']['count'] + '</div>'; 36 if(data['data'][i]['likes']['data'] != null) { 37 for (var j = 0; j < data['data'][i]['likes']['data'].length; j++) { 38 insert += '<div class="like-user">'; 39 insert += '<img src="' + data['data'][i]['likes']['data'][j]['profile_picture'] + '" width="50" alt="" class="like-user-icon" />'; 40 insert += '<div class="like-user-name">' + data['data'][i]['likes']['data'][j]['username'] + '</div>'; 41 insert += '</div>'; 42 }; 43 } 44 insert += '</div>'; 45 46 insert += '</div>'; // instagram-data END 47 48 // コメント 49 insert += '<div class="instagram-comments">'; 50 insert += '<div class="comments-count">コメント数: ' + data['data'][i]['comments']['count'] + '</div>'; 51 if(data['data'][i]['comments']['data'] != null) { 52 for (var j = 0; j < data['data'][i]['comments']['data'].length; j++) { 53 insert += '<div class="comments-user">'; 54 insert += '<img src="' + data['data'][i]['comments']['data'][j]['from']['profile_picture'] + '" width="50" alt="" class="comments-user-icon" />'; 55 insert += '<div class="comments-user-name">' + data['data'][i]['comments']['data'][j]['from']['username'] + '</div>'; 56 insert += '<p class="comments-user-text">' + data['data'][i]['comments']['data'][j]['text'] + '</p>'; 57 insert += '</div>'; 58 }; 59 } 60 insert += '</div>'; 61 62 insert += '</li>'; 63 }; 64 insert += '</ul>'; 65 $('#instafeed').append(insert);←自分できめたulクラスのid名 66 } 67 }); 68});
インスタグラフAPIの部分が表示されませんでした。
その③同じようにJSで表示コメント取得に成功している方の質問を見て真似した
該当の質問ページ
これが一番成功に近そうだったのですが、dataType: 'json',の私がこれをどのように組み込めば良いか分からず…
HTMLもどうかいているのか、わからなかったので、とりあえず、
JS
1 .done(function(data){ 2 //通信成功時の処理 3 $.each(data.data,function(i,item){ 4 var imgurl = item.images.low_resolution.url; //低解像度の画像のURLを取得 5 var link = item.link; //リンクを取得 6 var text = item.caption.text; 7 html += '<li><a href="' + link + '"target="_blank"><img src="' + imgurl + '"></a><span>' + text + '</span></li>'; 8 }); 9 }).fail(function(){ 10 //通信失敗時の処理 11 html = "<li>画像を取得できません。</li>"; 12 }).always(function(){ 13 //通信完了時の処理 14 $container.html(html); 15 }); 16});
にある、captionのところだけ、追加すればいいのかな、と思い
HTML
1<div class="instacontainer"> 2 <div id="instafeed" class="row"></div> 3</div>
JS
1$(function(){ 2 $.ajax({ 3 type: 'GET', 4 url: 'https://graph.facebook.com/v3.0/17841445667xxxxxx?fields=name%2Cmedia.limit(8)%7Bcaption%2Clike_count%2Cmedia_url%2Cpermalink%2Ctimestamp%2Cusername%7D&access_token=自分のアクセストークン', 5 dataType: 'json', 6 success: function(json) { 7 var html = ''; 8 ここに→var text = item.caption.text; 追加してみました 9 var insta = json.media.data; 10 for (var i = 0; i < insta.length; i++) { 11 html += '<div ><a href="' + insta[i].permalink + '" target="_blank"><img src="' + insta[i].media_url + '"></a></div>'; 12 } 13 $("#instafeed").append(html); 14 }, 15 16 error: function() { 17 18 //エラー時の処理 19 } 20 }); 21});
このように書いてみましたが、インスタグラフAPIの部分が表示されませんでした。
その④JQuryで取得できるようでそれを試した
※Jqueryは、既にダウンロードして、HTML側で読み込んでいます。
まず、普通にオプション無で表示させるものを…と試しました
HTML
1<div class="instacontainer"> 2 <div id="instafeed" class="row"></div> 3</div>
JS
1$(function(){ 2 var accessToken = '自分のアクセストークン'; //取得したアクセストークンを貼り付ける 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 === 10 ) { return false; } //上限設定 6 $('<li><img src="'+src.images.standard_resolution.url+'"></li>').appendTo('自分の決めたID名#instafeed'); 7 }); 8 }); 9});
インスタグラフAPIの部分が表示されませんでした。
エラーメッセージをそれぞれ見たものの、
こんな感じで…
81行目が、該当のJSのインスタグラフAPIのコードのことなのですが、cannot readとあり、
もれなくいろんなところで今までなかったエラーが多発しるような状態で、どこから着手すればよいか分かりませんでした。
いずれの方法も、だめで、困り果て、質問させて頂きました…
JSは、まだまだ非常に知識が浅い為、大変恐縮なのですが、
何かご教示いただければ幸いです。
宜しくお願いいたします。
あなたの回答
tips
プレビュー