ブログ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-01-29
    2024-01-29rishuntrading_limited

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

  • rishuntrading_limited_2024-01-26
    2024-01-26rishuntrading_limited

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

  • rishuntrading_limited_2024-01-16
    2024-01-16rishuntrading_limited

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

  • rishuntrading_limited_2024-01-15
    2024-01-15rishuntrading_limited

    東村山市の中村造園様のWebサイトを制作させて頂きました🎉。弊社サイトでご紹介☺️ #中村造園 #webサイト制作 #rishuntrading

  • rishuntrading_limited_2023-12-18
    2023-12-18rishuntrading_limited

    コインランドリーの新店舗立ち上げ、コインランドリーのM&Aなど、コインランドリーに特化した事業を行う「株式会社キョウエイ」様のコーポレイトサイトを制作させて頂きました🎉。弊社の制作事例として弊社サイトでご紹介させていただきました😊。 #株式会社キョウエイ #Webサイト制作 #rishuntrading

  • rishuntrading_limited_2023-12-13
    2023-12-13rishuntrading_limited

    株式会社サクライト様のECサイト(ワインの販売サイト)を制作させて頂きました🎉。弊社の制作事例として弊社サイトにてご紹介させて頂きました😊。 #株式会社サクライト #Webサイト制作 #rishuntrading

  • rishuntrading_limited_2023-12-12
    2023-12-12rishuntrading_limited

    COZY様のサービスサイト「COZYキャリア」を制作させて頂きました🎉弊社のWebサイト制作事例として弊社サイトでご紹介させていただきました😊。 #COZYキャリア #webサイト制作 #rishuntrading

  • rishuntrading_limited_2023-12-11
    2023-12-11rishuntrading_limited

    「南総建株式会社」様のコーポレイトサイトをリニューアルさせて頂きました🎉。弊社制作事例として弊社サイトにてご紹介させていただきました😊。引き続きご支援させて頂く予定です。 #南総建株式会社 #webサイト制作 #rishuntrading

  • rishuntrading_limited_2023-12-08
    2023-12-08rishuntrading_limited

    オンライン履歴書作成サイト「TSUNAGU」様のサイトを制作させて頂きました🎉。スマホ1つで履歴書を作成し、募集先へ簡単にシェアできるのが特長です。弊社の制作事例として弊社サイトにてご紹介しております😊。 #履歴書作成 #tsunagu #Webサイト制作 #rishuntrading

  • rishuntrading_limited_2023-12-04
    2023-12-04rishuntrading_limited

    会員制コミュニティを運営するPRIME GATE様の会員制サービスサイトを制作させて頂きました🎉。弊社サイトに制作事例として掲載させて頂きました😊。 #primegate #webサイト制作 #rishuntrading

  • rishuntrading_limited_2023-11-24
    2023-11-24rishuntrading_limited

    板橋区の全個室インドアのゴルフ練習場「ゴルフランド」様のWebサイトを制作させていただきました🎉弊社サイトにてご紹介させていただきました😊 #ゴルフランド #webサイト制作 #rishuntrading

  • rishuntrading_limited_2023-11-13
    2023-11-13rishuntrading_limited

    都心を中心に鍼灸院・整骨院などを展開している「TRIGGER鍼灸院」様のまとめサイトを制作させて頂きました🎉。弊社サイトにてご紹介させて頂いております😊。 #trigger鍼灸院 #Webサイト制作 #rishuntrading

 

WEB DESIGN

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

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

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

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

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

  • 独自ドメイン取得

    独自ドメイン取得

  • サーバー開設&設定

    サーバー開設&設定

  • レイアウト設計

    レイアウト設計

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

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

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

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

  • 場所Maps

    場所Maps

  • お問い合わせフォーム

    お問い合わせフォーム

  • SSL化

    SSL化

  • 各種SNS連携

    各種SNS連携

  • 運用マニュアル

    運用マニュアル

≫詳細はこちら

MENU