Instagramとの連携(Instagram Graph API) Part2
去年、Instagramの投稿記事を取得してホームページに掲載する方法をご紹介させて頂きました。
https://rishuntrading.co.jp/blog/programing/metagraphapi/
この中では、Instagramから取得したデータの詳細までは記載しなかったため、画像データ及び、記事だけの掲載となっておりました。
そのため、今回は、もう少し踏み込んでInstagramに投稿されている複数の画像や動画などを取得し、ホームページに掲載する方法について記載致します。
1.Instagram Graph APIで発行するリクエスト構文
内容を掲載する前に先に、発行するリクエスト構文について記載します。今回、すべての動画や画像を取得してホームページ上に掲載するため、リクエスト構文としては以下を利用しています。
Instagram Graph APIで発行するリクエスト構文
1 | GET https://graph.facebook.com/(バージョン)/(ビジネスID)?fields=name,media{caption,media_type,children{media_url,media_type,thumbnail_url},thumbnail_url,media_url,like_count,permalink,timestamp,username}&access_token=(トークン) |
※バージョン/ビジネス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-10-07rishuntrading_limited
「株式会社エーテン・アソシエイツ・ジャパン」様のコーポレイトサイトをフルリニューアルさせていただきました🎉。弊社の制作事例として弊社サイトでご紹介させていただきました😊。 #エーテンアソシエイツジャパン #Webサイト制作 #rishuntrading
- 2024-10-04rishuntrading_limited
「株式会社 逸鉄」様のVIMEO動画を検索するサイト「IGLOO+visitors」を制作させて頂きました🎉。弊社の制作事例として弊社サイトでご紹介させて頂きました😊 #igloo #webサイト制作 #rishuntrading
- 2024-10-03rishuntrading_limited
一般社団法人ものづくり検定協会様の日本式"Monozukuri"オンライン教育訓練サイト「MLT&R」を制作させていただきました🎉弊社の制作事例として弊社サイトでご紹介させて頂きました😊 #一般社団法人ものづくり検定協会 #Webサイト制作 #rishuntrading
- 2024-09-17rishuntrading_limited
兵庫県姫路市のボディメイク専門の完全貸切型のパーソナルトレーニングジム「CALORIE TRADE JAPAN 姫路大津店」様のLPを制作させて頂きました🎉弊社の制作事例として弊社サイトでご紹介させていただきました😊 #CALORIETRADEJAPAN姫路大津店 #rishuntrading #Webサイト制作 #lp制作
- 2024-09-09rishuntrading_limited
台東区にてシステム委託開発やエンジニアリングサービス、DX推進サポート事業などを行う「株式会社CHT」様のコーポレイトサイトをフルリニューアルさせていただきました🎉弊社サイトでご紹介😊 #株式会社cht #webサイト制作 #rishuntrading
- 2024-08-27rishuntrading_limited
大阪府堺市にて電気設備工事などを事業として行っている「アイ・シー・システムズ株式会社」様のコーポレイトサイトとECサイトをフルリニューアルさせていただきました🎉。弊社サイトでご紹介させて頂きました😊。 #icsystems #webサイト制作 #rishuntrading
- 2024-08-02rishuntrading_limited
栃木県宇都宮市にある「きむら整形外科/循環器内科クリニック」様のサイトを制作させて頂きました🎉。弊社サイトにて、制作事例としてご紹介させていただきました😊。 #きむら整形外科循環器内科クリニック #rishuntrading #Webサイト制作
- 2024-07-18rishuntrading_limited
東京都武蔵野市にて内装工事事業と美容事業を事業として行っている「株式会社ISSEN」様のコーポレイトサイトを制作させていただきました🎉。弊社の制作事例として弊社サイトでご紹介させていただきました😊。 #issen #webサイト制作 #rishuntrading
- 2024-07-17rishuntrading_limited
オンラインダイエットで豊富な実績を持つ「ラストダイエットプログラム」様のランディングページを制作させていただきました🎉。弊社サイトに弊社の制作事例として紹介させて頂きました😊。 #ラストダイエットプログラム #webサイト制作 #rishuntrading
- 2024-07-16rishuntrading_limited
和歌山県にて不登校支援などを中心に様々な事情でお悩みの方へカウンセリングを提供している「いちこの心の相談窓口」様のWebサイトを制作させていただきました🎉。弊社サイトの制作事例として掲載させていただきました😊。 #いちこの心の相談窓口 #webサイト制作 #rishuntrading
- 2024-07-01rishuntrading_limited
愛知県にて不動産の売買事業などを行う名西トラスト不動産様のサイトを制作させて頂きました🎉。弊社サイトで、制作事例としてご紹介させて頂きました☺️。 #名西トラスト不動産 #webサイト制作 #rishuntrading
- 2024-06-20rishuntrading_limited
RishunTradingでは、千葉県を中心に、埼玉、茨城、東京の不用品回収・引っ越しゴミ、遺品整理などを行うプライムリユース様のWebサイトを制作させていただきました🎉弊社サイトにてご紹介させていただきました😊 #プライムリユース #rishuntrading #webサイト制作
- タグ
- プログラミング
WEB DESIGN全てお任せ!ホームページ制作
RishunTradingでは、日本にはないコンセプトや高いデザイン性をもったヨーロッパ製品の輸入販売、及び、Webサイト制作事業などをおこなっております。
「全てお任せ!ホームページ制作」は、ドメイン取得からサーバー設定、レスポンシブルデザイン(スマホ、タブレット対応)、SEO対策がすべて含まれたお得なホームページを制作するサービス商品です。
運用開始後に「Webサイト運用管理サービス(保守)」と組み合わせて購入しますと、メンテナンス、更新も含めてすべて弊社で実施しますので、お客様は安心して本業に集中する事ができます。
しかもなんと、「全てお任せ!ホームページ制作」は、¥100,000!で提供しております。
本業が忙しい中小企業様に大変ご好評を頂いている商品です。
独自ドメイン取得
サーバー開設&設定
レイアウト設計
レスポンシブルデザイン
(*1)検索エンジン最適化
(SEO対策)場所Maps
お問い合わせフォーム
SSL化
各種SNS連携
運用マニュアル