Instagram埋め込みで写真・動画のサムネイルを表示させる方法

[Instagram Graph API5.0対応] Instagramの写真を埋め込む方法

2020.01.27

今更ですが、上記の記事中の埋込サンプルコードでのサムネイル表示が動画に対応していなかったので動画対応版は以下。
※ビジネスIDやら第3トークンやらは上記関連記事参照。

7行目の「media_url」が写真の場合で、「thumbnail_url」が動画の場合です。
※「thumbnail_url」では写真の方が取れないので両方取ります。

13行目でどっちなのかを判断し、16行目の該当箇所で変数をechoします。

<ul>
	<?php
	$num   = 【取得数】;
	$fb_api = 'https://graph.facebook.com/v5.0/';
	$insta_id = 'InstagramビジネスID'; 
	$token = '第3トークン';
	$query = 'media.limit('. $num. '){caption,like_count,media_url,thumbnail_url,permalink,timestamp}'; //何を取得するか
	$insta_json  = file_get_contents("{$fb_api}{$insta_id}?fields={$query}&access_token={$token}");
	$insta_data  = json_decode($insta_json);
	?>
	<?php
		foreach((array)$insta_data->media->data as $post){ 
		if(!$post->thumbnail_url){$imgurl = $post->media_url;}else{$imgurl = $post->thumbnail_url;}
	?>
		<li>
			<a href="<?php echo $post->permalink; ?>" target="_blank" style="background-image:url(<?php echo $imgurl; ?>);"></a>
		</li>
	<?php } ?>
</ul>

背景でサムネイル表示してますが、imgタグにしてobjectfitさせるのでもいいかも。

画像をトリミングしてくれるCSS【object-fit】をIEにも対応させる方法

2019.10.25