Q&A前提・実現したいこと
Instagram Graph APIを使用してビジネスアカウント化されているInstagramの画像を埋め込み表示させる。
発生している問題・エラーメッセージ
https://arrown-blog.com/instagram-graph-api/#4Instagram_Graph_APIWeb
上記サイトを参考にしてビジネスアカウントIDと3段階目のアクセストークンを取得してファイルのディレクトリ構造も同じにしてftp上にアップロードして確認したところ真っ白な画面でなにも表示されませんでした。
該当のソースコード
html
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 <link rel="stylesheet" href="css/style.css"> 9</head> 10<body> 11 12 <ul id="gallery" class="gallery"></ul> 13 14 <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> 15 <script src="js/script.js"></script> 16</body> 17</html>
javascript
1axios.get("instagram.php").then(instagram_data=>{ 2 console.log(instagram_data);// 検証ツールのConsoleを覗くと取得したデータの全容が確認できます。 3 4 // 5 //他のInstagramビジネスアカウントの投稿情報も取得したい場合 6 7 const gallery_data = instagram_data["data"]["business_discovery"]["media"]["data"]; 8 9 // 10 //自分のInstagramビジネスアカウントの投稿情報が取得できればOKな場合は 11 //const gallery_dataを下記にする。 12 13 // const gallery_data = instagram_data["data"]["media"]["data"]; 14 15 let photos = ""; 16 const photo_length = 9; 17 18 for(let i = 0; i < photo_length ;i++){ 19 photos += '<li class="gallery-item"><img src="' + gallery_data[i].media_url + '"></li>'; 20 } 21 document.querySelector("#gallery").innerHTML = photos; 22}).catch(error=>{ 23 console.log(error); 24})
php
1<?php 2 3$instagram_business_id = 'xxxxx'; 4$access_token = 'xxxxx'; 5 6$target_user = 'arrown_blog'; 7 8//自分が所有するアカウント以外のInstagramビジネスアカウントが投稿している写真も取得したい場合は以下 9$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}}'; 10 11//自分のアカウントの画像が取得できればOKな場合は$queryを以下のようにしてください。 12 13//$query = 'name,media{caption,like_count,media_url,permalink,timestamp,username}&access_token='.$access_token; 14 15 16 17$instagram_api_url = 'https://graph.facebook.com/v3.3/'; 18$target_url = $instagram_api_url.$instagram_business_id."?fields=".$query."&access_token=".$access_token; 19 20$ch = curl_init(); 21curl_setopt($ch, CURLOPT_URL, $target_url); 22curl_setopt($ch, CURLOPT_RETURNTRANSFER, true); 23 24$instagram_data = curl_exec($ch); 25curl_close($ch); 26 27echo $instagram_data; 28exit;
試したこと
取得したビジネスアカウントIDと3段階目のアクセストークンを使って以下のコードを使って表示させたところ自身のインスタグラムの埋め込み表示ができました。
しかし、下記のコードですと他のビジネスアカウントの画像を取得できません。また、phpではないのでビジネスアカウントIDと3段階目のアクセストークンが見えてしまいます。
html
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>Document</title> 7 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> 8 <script> 9 $(function(){ 10 $.ajax({ 11 type: 'GET', 12 url: 'https://graph.facebook.com/v3.0/【IGビジネスID】?fields=name%2Cmedia.limit(【表示したい件数】)%7Bcaption%2Clike_count%2Cmedia_url%2Cpermalink%2Ctimestamp%2Cusername%7D&access_token=【第3トークン】', 13 dataType: 'json', 14 success: function(json) { 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 }); 29 </script> 30</head> 31<body> 32 <p>test</p> 33 <div id="instafeed"></div> 34 35</body> 36</html>
回答2件
0
自己解決
自身のアカウントとarrown_blog以外のビジネスアカウントで試したところ表示されました。
投稿2019/09/17 06:19
総合スコア4
0
真っ白な画面でなにも表示されませんでした。
エラーを表示しない設定になっているからです。
phpのエラーログを確認ください。
開発時は以下のようにphpの先頭でエラーを出力するようにしましょう。
(php.iniで設定してもよいです。)
php
1<?php 2ini_set('display_errors',1); 3error_reporting(E_ALL); 4
投稿2019/09/12 04:33
総合スコア7914
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。