STUDIOのAPI連携でInstagram投稿の投稿を表示させる方法（2024/2/29修正＆追記版）

2024年2月29日 17:54

株式会社フォークのWEBデザイナーoyamadaです。

以前、こちらの投稿STUDIOのAPI連携でInstagram投稿の投稿を表示させる方法（覚書き）の訂正版となります！

訂正箇所は、動画のサムネが表示できないと思っていたのですが、すみません💦できました🙏

社内で一緒に活動していたノーコードチームのメンバーに聞いて、よくメモを見直したら、前回、最後の最後のステップのSTUDIOに貼り付けたこちらのURLを少し変えたら、動画のサムネのURLを引っ張ってくることができました🎉

▼STUDIOに入力するURL（引用元：01の参考サイト）

https://graph.facebook.com/v15.0/【自分のInstagram Business ID】?fields=business_discovery.username(【表示したいユーザー名】){media{id,caption,media_url,permalink,media_type,comments_count,like_count,timestamp}}&access_token=【無期限のアクセストークン】

あえて、自分の間違えた軌跡も訂正せずに、残して置こうと思います。
もし、前回までのステップが気になった方はこちらの投稿をご覧くださいm( _ _ )m

ちなみに先日、こちらのAPI連携を使ってSTUDIOで制作した、社内のデザイナーのアウトプットをまとめたサイトが公開しました！

よろしければ、こちらもみてみてください＾＾

引っ張ってきたかったのは「thumbnail_url」

前回、私が試した時は、動画のサムネイルが引っ張ってこれなくて、そうゆうものかと思っていたけど、みんなでSTUDIOの共同作業をしていた時に気が付きました。

「あれっ！？動画のサムネも取得できてる！？」

そう、引っ張ってきたかったのはこの「thumbnail_url」の動画のサムネイル画像です！

この「thumbnail_url」のパラメーターを取得すると、動画のサムネイルが表示できるようになります！

「thumbnail_url」が取得できたURLとを比較

私が前回の投稿で入力したURLと何か違うのか？？

APIを呼び出すためのSTUDIOに入力したURL（「追加」→「API」→編集（鉛筆マーク）→GET横のURL部分）を確認して、URLを比較してみることにしました。

動画のサムネイルを取得できたものとできなかったものを見比べて差分をみてみると…👀

動画のサムネが取得できてるURL

https://graph.facebook.com/【バージョン】/【自分のInstagram Business ID】?fields=name,media{caption,media_type,children{media_url,media_type,thumbnail_url},thumbnail_url,media_url,like_count,permalink,timestamp,username}&access_token=【無期限のアクセストークン】

ソース参考URL「インスタグラムのタイムライン(一覧)を埋め込む最新の方法Instagram Graph APIの使い方」

サムネが取得できなかった前回のURL

https://graph.facebook.com/【バージョン】/【自分のInstagram Business ID】?fields=business_discovery.username(Instagramのユーザー名){media{id,caption,media_url,permalink,media_type,comments_count,like_count,timestamp}}&access_token=【無期限のアクセストークン】

前回の投稿「03.▼STUDIOとInstagram Graph APIを連携するためのURLを作成する」参照

この太字の部分が違っていることに気が付き、上手く行っている方にはしっかりと動画のサムネイルを取得するための、「thumbnail_url」のテキストがある！！この追記が必要のようでした👀💦

これだ！！これを追加すれば、いけるかもしれない！と思い、
name＝「business_discovery.username(Instagramのユーザー名)※ユーザー名の(かっこ)はイキで」として、以下のURLに置き換えてみました。

さらに詳しく知りたい方は、こちらの参考とさせて頂いたサイトへ

修正した動画のサムネが取得できるURLはこちら

上記の差分から修正したURLがこちらです▼

修正したURL

https://graph.facebook.com/【バージョン】/【自分のInstagram Business ID】?fields=business_discovery.username(Instagramのユーザー名),media{caption,media_type,children{media_url,media_type,thumbnail_url},thumbnail_url,media_url,like_count,permalink,timestamp,username}&access_token=【無期限のアクセストークン】

無期限のアクセストークンなどはそのままで、こちらをSTUDIOで「追加」→「API」→「新規追加」で使用したいAPIのURL入力部分「GET」に入力。

そしたら、無事に「thumbnail_url」を取得することに成功🎉
ほっと一安心です。

最後までお読み頂き、ありがとうございましたm( _ _ )m

＼　フォークデザイナーのアウトプットサイト　／