RYO.dev

最終更新日:

WordPressで作られたサイトにインスタグラムの投稿を埋め込みました。

  1. 依頼内容
  2. 制作物
  3. 料金と納期、その他
  4. 制作過程
  5. フィードバック

依頼内容

WordPressで作られた着物屋さんのサイトのトップページにインスタグラムの投稿を埋め込んでほしいという依頼でした。スマホで見たときは画像を4 × 2で表示させ、パソコンで見たときは5 × 2で表示させる形式を希望していました。

また、マウスでホバーしたときのエフェクト(例えば、投稿日時が表示されるなど)は特に必要なく、クリックしたらインスタの投稿に飛ぶような仕様で制作をお願いされました。

制作物

依頼主さんの要望により画像を載せられないのですが、下のようなシンプルなデザインでした。グレーの部分にはインスタの画像が入ります。画像は正方形で表示されており、クリックするとインスタの投稿に飛びます。

上の図はハーマングリッドみたいで気持ち悪いですが、実際はそのような錯視は起こっていませんでした(笑)

料金と納期、その他

制作過程

このセクションは、Webサイト制作に携わっている方向けの内容になりますので、専門的な話になります。

埋め込みを支援するサービスとしてInstaWidgetやSnapWidgetといったものがあります。ちょちょいと設定するだけで簡単にインスタの投稿を埋め込むことができる便利サービスです。僕もこれを利用しようと考えていました。これらのサービスはインスタグラムが提供しているInstagram APIという機能を利用しています。しかし調べたところ、2020年3月2日にInstagram APIが廃止されるという情報がありました。これらのサービスを利用してインスタを埋め込んでも、この日付以降はインスタが表示されなくなる可能性もあるため、代わりにInstagram Graph API を使用して投稿を埋め込むことにしました。

Instagram Graph APIを利用するにはインスタグラムのビジネスIDとFacebookページのアクセストークンが必要になります。これは依頼主さんに用意していただきました。これらの2つの情報を得るにはインスタグラムとFacebookにログインする必要があります。ログイン情報を他人に教えるのもリスキーだと思うので、もし依頼主さんが自分でできそうであればしていただいた方がいいと思いました。解説ページはたくさんあるので、その中の1つを伝えて依頼主さんに2つの情報を用意していただきました。

その2つの情報さえわかれば後はAPIからデータを引っ張ってきて、配列で回すだけです。

ドキュメントを見ても内容がさっぱりだったので、APIの使い方を解説したページをいろいろと参考にしながら作りました。

フィードバック

ご意見やお聞きしたいことがございましたら、TwitterのDMメールにご連絡ください。