Instagramとの連携(Instagram Graph API) Part2
去年、Instagramの投稿記事を取得してホームページに掲載する方法をご紹介させて頂きました。
https://rishuntrading.co.jp/blog/programing/facebookgraphapi/
この中では、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/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
東京都武蔵野市にて内装工事事業と美容事業を事業として行っている｢株式会社ISSEN｣様のコーポレイトサイトを制作させていただきました🎉。弊社の制作事例として弊社サイトでご紹介させていただきました😊。 #issen #webサイト制作 #rishuntrading
- rishuntrading_limited
オンラインダイエットで豊富な実績を持つ｢ラストダイエットプログラム｣様のランディングページを制作させていただきました🎉。弊社サイトに弊社の制作事例として紹介させて頂きました😊。 #ラストダイエットプログラム #webサイト制作 #rishuntrading
- rishuntrading_limited
和歌山県にて不登校支援などを中心に様々な事情でお悩みの方へカウンセリングを提供している｢いちこの心の相談窓口｣様のWebサイトを制作させていただきました🎉。弊社サイトの制作事例として掲載させていただきました😊。 #いちこの心の相談窓口 #webサイト制作 #rishuntrading
- rishuntrading_limited
愛知県にて不動産の売買事業などを行う名西トラスト不動産様のサイトを制作させて頂きました🎉。弊社サイトで、制作事例としてご紹介させて頂きました☺️。 #名西トラスト不動産 #webサイト制作 #rishuntrading
- rishuntrading_limited
RishunTradingでは、千葉県を中心に、埼玉、茨城、東京の不用品回収・引っ越しゴミ、遺品整理などを行うプライムリユース様のWebサイトを制作させていただきました🎉弊社サイトにてご紹介させていただきました😊 #プライムリユース #rishuntrading #webサイト制作
- rishuntrading_limited
RishunTradingでは、東京都港区にて広報･PR業務の代行やPR企画立案/実施、出版業や広告代理店等の業務を行うTOKYOコミュニケーションズ株式会社様のサイトをフルリニューアルさせていただきました🎉弊社サイトにてご紹介させていただきました😊 #東京コミュニケーションズ #rishuntrading #webサイト制作
- rishuntrading_limited
東京都杉並区にて建築物の設計や工事の監理を行う株式会社SOLID様のコーポレイトサイトを制作させて頂きました🎉。弊社サイトで弊社の制作事例としてご紹介させて頂きました😊。 #solid #rishuntrading #webサイト制作
- rishuntrading_limited
不二商栄株式会社様のコーポレイトサイトをフルリニューアルさせて頂きました🎉以前も弊社にて制作させて頂きましたが、デザインが古くなってきたこと等もあり、今回もご依頼いただきました。弊社サイトにてご紹介させて頂いております😊 #不二商栄株式会社 #webサイト制作 #rishuntrading
- rishuntrading_limited
作業拠点を所沢駅から徒歩1分のシェアオフィスに移転しました😊。皆さまのご期待に沿えられるよう引き続き研鑽してまいります。対面でのお打ち合わせや送付物はこちらのシェアオフィスになります。同時に一緒に所沢で働いて頂ける方も募集しております。詳細は弊社サイトにて掲載しております。 #thebranch #rishuntrading
- rishuntrading_limited
金融･決済業界を中心にコンサルティングや研修･講演･セミナー等を行う株式会社Optimorrow様のサイトを制作させて頂きました🎉。弊社サイトにて、制作事例として掲載させて頂きました😊。 #optimorrow #webサイト制作 #rishuntrading
- rishuntrading_limited
ITソリューションなどの事業を展開する｢株式会社三正総研｣様のコーポレイトサイトを制作させて頂きました🎉。弊社サイトに制作事例として掲載😊。ご依頼ありがとうございました。 #三正総研 #コーポレイトサイト製作 #rishuntrading
- rishuntrading_limited
｢おもちゃ投資ラボ｣様のLPを制作させて頂きました🎉以前にWebサイトや会員制サイトなど弊社にて制作させて頂いたお客様です！この度、会員数も順調に増え、おもちゃ投資をより多くの方に知っていただきたい！との事で弊社に制作依頼がございました。弊社の制作事例として弊社サイトにてご紹介させて頂いております😊。 #おもちゃ投資ラボ #ラインディングページ #Webサイト制作 #rishuntrading
WEB DESIGN全てお任せ！ホームページ制作
RishunTradingでは、日本にはないコンセプトや高いデザイン性をもったヨーロッパ製品の輸入販売、及び、Webサイト制作事業などをおこなっております。
「全てお任せ！ホームページ制作」は、ドメイン取得からサーバー設定、レスポンシブルデザイン(スマホ、タブレット対応)、SEO対策がすべて含まれたお得なホームページを制作するサービス商品です。
運用開始後に「Webサイト運用管理サービス(保守)」と組み合わせて購入しますと、メンテナンス、更新も含めてすべて弊社で実施しますので、お客様は安心して本業に集中する事ができます。
しかもなんと、「全てお任せ！ホームページ制作」は、￥100,000！で提供しております。
本業が忙しい中小企業様に大変ご好評を頂いている商品です。
独自ドメイン取得
サーバー開設＆設定
レイアウト設計
レスポンシブルデザイン
(*1)
検索エンジン最適化
(SEO対策)
場所Maps
お問い合わせフォーム
SSL化
各種SNS連携
運用マニュアル
