質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
Instagram API

Instagram APIは、写真共有SNSであるInstagramの投稿写真をWebサイトに掲載するためのAPIです。取得することでWebサイトと連携し、自動的に投稿写真を表示することができます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

0回答

850閲覧

htmlで制作したWebページにインスタグラムのタイムラインを載せたい

doublecheese

総合スコア0

Instagram API

Instagram APIは、写真共有SNSであるInstagramの投稿写真をWebサイトに掲載するためのAPIです。取得することでWebサイトと連携し、自動的に投稿写真を表示することができます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2021/10/14 09:28

編集2021/10/15 05:04

前提・実現したいこと

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】

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Lhankor_Mhy
doublecheese

2021/10/15 05:05

失礼しました。編集しましたが問題ないでしょうか?
Lhankor_Mhy

2021/10/15 05:52

ありがとうございます。試してみましたが、文法エラーを確認することができませんでした。 ご提示のエラーはどの行で発生しているのですか?
doublecheese

2021/10/15 06:11

早速ご確認いただき、ありがとうございます! chromeのコンソールで確認しているのですが、私が記述したコードではなくて、なにか別で動いているファイル?にエラーがついているようなのですが・・・コンソールの見方もよくわかっていないので、また調べてご報告いたします。
doublecheese

2021/10/15 06:32

ありがとうございます! JSONについて詳しくないのですが、そうかもしれません。いただいたURL見て検証してみます。
cerfweb

2021/10/27 11:59

ところどころ、' が ` で記述されているのは関係ないですか。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問