新Instagram Graph APIを使ってWEBサイトに画像を呼び出す方法(画像・動画対応)

みなさん、インスタグラム使ってますか?
最近の依頼で多いのが
「WEBサイトにインスタグラムの画像を取り込みたい」
という要望です。

インスタグラムの方が更新性が高いですし、
それをWEBサイト側で取り込むことが出来れば、
サイトに動きを出すことも出来ますからね~。

以前は

上記を参考に、結構簡単に取得できたのですが、
2019年の11月から、仕様が複雑になり

正直、めちゃくちゃ面倒な方法になりました泣

ステップとしては、

・facebookページとinstagramビジネスアカウントを連携
・Facebook for Developersでアプリを作成
・トークンの発行
・トークン期限の延長
・jsonのURLを取得
・WEBサイト側で読み込み

となります。
詳細については下記のURLが最も分かりやすかったです。
(グーアップさん、ありがとうございます。)

なのですが、上記方法ですと一点問題がありまして。
動画が投稿されたときに、画像が表示されません。。

原因は、動画の際の「media_url」が、imgに対応していないからです。
そのため、別途「media_type」と「thumbnail_url」を呼び出しておいて、
javascriptの条件分岐で、読み込み値の切り分けをしてやる必要があります。

具体的には、使用する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トークン】

こちらのURLを

https://graph.facebook.com/v3.0/【IGビジネスID】?fields=name%2Cmedia.limit(【表示したい件数】)%7Bcaption%2Clike_count%2Cmedia_url%2Cpermalink%2Ctimestamp%2Cthumbnail_url%2Cmedia_type%2Cusername%7D&access_token=【第3トークン】

に変更してやります。
「media_type」と「thumbnail_url」を読み込むURLに変更します。

あとは、呼び出しのjavascript側で

こちらを

$(function(){
	$.ajax({
		type: 'GET',
		url: 'XXXXXXXXXXXXXXXXX',
		dataType: 'json',
		success: function(json) {
		    	
		    var html = '';
		    var insta = json.media.data;
		    for (var i = 0; i < insta.length; i++) {
		    var media_type = insta[i].media_type;
                if ( insta[i].media_type == "IMAGE" || insta[i].media_type == "CAROUSEL_ALBUM" ) {
		    	html += '
  • '; } else if (media_type == "VIDEO" ) { html += '
  • '; var media_type = ''; } } $("#instafeed").append(html); }, error: function() { //エラー時の処理 } }); });

    こんな感じで、条件分岐させると上手くいくかと思います。

    そして、2020年には、古いInstagram APIでの呼び込み方法は廃止になるということ。。
    これは、WEB屋に嵐が吹き荒れる予感ですね。。

    ではまた。。

    役に立った 9

    役に立ったボタン設置してみました。是非押していってくださいm(__)m(2020年4月設置)

    この記事を書いた人

    mako110

    原宿でWEBディレクターをやっています。
    WEB業界に携わって約15年。独立して7年目です。
    自分らしく、働きやすく、周りの人の役に立つ。
    そんな仕事をゆるゆるとやっています。