InstagramのサムネイルをJS、PHPを使って表示させたい

前提・実現したいこと

Instagram Graph APIを使用し、サムネイルを表示させたいです。

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

https://arrown-blog.com/instagram-graph-api/#4Instagram_Graph_APIWeb
上記のブログ記事に記載されていたサンプルコードを利用していますが、エラーが出てサムネイル画像が表示されません。
サイト上ではHTMLは読み込まれず空のままです。

エラーでは「mediaが見つからない（読み込めない？）」と言われるのでインスタグラムのデータが読み込めないのかなと思うのですが、別のサンプルコードを使っても同じく「media」にエラーが出ました。
どうしたらエラーが解決できるのか分からず、ここで進捗が止まっています。
解決方法についてアドバイスをお聞かせいただけますと幸いです。

instagram.js:3 Uncaught TypeError: Cannot read property 'media' of undefined
    at Object.success (instagram.js:3)
    at c (jquery.min.js:2)
    at Object.fireWith [as resolveWith] (jquery.min.js:2)
    at l (jquery.min.js:2)
    at XMLHttpRequest.<anonymous> (jquery.min.js:2)

JS内の「const gallery_data = instagram_data["business_discovery"]["media"]["data"];」でエラーが出ているようです。
jQueryは<head>内に「<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>」で入れています。

ファイルはHTML・JS・PHPの3ファイルに分けていて、階層は以下になっています。

index02.htnl
∟js
　∟instagram.js
∟php
　∟instagram02.php

該当のソースコード

html
1<div class="article-instagram">
2          <ul id="instaGallery" class="instaGallery"></ul>
3          <script src="js/instagram.js"></script>
4</div>

JS
1$.getJSON("../php/instagram02.php", function(instagram_data){
2
3    const gallery_data = instagram_data["business_discovery"]["media"]["data"];
4    let photos = "";
5    const photo_length = 9;
6    
7    for(let i = 0; i < photo_length ;i++){
8    photos += '<li class="gallery-item"><img src="' + gallery_data[i].media_url + '"></li>';
9    }
10    $("#instaGallery").append(photos);
11    
12    });

PHP
1<?php
2
3ini_set('display_errors',1);
4error_reporting(E_ALL);
5
6$instagram_business_id = ‘instagramBusinessID’; 
7$access_token = ‘XXXXXXX’;
8$target_user = 'instagramUserName’;
9
10//自分が所有するアカウント以外のInstagramビジネスアカウントが投稿している写真も取得したい場合は以下
11$query = 'business_discovery.username('.$target_user.'){id,followers_count,media_count,ig_id,media{caption,media_url,media_type,like_count,comments_count,timestamp,id}}';
12
13$instagram_api_url = 'https://graph.facebook.com/v7.0/';
14$target_url = $instagram_api_url.$instagram_business_id."?fields=".$query."&access_token=".$access_token;
15
16$ch = curl_init();
17curl_setopt($ch, CURLOPT_URL, $target_url);
18curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
19
20$instagram_data = curl_exec($ch);
21curl_close($ch);
22
23echo $instagram_data;
24exit;
25

試したこと

下記記事で同じような悩みが記載されていたのですが、自己解決されたようで解決策が載っていませんでした…。
エラーを表示するコードを追記しています。
https://teratail.com/questions/211487

FACEBOOK for Developersのアクセストークンデバッガーでチェックをおこないました。
結果は有効の項目が「True」となっているので問題はないかなと思います。

補足

確認ブラウザはChrome、エラー内容はChromeのデベロッパーツールで確認しています。

//2020.07.19 補足
console.logの画像を追加しました。

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

回答1件

ベストアンサー

参考にされていたブログ記事に書いてあったコードとここで書かれているコードで異なる部分がありました。
質問で書かれたavaScriptのコードは

const gallery_data = instagram_data["business_discovery"]["media"]["data"];

となっています。しかし、参考にされた記事のコードは

const gallery_data = instagram_data["data"]["business_discovery"]["media"]["data"];

となっていました。もし参考にした記事のコードが正しい場合は、'["data"]'が抜けていたことによりプロパティが参照できていないということになります。

