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/

• 

  2026-02-10rishuntrading_limited

  RishunTradingでは、医療専用AIと専門医ネットワークを活用した臨床意思決定プラットフォーム｢Doctors Summit｣などを展開する｢株式会社ドクターズサミット｣様のサイトを制作させていただきました🎉 弊社のサイト制作の事例として弊社サイトでご紹介させていただきました😊 #doctors_summit #Webサイト制作 #rishuntrading

  Instagram記事へ

• 

  2026-02-09rishuntrading_limited

  RishunTradingでは、岡山県にてチャットレディ事業を展開する｢ゆるふわチャット｣様のサイトを制作させていただきました🎉弊社のサイト制作事例として弊社サイトで紹介させていただきました😊 #ゆるふわチャット #Webサイト制作 #rishuntrading

  Instagram記事へ

• 

  2026-02-05rishuntrading_limited

  当社は、プロが集まるスキルマーケット｢ココナラ｣さんで｢プロ認定｣🏅をいただきました🎉 本事業を始めてから6年、地道に実績を重ねてまいりました。 これから起業をお考えの方、サイトリニューアルをお考えの方、その他、Webサイトで新規事業をお考えの方、是非｢ココナラ｣さんの当社Webサイト制作をご検討いただければ幸いです！ #coconala #rishuntrading #webサイト制作

  Instagram記事へ

• 

  2026-01-27rishuntrading_limited

  RishunTradingでは、愛知県を中心に建設リフォーム工事/電気設備工事/空調設備工事/建物清掃管理/外構･エクステリア工事/塗装工事/不動産管理事業などを行う｢株式会社トップエージェント｣様のサイトを制作させて頂きました🎉弊社の制作事例として弊社サイトにてご紹介させていただきました😊 #株式会社トップエージェント #webサイト制作 #rishuntrading

  Instagram記事へ

• 

  2026-01-26rishuntrading_limited

  RishunTradingでは、岐阜県を中心に出張買取事業(不用品買取/遺品整理/生前整理)を行う｢リユース商店｣様のサイトを制作させて頂きました🎉弊社サイトにてご紹介させていただきました😊 #リユース商店 #Webサイト制作 #rishuntrading

  Instagram記事へ

• 

  2025-12-01rishuntrading_limited

  RishunTradingでは、AI知性設計事業およびアフリカ知的Pocイテレーション事業を行う｢株式会社OmoiQane｣様のコーポレイトサイトを制作させて頂きました🎉弊社の制作事例として弊社サイトにてご紹介させていただきました😊 #omoiqane #Webサイト制作 #rishuntrading

  Instagram記事へ

• 

  2025-11-18rishuntrading_limited

  RishunTradingでは、沖縄･備瀬のフクギ並木に抱かれた特別なヴィラ｢THE GARDEN Bise｣様のサイトを制作させていただきました🎉弊社サイトに弊社の制作事例としてご紹介させていただきました😊 #THEGARDENBise #Webサイト制作 #rishuntrading

  Instagram記事へ

• 

  2025-11-17rishuntrading_limited

  RishunTradingでは西荻窪駅より徒歩3分の整骨院｢西荻窪Flat整骨院｣様のサイトを制作させていただきました🎉弊社サイトにて弊社の制作事例としてご紹介させていただきました😊 #西荻窪Flat整骨院 #Webサイト制作 #rishuntrading

  Instagram記事へ

• 

  2025-10-30rishuntrading_limited

  東京都板橋区を拠点にTikTokエージェント事業、IPFSサーバー構築事業、美容･ウェルネス事業を行う｢合同会社CT4｣様のコーポレイトサイトを制作させていただきました🎉 弊社の制作事例として、弊社サイトにてご紹介させていただきました😊 #CT4 #webサイト制作 #rishuntrading

  Instagram記事へ

• 

  2025-10-29rishuntrading_limited

  東京都東大和市を拠点に電気工事や水中ドローン事業を行う｢株式会社でんき工房｣様のWebサイトを制作させていただきました🎉。弊社の制作事例として弊社サイトでご紹介させていただきました😊 #でんき工房 #Webサイト制作 #rishuntrading

  Instagram記事へ

• 

  2025-08-29rishuntrading_limited

  RishunTradingでは、小説｢みんな、お前のせいだぞ！｣(十六匹の羊、二頭のロバ、三匹の犬と私のベドラム牧場大冒険)、"Jon Katz(著)"、"津新 望未(訳)"の販売および紹介サイトを制作させていただきました🎉。弊社サイトにて弊社の制作事例としてご紹介させていただきました😊。 #みんなお前のせいだぞ #Webサイト制作 #rishuntrading

  Instagram記事へ

• 

  2025-08-27rishuntrading_limited

  RishunTradingでは、静岡県を拠点に建築業や不動産事業を行う｢株式会社 建築システム｣様のコーポレイトサイトをフルリニューアルさせて頂きました🎉。弊社の制作事例として弊社サイトでご紹介させて頂きました😊。 #建築システム #Webサイト制作 #rishuntrading

  Instagram記事へ

×