instagram埋め込みで動画を排除したい。
どこかのサイトで「コピペするだけでインスタの最新記事を埋め込みが出来る」というのをコピペしてホームページに最新の写真数件を掲載してました。(コピペでしか使えないという点で実力を察して頂けると助かります)
インスタのアカウントをプロアカウント(当時はビジネスアカウント)に変更するなどしてちゃんと表示できていたのですが、今見たら動画を投稿した場合写真無し表示(windows chromeの場合、グレーの枠で左上に画像を示す小さなアイコンが表示)になってました。設置当初は画像しかアップしてなかったので全然気が付かなかったです。
自分なりに色々調べてみたのですが、「少なくとも2020年5月現在、Instagram Graph API経由でIGTVのデータを取得し表示することはできない」・「投稿データがIGTVだった場合は何もしないというプログラムを設定するしかなさそうです。」と書かれた記事を見つけました。
https://arrown-blog.com/howtoget-instagram-data-includes-movie/#IGTV
という事で、このサイトにある通り修正してみようとしました。
利用しているのは以下の通りです。
.js
// JavaScript Document
axios.get("lib/jquery.instagram_show.php").then(instagram_data=>{ //phpの位置は、このjsからの位置ではなく表示するhtmlからの位置
console.log(instagram_data);// 検証ツールのConsoleを覗くと取得したデータの全容が確認できます。
//Instagramビジネスアカウントの情報取得
const gallery_data = instagram_data["data"]["business_discovery"]["media"]["data"];
let photos = "";
// 掲載数(レスポンシブを考えて偶数にすること)
const photo_length = 6;
for(let i = 0; i < photo_length ;i++){
photos += '<li class="instagram_gallery-item"><a href="' + gallery_data[i].permalink + '" target="_blank" rel="noopener"><img src="' + gallery_data[i].media_url + '"></a></li>';
}
document.querySelector("#instagram_gallery").innerHTML = photos;
}).catch(error=>{
console.log(error);
})
php
<?php
// 設定
$instagram_business_id = '◆ID◆';
$access_token = '◆トークン◆';
$target_user = '◆インスタID◆';
//自分が所有するアカウント以外のInstagramビジネスアカウントが投稿している写真も取得したい場合は以下
$query = 'business_discovery.username('.$target_user.'){id,followers_count,media_count,ig_id,media{caption,media_url,permalink,media_type,like_count,comments_count,timestamp,id}}';
//自分のアカウントの画像が取得できればOKな場合はこちらを利用。
//$query = 'name,media{caption,like_count,media_url,permalink,timestamp,username}&access_token='.$access_token;
$instagram_api_url = 'https://graph.facebook.com/v10.0/';
$target_url = $instagram_api_url.$instagram_business_id."?fields=".$query."&access_token=".$access_token;
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $target_url);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
$instagram_data = curl_exec($ch);
curl_close($ch);
echo $instagram_data;
exit;
?>
これに対し、以下のようにコードを変更・追加してみました。
for(let i = 0; i < photo_length ;i++){
if (!gallery_data[i].media_url) {
continue;
}
photos += '<li class="instagram_gallery-item"><a href="' + gallery_data[i].permalink + '" target="_blank" rel="noopener"><img src="' + gallery_data[i].media_url + '"></a></li>';
}
埋め込んで表示する画像は6枚に設定してます。
現状
写真1・写真2・写真3・動画1・動画2・動画3
の計6枚が表示されています。
コードを追加すると動画1は非表示になったのですが、動画2と3はそのまま表示(画像無しの枠が表示されたまま)されました。
また、動画3以前に投稿している写真は表示されず5枚表示になってしまいました。
素人なりに考えると、forの所で”6枚取り出した後で動画は非表示”としてるように感じたのですが…
そう思って、6枚を抽出するforの前にif文を置いてみると、今度は何も表示しなくなりました。(画像無しの枠も表示されない)
ここで手詰まりになりました。この場合どのように修正したら良いのでしょうか。
よろしくお願いします。
