前提・実現したいこと
htmlで制作したWebページにインスタグラムのタイムラインを載せたい
発生している問題・エラーメッセージ
Uncaught SyntaxError: Unexpected token ':'
該当のソースコード
javascript
1<script> 2$(function(){ 3 let list = ''; 4 const limit = 20; //表示件数 5 const accessToken = {user_access_token}; // アクセストークン 6 const businessID = {instagram_bussiness_account_ID}; //instagram_business_accountのID 7 const url = `https://graph.facebook.com/v12.0/${businessID}?fields=name,media.limit(${limit}){caption,media_url,thumbnail_url,permalink,like_count,comments_count,media_type}&access_token=${accessToken}`; 8 $.ajax({ 9 url: url 10 }).done((res)=> { 11 const data = res.media; 12 $.each(data, function(index, val) { 13 $.each(val, function(i, item) { 14 console.log(item); 15 if(item.media_url){ 16 //メディアのタイプがビデオの場合、サムネを取得 17 media = (item.media_type == 'VIDEO' ? item.thumbnail_url : item.media_url); 18 19 // 一覧を変数listに格納 20 list += 21 `<li> 22 <a href="${item.permalink}" target="_blank" rel="noopener"> 23 <img src="${media}"> 24 <span class="like"><i class="fa fa-heart"></i>${item.like_count}</span></a> 25 </li>`; 26 } 27 28 }) 29 }); 30 $('#insta').html(`<ul>${list}</ul>`); 31 }).fail(function(jqXHR, status) { 32 $('#insta').html('<p>読み込みに失敗しました。</p>'); 33 }); 34}); 35</script>
試したこと
Facebookとの連携、無期限アクセストークンの取得など一通りおこなっています。
htmlファイルの、タイムラインを表示させたい部分に<div id="insta"></div>を置いています。
そして、上記のjavascriptを</body>の直前に置いています。
いろんなサイトでやり方が掲載されていましたので、複数試してみましたが同じ結果でした。
Web制作初心者なので、そもそもこの前提条件じゃないと動かないよ、など
なにかわかることがありましたら教えていただけますでしょうか。
補足情報(FW/ツールのバージョンなど)
以下に、ビジネスアカウントIDとアクセストークンを入れたら、JSONデータは取得できました。
https://graph.facebook.com/v12.0/【ビジネスアカウントID】?fields=name,media { caption,media_url,thumbnail_url,permalink,like_count,comments_count,media_type}&access_token=【アクセストークン3】
あなたの回答
tips
プレビュー