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からデータを引っ張ってきて、配列で回すだけです。サンプルページでインスタ埋め込みを作るために書いたコードを下に載せます。

$businessId = 'インスタのビジネスID';
$numOfImg = 20;
$accessToken = 'Facebookページのアクセストークン';

$url = "https://graph.facebook.com/v6.0/{$businessId}?fields=media.limit({$numOfImg}){media_url,thumbnail_url,permalink}&access_token={$accessToken}";

$json = file_get_contents($url);
$json = mb_convert_encoding($json, 'UTF8', 'ASCII,JIS,UTF-8,EUC-JP,SJIS-WIN');
$obj = json_decode($json, true);

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

$obj["media"]["data"]の中にインスタの各投稿の情報が入っているので、配列で回して表示させました。

最後に

もし誤った情報を見つけたりお聞きしたいことがあったりした場合は、TwitterのDMメールにご連絡ください。