mako110 みなさん、インスタグラム使ってますか？
最近の依頼で多いのが
「WEBサイトにインスタグラムの画像を取り込みたい」
という要望です。
インスタグラムの方が更新性が高いですし、
それをWEBサイト側で取り込むことが出来れば、
サイトに動きを出すことも出来ますからね～。
以前は
上記を参考に、結構簡単に取得できたのですが、
2019年の11月から、仕様が複雑になり
正直、めちゃくちゃ面倒な方法になりました泣
ステップとしては、
・facebookページとinstagramビジネスアカウントを連携
・Facebook for Developersでアプリを作成
・トークンの発行
・トークン期限の延長
・jsonのURLを取得
・WEBサイト側で読み込み
となります。
詳細については下記のURLが最も分かりやすかったです。
（グーアップさん、ありがとうございます。）
なのですが、上記方法ですと一点問題がありまして。
動画が投稿されたときに、画像が表示されません。。
原因は、動画の際の「media_url」が、imgに対応していないからです。
そのため、別途「media_type」と「thumbnail_url」を呼び出しておいて、
javascriptの条件分岐で、読み込み値の切り分けをしてやる必要があります。
具体的には、使用するURLの
|
1 |
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を
|
1 |
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側で
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<div id="instafeed"></div> <script> $(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++) { html += '<div ><a href="' + insta[i].permalink + '" target="_blank"><img src="' + insta[i].media_url + '"></a></div>'; } $("#instafeed").append(html); }, error: function() { //エラー時の処理 } }); }); </script> |
こちらを
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
$(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 += '<li><a href="' + insta[i].permalink + '" target="_blank" rel="noopener noreferrer"><span class="square-content"><img src="' + insta[i].media_url + '"></span></a></li>'; } else if (media_type == "VIDEO" ) { html += '<li><a href="' + insta[i].permalink + '" target="_blank" rel="noopener noreferrer"><span class="square-content"><img src="' + insta[i].thumbnail_url + '"></span></a></li>'; var media_type = ''; } } $("#instafeed").append(html); }, error: function() { //エラー時の処理 } }); }); |
こんな感じで、条件分岐させると上手くいくかと思います。
そして、2020年には、古いInstagram APIでの呼び込み方法は廃止になるということ。。
これは、WEB屋に嵐が吹き荒れる予感ですね。。
ではまた。。
