Instagramとの連携(Instagram Graph API) Part2

去年、Instagramの投稿記事を取得してホームページに掲載する方法をご紹介させて頂きました。
https://rishuntrading.co.jp/blog/programing/metagraphapi/

この中では、Instagramから取得したデータの詳細までは記載しなかったため、画像データ及び、記事だけの掲載となっておりました。

そのため、今回は、もう少し踏み込んでInstagramに投稿されている複数の画像や動画などを取得し、ホームページに掲載する方法について記載致します。

1.Instagram Graph APIで発行するリクエスト構文

内容を掲載する前に先に、発行するリクエスト構文について記載します。今回、すべての動画や画像を取得してホームページ上に掲載するため、リクエスト構文としては以下を利用しています。

Instagram Graph APIで発行するリクエスト構文

※バージョン/ビジネスID/トークンは、お客様で取得したものをお使い下さい。
ご参考)取得方法はこちら
https://rishuntrading.co.jp/blog/programing/metagraphapi/

ポイント① mediaデータのリクエスト

Instagramのメディアデータ(動画や画像)を利用するため、”media”データのリクエストを送信しています。

ポイント② children(メディアリスト)のリクエスト

Instagramに投稿されている記事に掲載されている全てのメディア(動画や画像)を取得できるようchildrenを指定し、複数のメディア(動画や画像)のリストを取得するようリクエストしています。

参考)childrenを含めたmediaデータのリクエスト抜粋
media{caption,media_type,children{media_url,media_type,thumbnail_url},thumbnail_url,media_url,like_count,permalink,timestamp,username}

2.動画や画像に関連するフィールド

media_type

単一のメディア(動画や画像)の場合、”IMAGE”(画像)、または、”VIDEO”が返却されます。
複数のメディア(動画や画像)の場合には、”CAROUSEL_ALBUM”が返却されます。

thumbnail_url

該当メディアが動画の時のサムネイル画像のURLが返却されます。複数のメディア(動画や画像)の場合には利用できませんので後述のchildrenのデータを見る必要があります。

media_url

該当メディア(動画や画像)のURLが返却されます。複数のメディア(動画や画像)の場合には利用できませんので後述のchildrenのデータを見る必要があります。

children

media_typeが、”CAROUSEL_ALBUM”だった場合には、このchildrenの中に複数のメディア(動画や画像)のリストが格納されています。
内容は、3項に記載します。

参考)Media(画像や動画)
https://developers.facebook.com/docs/instagram-basic-display-api/reference/media?locale=ja_JP

3.複数のメディア(動画や画像)が入っている場合

2項で記載した通り、”media_type”に、”CAROUSEL_ALBUM”が返却され、”children”の中に複数のメディア(動画や画像)のリストが格納されています。

childrenの中

media_url

該当メディア(動画や画像)のURLが返却されています。

media_type

該当メディア(動画や画像)の種類が返却され、”IMAGE”(画像)、または、”VIDEO”が返却されます。

thumbnail_url

該当メディアが動画の場合には、サムネイル画像のURLが返却されます。

参考)Media Children(複数の画像や動画のリスト)
https://developers.facebook.com/docs/instagram-basic-display-api/reference/media/children#reading

4.取得したデータを使ってHTML＆CSSで整形

当社のInstagramの投稿記事よりデータを取得し表示してみました(改修したもの)。
該当記事のメディア(動画や画像)が複数ある場合には、bootstrapのカルーセルを使ってスライド表示。
該当記事をクリックすると、Instagramの記事の内容(動画や画像含む)が表示されるよう改修しています。

ご参考)取得方法はこちらをベースにPHPで記載しています。
https://rishuntrading.co.jp/blog/programing/facebookgraphapi/

• 

  2024-11-15rishuntrading_limited

  ベトナム・ダナンにてジャンケット事業を行う｢ダビ･インターナショナル｣様のWebサイトを制作させていただきました🎉。弊社の制作事例として弊社サイトにてご紹介させていただきました。 #タビインターナショナル #webサイト制作 #rishuntrading

  Instagram記事へ

• 

  2024-10-18rishuntrading_limited

  RishunTradingでは、兵庫県姫路市のボディメイク専門の完全貸切型のパーソナルトレーニングジム｢DD expert｣様の姫路今宿店、姫路東山店のランディングページを制作させていただきました🎉。弊社サイトの制作事例として掲載させていただきました😊。 #ddexpert #webdesign #ランディングページ #rishuntrading

  Instagram記事へ

