Instagramとの連携(Instagram Graph API) Part2

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

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

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

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

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

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

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

ポイント① 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-05-07rishuntrading_limited

  不二商栄株式会社様のコーポレイトサイトをフルリニューアルさせて頂きました🎉以前も弊社にて制作させて頂きましたが、デザインが古くなってきたこと等もあり、今回もご依頼いただきました。弊社サイトにてご紹介させて頂いております😊 #不二商栄株式会社 #webサイト制作 #rishuntrading

  Instagram記事へ

• 

  2024-05-01rishuntrading_limited

  作業拠点を所沢駅から徒歩1分のシェアオフィスに移転しました😊。皆さまのご期待に沿えられるよう引き続き研鑽してまいります。対面でのお打ち合わせや送付物はこちらのシェアオフィスになります。同時に一緒に所沢で働いて頂ける方も募集しております。詳細は弊社サイトにて掲載しております。 #thebranch #rishuntrading

  Instagram記事へ

• 

  2024-04-28rishuntrading_limited

  金融･決済業界を中心にコンサルティングや研修･講演･セミナー等を行う株式会社Optimorrow様のサイトを制作させて頂きました🎉。弊社サイトにて、制作事例として掲載させて頂きました😊。 #optimorrow #webサイト制作 #rishuntrading

  Instagram記事へ

• 

  2024-04-19rishuntrading_limited

  ITソリューションなどの事業を展開する｢株式会社三正総研｣様のコーポレイトサイトを制作させて頂きました🎉。弊社サイトに制作事例として掲載😊。ご依頼ありがとうございました。 #三正総研 #コーポレイトサイト製作 #rishuntrading

  Instagram記事へ

• 

  2024-04-11rishuntrading_limited

  ｢おもちゃ投資ラボ｣様のLPを制作させて頂きました🎉以前にWebサイトや会員制サイトなど弊社にて制作させて頂いたお客様です！この度、会員数も順調に増え、おもちゃ投資をより多くの方に知っていただきたい！との事で弊社に制作依頼がございました。弊社の制作事例として弊社サイトにてご紹介させて頂いております😊。 #おもちゃ投資ラボ #ラインディングページ #Webサイト制作 #rishuntrading

  Instagram記事へ

• 

  2024-04-10rishuntrading_limited

  保護犬･猫と共に暮らす障がい者グループホーム｢Akala｣様のWebサイトを制作させていただきました🎉。弊社サイトにて、弊社の制作事例としてご紹介させていただいております😊。 #グループホームAkala #Webサイト制作 #rishuntrading

  Instagram記事へ

• 

  2024-03-29rishuntrading_limited

  RishunTradingでは、｢株式会社ZEエナジー｣様のWebサイトを制作させていただきました🎉弊社サイトにて制作事例としてご紹介させて頂いております😊 #zeenergy #webサイト制作 #rishuntrading

  Instagram記事へ

• 

  2024-03-25rishuntrading_limited

  東京都台東区にて不動産の売却、不動産購入の仲介を事業を行う株式会社IREAS様のコーポレイトサイトを制作させて頂きました🎉。弊社の制作事例として弊社サイトでご紹介させて頂きました😊 #IREAS #webサイト制作 #rishuntrading

  Instagram記事へ
• • 
  • 
  • 

  2024-03-01rishuntrading_limited

  日曜夜10時放送のドラマ｢アイのない恋人たち｣で、自ら発掘したフランス製のスマホ収納棚(e-pause)がちょこちょこ出ています😍。ドラマのヒロイン、エリカさんが経営するブックカフェ屋さんに、それはおいてありまーす‼️(イラストにしていますので、実際はテレビやTVerで見て下さい。ドラマ撮影が終わるまで控えてました。) フランス製のスマホ収納棚｢e-pause｣シリーズは、スマホを預けてその場所でやるべきことに集中しようというのがコンセプト。デジタルデトックスの流れを汲んだ商品で、世界15ヵ国で販売されています❤️ 池袋・大塚にあるブックカフェ｢里葉｣さんにおいて頂いていたのがきっかけで、｢里葉｣さんがそのドラマの撮影場所となり、この｢e-pause｣の商品をそのまま使って頂いたようです。ありがとうございます😤 フランス🇫🇷の展示会｢MAISON&OBJET(メゾン・エ・オブジェ)｣✈️にて、そのコンセプトが気に入り一番最初に取扱い始めた商品で、ものすごく思い入れがあります😊。 フランスの会社の代表の方にも、わざわざ日本で行われた弊社の展示会に実際来て頂き、そして、一緒に展示ブースで説明員まで行って頂きました。 コロナや円安、また、日本ではなかなか受け入れ難いコンセプトという事で、残念ながらあまり売れていませんが、ただ、こうやってドラマなどにちょっとでも使われたりすると本当にうれしいものですねー😊 なお、このドラマで使われた商品は、まだ販売中ですが、｢Amazon｣や｢楽天｣では販売しておりません。もし、欲しいなあなどと思った方は、njoy.jpにてお買い求めいただくか、当社サイトにお問い合わせください😊 #アイのない恋人たち #スマホ収納棚 #Epause #デジタルデトックス #france #里葉 #nJoy #rishuntrading

  Instagram記事へ

• 

  2024-01-29rishuntrading_limited

  ネイルサロンやスポーツ関連事業(指導者派遣、イベント開催)などを行う合同会社キッカケ様のコーポレイトサイトを制作させていただきました🎉弊社サイトにてご紹介させていただきました☺。 #合同会社キッカケ #rishuntrading #webサイト制作

  Instagram記事へ

• 

  2024-01-26rishuntrading_limited

  近隣の他県からもご利用のある滋賀県の自動車販売事業者｢合同会社G-STYLE｣様のWebサイトをフルリニューアルさせて頂きました🎉。弊社サイトでご紹介させていただきました☺ #gstyle #webサイト制作 #rishuntrading

  Instagram記事へ

• 

  2024-01-16rishuntrading_limited

  オーガニックサイエンス株式会社様のコーポレイトサイトを制作させていただきました🎉。弊社サイトでご紹介させていただきました☺😊 #オーガニックサイエンス株式会社 #webサイト制作 #rishuntrading

  Instagram記事へ

×