ホームページ上にインスタグラムの投稿を表示したい。

実現したいこと

画像のようにホームページ内にインスタグラムの投稿を3件横並びで表示して、
新規投稿されたら最新のものに順次更新をして表示できるようにしたいと思っております。

前提

参考として、
https://ginneko-atelier.com/blogs/entry448/
上記のブログに書かれている内容の通りに作業しております。
※webへの実装方法はJavaScriptサンプルコードの項目を参照。
最終的には「実現したいこと」に記載した通りの実装を目標にしておりますが、
まずはブログ内に記載のある下記画像のような実装結果を目指しています。

発生している問題・エラーメッセージ

インスタグラムのビジネスアカウント・ユーザーアクセストークンは取得できましたが、
サイトへの実装・反映方法がわかりませんでした。
【１】GoogleChromeでのコンソールログでの確認をしてみたところ
問題なければ結果が出るはずなのですが、添付画像のようにエラーがでて確認ができませんでした。

【2】Dwにて実装してみましたが表示・反応がありませんでした。

全くの初心者でして、修正方法が検討もつかず…ご教示をお願いしたく思っております。
何卒よろしくお願いいたします。

該当のソースコード

※インスタグラムの箇所だけ新規で制作しています。
※htmlです。

<head>
<title>Instagram</title>
<link rel="stylesheet" href="css/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>

<body>
<div id="insta">
<script type="text/javascript">
$(function(){
  let list = '';
  const limit = 3; //表示件数
  const accessToken = {user_access_token}// アクセストークン
  const businessID = {instagram_bussiness_account_ID} //instagram_business_accountのID
  const url = `https://graph.facebook.com/v11.0/${businessID}?fields=name,media.limit(${limit}){caption,media_url,thumbnail_url,permalink,like_count,comments_count,media_type}&access_token=${accessToken}`;
  $.ajax({
    url: url
  }).done((res)=> {
    const data = res.media;
    $.each(data, function(index, val) {
      $.each(val, function(i, item) {
        console.log(item);
        if(item.media_url){
          //メディアのタイプがビデオの場合、サムネを取得
          media = (item.media_type == 'VIDEO' ? item.thumbnail_url : item.media_url);

          // 一覧を変数listに格納
          list +=
          `<li>
            <a href="${item.permalink}" target="_blank" rel="noopener">
            <img src="${media}">
            <span class="like"><i class="fa fa-heart"></i>${item.like_count}</span></a>
          </li>`;
        }

      })
    });
  $('#insta').html(`<ul>${list}</ul>`);
  }).fail(function(jqXHR, status) {
    $('#insta').html('<p>読み込みに失敗しました。</p>');
  });
});
</script>
</div>
</body>

試したこと

コード内のアクセストークン・インスタグラムのビジネスIDは実際に取得したデータを入れております。
アクセストークン・インスタグラムのビジネスIDを用いてブラウザで確認した際は
問題なくアカウントと紐づいて投稿データが取れていました。

色々調べてPHPで方法を。とも作業してみましたが、
PHPに触ったこともないためかこちらも実装方法がわからすでした。

補足情報（FW/ツールのバージョンなど）

Dreamweaver2021にて作業しています。
Graph APIはバージョン11.0です。

K_3578

2021/08/06 01:50

ソースコードはMarkDownのcodeで提示しましょう。参考質問:https://teratail.com/questions/238564

yoneyone1890

2021/08/06 02:00

ご指摘ありがとうございました！修正いたしました。あわせて参考質問も貼ってくださりとても助かりました。本当にありがとうございます。

k_a

2021/08/06 05:10

添付画像のエラーを見ると`Syntax Error`、つまりロジックの間違いじゃなくて構文自体のエラーがでています。記載のソースコードを試したところ（適当なTokenを使ったので`Invalid OAuth access token`は返ってきますが）リクエスト、レスポンスは出来ていてコード自体は正しく動いています。質問者様の問題が起きているコードと記載のコードで違いが有るようです。今一度確認をお願いします。

yoneyone1890

2021/08/22 07:04

k4a様>> 検証とご指摘ありがとうございました！構文自体のエラーと教えていただけたのもとても助かります。自分が記載した構文もですが、どうもアクセストークンの取得から見直した方が良さそうなのでどちらも見直してもう一度トライして参りたいと思います。