人気ソーシャルメディアをHPに埋め込む方法まとめ

最近のWebサイト制作では、新規顧客の集客という意味でも、既存顧客とのコミュニケーションをはかるという意味でも、ソーシャルメディアを埋め込むことが必須ですね。

ソーシャルメディアと言っても、いろんなものがあります。

まずメジャーなところでいうと、Facebook、Twitter、そしてLineと言ったところでしょうか。この三つは外せません。

さらに急激に広まっているインスタグラムや、写真がメインといえばピンタレストも人気ですし、他にもタンブラーや最近若者を中心に人気のSnapchatなど、本当にたくさんのサービスがあります。

今回は、そんなソーシャルメディアを埋め込む方法を、お伝えしたいと思います。

1. Facebook

まずはFacebook！

なんだかんだ人気のソーシャルメディア。ユーザーの年齢や性別、その他の属性で絞り込んで広告を出せるなど、広告主側としても魅力のあるプラットフォームです。

Facebookは個人的に、Webサイトに埋め込むためのプラグインの規定の変更が結構あり印象があります。

現在の最新の形式は、ページプラグインと呼ばれる形式です。
色々とカスタマイズができます。

が！

横幅の最大値が520pxと決められています。それ以上の横幅のカラムなどに埋め込むと、余計な余白ができてしまします。

なぜ、なぜなんだFacebook…！

基本的にサイドバーに置いておけってことなのか、Facebook！？

なぜ真ん中に置いてもらうことを狙わない？常にサイドバーに置いてもらって、コンテンツの横に表示して欲しいのか、Facebook？

…使いにくいぞ〜！！

ご存知の方も多いと思いますが、現在Webデザインといえば、レスポンシブデザインが主流。

“レスポンシブデザインにあらずんばWebサイトにあらず“と言ってもいいくらいに、弊社で作成するWebサイトも、運用をまかせて頂いているWebサイトもほぼ全てレスポンシブデザインです。

しかし、Facebookのページプラグインは、横幅をレスポンシブデザインの特徴である横幅がデバイスによって可変する、という動きを実装することができません。

どの様にFacebookを埋め込むかを、制作側でかなり考える必要があります。

どうして、こんな仕様なんだーーー！

しょうがないので、Facebookの場合、私は色々とサイト毎に工夫して埋め込みを行っています。

しかもFacebookは2種類のコードを埋め込む必要があるのですが、そのうち1つはタグのすぐ後に埋め込まないといけません。

Facebook、完全にプロ仕様です。

2. Twitter

さて、次は若年層に人気のTwitterです。

基本的に、アカウント名をこちらのアドレスのページで設定し、表示されたHTMLコードを設置したい箇所にペーストすれば大丈夫です。

Facebookと比べるとコードは1種類ですみ、設置だけならFacebookより簡単です。

こんな感じで、横幅もレスポンシブだったらいいんですけどね〜。
Twitterはレスポンシブデザインの代表的なフレームワークの一つであるTwitter BootStrapなんかも提供している企業なので、その点は期待できます。

さあ、埋め込みもすんだ、細かく調整してみようかな…レスポンシブで頼むよ〜。

ん？

あれ？

…Twitter、お前もかっっ！！

なんと、TwitterもFacebook同様、横幅のコントロールができません。
それどころか、表示する箇所も左寄せが基本で、そのカスタマイズ方法も公式には説明なし。なんでやねん！と思わず突っ込みたくなりました。

う〜ん。

FacebookさんもTwitterさんももう少し自由にやらせてくださいよ〜。
とぼやいてしまいました。

3. Line

最後は、メッセンジャーアプリとして絶大な人気を誇るLineです。

年齢や性別に関係なく、スマートフォンユーザーならほとんどの人が使っているイメージがありますね。

Lineは規定のHTMLタグを埋め込むだけで、非常にシンプルな仕様です。
装飾もHTMLなのでCSSを使って柔軟に変更できます。

いい仕様ですね、Line！他のソーシャルメディアもこれくらいシンプルで使い易ければいいのに…まあLineは画像表示しているだけなので、タイムラインが表示されるFacebookやTwitterとは違いますね、しょうがないです。

まとめ

どのソーシャルメディアも当たり前ですが仕様がそれぞれ違います。

さらにそれを色々なデバイスで見てもきれいに表示される様に設置してあげるのは、かなり大変です。

しかも仕様が頻繁に変更されるので、変更があった場合はきちんと修正して対応する必要があります。

さらに今回は三つのソーシャルメディアの設置方法をご紹介しましたが、他のソーシャルメディアを追加しようとすると、さらに大変になりますね。

サービス提供側でなんとか、Webサイト管理側が楽に設置を行えるように、ある程度共通の仕様を採用するなど、改善策を実行して欲しいものですね！