投稿2020/07/19 07:27

SanQ

総合スコア92

mocchimochi09

2020/07/19 08:54

ご回答ありがとうございます！参考にしたコードは「jQueryを使ったInstagram Graph API経由でインスタの写真を取得するためのサンプルコード」になるので、参照コードは質問文に記載されたもので合っています。 =================================== instagram_data["business_discovery"]["media"]["data"]; =================================== もしやと思い、頭に["data"]をつけてみたのですがやはり表示されませんでした…。その時のエラーはこちらです。 =================================== Uncaught TypeError: Cannot read property 'business_discovery' of undefined at Object.success (instagram.js:3) at c (jquery.min.js:2) at Object.fireWith [as resolveWith] (jquery.min.js:2) at l (jquery.min.js:2) at XMLHttpRequest.<anonymous> (jquery.min.js:2) ===================================

SanQ

2020/07/19 09:33 編集

ごめんなさい、見るところを誤っていました。質問のコードの場合、JavaScriptのファイル内でconsole.log(instagram_data["business_discovery"])をしたらどのような値が返ってくるかおしえてもらえませんか？

mocchimochi09

2020/07/19 14:08

返答が遅くなってしまい、申し訳ありません…。いえいえ、とんでもないです！返答いただけて嬉しいです。質問の件、頭に["date"] をつけたものではなく、下記のコードだった場合の事で合っていますか？ =================================== const gallery_data = instagram_data["business_discovery"]["media"]["data"]; =================================== それであれば、下記のエラーがでました。 =================================== Uncaught ReferenceError: instagram_data is not defined =================================== 本文にもスクショ貼っておきます。調べ方が間違っていたら、申し訳ないですがご指摘いただけると嬉しいです…。

SanQ

2020/07/19 14:17 編集

返信ありがとうございます。自分が言っていたコードはそのコードであっています。以下のエラーによると''instagram_data["business_discovery"]''の値は定義されていないから参照できないということになっています。つまりこの値を作成したPHPのファイル内でエラーが起きているか、URLが誤っていることによりデータがないということになります。なので、PHPのマジックメソッドである"var_dump"等を使ってPHPファイル内の$instagram_dataについて調べてみてはどうでしょうか？もしそれで$instagram_dataの値がnullであればURLの間違いである可能性が高いです。

mocchimochi09

2020/07/21 12:50

こんばんわ。教えていただいたvar_dump関数を使って調べてみました。 PHP内に上記関数を追加して出てきたエラー文は以下になります。 =================================== {"error":{"message":"(#100) Tried accessing nonexisting field (business_discovery) on node type (User)","type":"OAuthException","code":100,"fbtrace_id":"AvyYasx0Kl5hNHmMwJZC-hI"}} =================================== PHP内に下記コードがあるのですが、「$target_user.」にはインスタアカウントのユーザー名が入っています。結論として、インスタのユーザー名の記載が間違っているという事になるのでしょうか？ =================================== $query = 'business_discovery.username('.$target_user.'){id,followers_count,media_count,ig_id,media{caption,media_url,media_type,like_count,comments_count,timestamp,id}}'; ===================================

SanQ

2020/07/21 13:07

返信ありがとうございます。エラー文の内容からみるに、おっしゃる通りだと思います。

mocchimochi09

2020/07/22 13:22

インスタのユーザー名を確認してみたのですが、間違ってはいませんでした。ビジネスアカウントに変更されている事も確認しています。エラーもまだ同じものが出続けています。困りました…。 =================================== {"error":{"message":"(#100) Tried accessing nonexisting field (business_discovery) on node type (User)","type":"OAuthException","code":100,"fbtrace_id":"AKUll2E1CApjl9oc_0OnuIA"}} ===================================

SanQ

2020/07/22 13:40

同じようなところで躓いている方の記事を見つけたのですが、この記事を参考にしてはどうでしょう？ https://coffee-nominagara.com/try-instagram-graph-api

mocchimochi09

2020/07/23 11:30

