ブログBlog

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/

 

  • rishuntrading_limited_2024-06-20
    2024-06-20rishuntrading_limited

    RishunTradingでは、千葉県を中心に、埼玉、茨城、東京の不用品回収・引っ越しゴミ、遺品整理などを行うプライムリユース様のWebサイトを制作させていただきました🎉弊社サイトにてご紹介させていただきました😊 #プライムリユース #rishuntrading #webサイト制作

  • rishuntrading_limited_2024-06-19
    2024-06-19rishuntrading_limited

    RishunTradingでは、東京都港区にて広報・PR業務の代行やPR企画立案/実施、出版業や広告代理店等の業務を行うTOKYOコミュニケーションズ株式会社様のサイトをフルリニューアルさせていただきました🎉弊社サイトにてご紹介させていただきました😊 #東京コミュニケーションズ #rishuntrading #webサイト制作

  • rishuntrading_limited_2024-05-29
    2024-05-29rishuntrading_limited

    東京都杉並区にて建築物の設計や工事の監理を行う株式会社SOLID様のコーポレイトサイトを制作させて頂きました🎉。弊社サイトで弊社の制作事例としてご紹介させて頂きました😊。 #solid #rishuntrading #webサイト制作

  • rishuntrading_limited_2024-05-07
    2024-05-07rishuntrading_limited

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

  • rishuntrading_limited_2024-05-01
    2024-05-01rishuntrading_limited

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

  • rishuntrading_limited_2024-04-28
    2024-04-28rishuntrading_limited

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

  • rishuntrading_limited_2024-04-19
    2024-04-19rishuntrading_limited

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

  • rishuntrading_limited_2024-04-11
    2024-04-11rishuntrading_limited

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

  • rishuntrading_limited_2024-04-10
    2024-04-10rishuntrading_limited

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

  • rishuntrading_limited_2024-03-29
    2024-03-29rishuntrading_limited

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

  • rishuntrading_limited_2024-03-25
    2024-03-25rishuntrading_limited

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

  • 2024-03-01rishuntrading_limited

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

 

WEB DESIGN

RishunTradingでは、日本にはないコンセプトや高いデザイン性をもったヨーロッパ製品の輸入販売、及び、Webサイト制作事業などをおこなっております。

「全てお任せ!ホームページ制作」は、ドメイン取得からサーバー設定、レスポンシブルデザイン(スマホ、タブレット対応)、SEO対策がすべて含まれたお得なホームページを制作するサービス商品です。

運用開始後に「Webサイト運用管理サービス(保守)」と組み合わせて購入しますと、メンテナンス、更新も含めてすべて弊社で実施しますので、お客様は安心して本業に集中する事ができます。

しかもなんと、「全てお任せ!ホームページ制作」は、¥100,000!で提供しております。

本業が忙しい中小企業様に大変ご好評を頂いている商品です。

  • 独自ドメイン取得

    独自ドメイン取得

  • サーバー開設&設定

    サーバー開設&設定

  • レイアウト設計

    レイアウト設計

  • レスポンシブルデザイン

    レスポンシブルデザイン
    (*1)

  • 検索エンジン最適化(SEO対策)

    検索エンジン最適化
    (SEO対策)

  • 場所Maps

    場所Maps

  • お問い合わせフォーム

    お問い合わせフォーム

  • SSL化

    SSL化

  • 各種SNS連携

    各種SNS連携

  • 運用マニュアル

    運用マニュアル

≫詳細はこちら

MENU