• 

  2024-10-16rishuntrading_limited

  クラウドソーシングプラットフォームを通じて4年間に渡り培ってきたWebサイト制作に関するノウハウを1冊の書籍にまとめてみました🎉。特に2019年 年末の起業からコロナ禍や円安といった困難な時期を乗り越えられたのは、本当に｢ココナラ｣さんのおかげで感謝しております😭。Webデザイナー兼プログラマーとしてフリーランスの道を目指す方々に向けた内容です。現在、先行予約受付中です。10/22(火)からダウンロードできるようになります。興味のある方は是非一読ください。 https://www.amazon.co.jp/dp/B0DK2XPDVQ #rishuntrading #coconala #webdesign #フリーランス

  Instagram記事へ

• 

  2024-10-07rishuntrading_limited

  ｢株式会社エーテン・アソシエイツ・ジャパン｣様のコーポレイトサイトをフルリニューアルさせていただきました🎉。弊社の制作事例として弊社サイトでご紹介させていただきました😊。 #エーテンアソシエイツジャパン #Webサイト制作 #rishuntrading

  Instagram記事へ

• 

  2024-10-04rishuntrading_limited

  ｢株式会社 逸鉄｣様のVIMEO動画を検索するサイト｢IGLOO+visitors｣を制作させて頂きました🎉。弊社の制作事例として弊社サイトでご紹介させて頂きました😊 #igloo #webサイト制作 #rishuntrading

  Instagram記事へ

• 

  2024-10-03rishuntrading_limited

  一般社団法人ものづくり検定協会様の日本式"Monozukuri"オンライン教育訓練サイト｢MLT&R｣を制作させていただきました🎉弊社の制作事例として弊社サイトでご紹介させて頂きました😊 #一般社団法人ものづくり検定協会 #Webサイト制作 #rishuntrading

  Instagram記事へ

• 

  2024-09-17rishuntrading_limited

  兵庫県姫路市のボディメイク専門の完全貸切型のパーソナルトレーニングジム｢CALORIE TRADE JAPAN 姫路大津店｣様のLPを制作させて頂きました🎉弊社の制作事例として弊社サイトでご紹介させていただきました😊 #CALORIETRADEJAPAN姫路大津店 #rishuntrading #Webサイト制作 #lp制作

  Instagram記事へ

• 

  2024-09-09rishuntrading_limited

  台東区にてシステム委託開発やエンジニアリングサービス、DX推進サポート事業などを行う｢株式会社CHT｣様のコーポレイトサイトをフルリニューアルさせていただきました🎉弊社サイトでご紹介😊 #株式会社cht #webサイト制作 #rishuntrading

  Instagram記事へ

• 

  2024-08-27rishuntrading_limited

  大阪府堺市にて電気設備工事などを事業として行っている｢アイ・シー・システムズ株式会社｣様のコーポレイトサイトとECサイトをフルリニューアルさせていただきました🎉。弊社サイトでご紹介させて頂きました😊。 #icsystems #webサイト制作 #rishuntrading

  Instagram記事へ

• 

  2024-08-02rishuntrading_limited

  栃木県宇都宮市にある｢きむら整形外科/循環器内科クリニック｣様のサイトを制作させて頂きました🎉。弊社サイトにて、制作事例としてご紹介させていただきました😊。 #きむら整形外科循環器内科クリニック #rishuntrading #Webサイト制作

  Instagram記事へ

• 

  2024-07-18rishuntrading_limited

  東京都武蔵野市にて内装工事事業と美容事業を事業として行っている｢株式会社ISSEN｣様のコーポレイトサイトを制作させていただきました🎉。弊社の制作事例として弊社サイトでご紹介させていただきました😊。 #issen #webサイト制作 #rishuntrading

  Instagram記事へ

• 

  2024-07-17rishuntrading_limited

  オンラインダイエットで豊富な実績を持つ｢ラストダイエットプログラム｣様のランディングページを制作させていただきました🎉。弊社サイトに弊社の制作事例として紹介させて頂きました😊。 #ラストダイエットプログラム #webサイト制作 #rishuntrading

  Instagram記事へ

×