新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の

こちらのURLを

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

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

こちらを

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

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

ではまた。。

この記事を書いた人

mako110

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