ありがとうございます！現在ですが、いただいた記事を参考にアクセストークンを取り直していたりしていますが、下記エラーが出てAPIが動かない状態で現在止まっています。もうちょっと調査してみます。 =================================== { "error": { "message": "(#100) Tried accessing nonexisting field (accounts) on node type (IGUser)", "type": "OAuthException", "code": 100, "fbtrace_id": "ACgoVuOTB3gzl13Og-fKeGu" } } ===================================

mocchimochi09

2020/07/23 14:49

1件不思議な事が起こったので相談をさせてください。 https://coffee-nominagara.com/try-instagram-graph-api 上記記事の下部にあるURLで確認した所、＞https://graph.facebook.com/v4.0/【ビジネスアカウントID】/accounts?access_token=【アクセストークン】下記のエラーが出ました。 =================================== { "error": { "message": "(#100) Tried accessing nonexisting field (accounts) on node type (IGUser)", "type": "OAuthException", "code": 100, "fbtrace_id": "ACgoVuOTB3gzl13Og-fKeGu" } } =================================== ただ、 https://t-avant.blogspot.com/2019/10/instagram-graph-api.html 上記の記事にあったURLで確認をすると、データが取得されていました。 captionやいいね数、timestampもそれぞれ出ていました。 https://graph.facebook.com/v3.0/【IGビジネスID】?fields=name%2Cmedia.limit(【表示したい件数】)%7Bcaption%2Clike_count%2Cmedia_url%2Cpermalink%2Ctimestamp%2Cusername%7D&access_token=【トークン3】バージョンは確認する際にどちらも7.0に書き換え済みです。どちらも同じようなものに見えるのですが、目的等が違っていたりするのでしょうか？どちらの結果を信じていいのか分からず…。

SanQ

2020/07/23 15:18

Facebookのgraph apiについては今まで触れたことがないので、申し訳ないのですがその相談に乗れません。自分がgraph apiのバージョンv4.0とv3.0の違いについて軽く調べると、v4.0はv3.0よりもアクセスの権限が厳しくなっているらしいことがわかりました。なのでもし誰でもアクセスできるような機能を作りたい場合はv3.0の方が良いかもしれません。参考にした記事はこれです。 https://damelog.com/sns/facebook/facebook-graph-api-v4-0-marketing-api-v4-0-released/ また、graph apiのバージョンごとの機能についてはFacebookのgraph apiのページを見てみて下さい。 https://developers.facebook.com/docs/graph-api/changelog?locale=ja_JP

mocchimochi09

2020/07/23 15:30

承知しました。バージョンに関しての記事ありがとうございます！

mocchimochi09

2020/07/24 14:34

こんばんわ。 APIが動かない件ですが、質問内に記載した記事にある「//自分のアカウントの画像が取得できればOKな場合は$queryを以下のようにしてください。」のコードにしたら、PHPでデータを取ってくる事ができるようになりました。ただ、未だWEBサイト上では画像が表示されません…。 JSのコードは質問内に記載したものから変わりなく、console.log(instagram_data["business_discovery"])で調べてみた所、以下のエラーが出ました。 =================================== VM530:1 Uncaught ReferenceError: instagram_data is not defined at <anonymous>:1:13 =================================== PHPの方はvar_dumpを入れたままですが、今回はエラーは出ず、インスタの情報が取れています。となると、今回のエラーは下記に当たるのでしょうか？＞もしそれで$instagram_dataの値がnullであればURLの間違いである可能性が高いです。ちなみに、JS内に記載しているPHPへのパスは、「../php/instagram02.php」にしても絶対URLにしてもWEBサイトでは表示されませんでした…。

mocchimochi09

2020/07/24 15:46

WEBサイト上で表示されるようになりました！やってみた事は以下になります。 =================================== ・JS内に記載しているPHPへのパスを絶対URLにした・JS内のconst gallery_data = instagram_data["business_discovery"]["media"]["data"];から["business_discovery"]を削除・PHP内の「$target_user = 'XXXX';」を削除 =================================== いろいろアドバイスをしていただき、感謝です。本当にありがとうございました。

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