Facebook Like Boxをレスポンシブデザインに対応させよう

今はスマホユーザーがどんどん増えていることもあって
レスポンシブデザインのテンプレートを使っている方が
増えています。

もちろん今ご覧のブログもレスポンシブ対応のテンプレート
を使っています。Facebook Like Boxを可変するレイアウト
に対応させる方法を説明します。

Facebook Like Boxをなにも設定せずにそのまま設置すると
このように可変レイアウトに対応できず、はみ出してしまいます。

a-001

その前に、Facebook Like Boxの作成ページの仕様が
変わっていましたので、最初にサクッと説明しておきますね。

■Facebook Like Boxの作成

Facebook Like Boxのプラグインページにアクセスします。
 Like Boxのプラグインページ

a-002

 Facebook Page URL

ここにフェイスブックページのアドレスを入れます。(個人ページではありません。)
入れると右側にあなたのフェースブックページが表示されます。

 Width・Height

Like Boxの幅・高さを指定できます。あなたのブログに合わせて設定しましょう。

 Color Scheme

Like Box内の色を指定できます。(白orグレー)

 Show Friends’ Faces

いいねをクリックしてくれた方のアバターを表示する、しないを指定します。

 Show Header

Like Boxのヘッダーの表示、非表示を設定できます。

 Show Posts

シェア最新記事を表示、非表示を選択できます。

 Show Border

枠の表示、非表示を選択できます。

 

最後に「Get Code」をクリックします。
Like Boxプラグインコードが表示されます。HTML5を選択し
直後にJavaScript SDK、任意の場所にLikeboxのコードを貼り付けます。

a-003

スタイルシートの編集しましょう

Facebook Like boxの幅が、可変したサイト幅に対応するように
スタイルシートに下記のソースを記述します。

div.fb-like-box,
div.fb-like-box iframe[style],
div.fb-like-box span {
width: 100% !important;
}

これでiPad、iPhoneなど可変するサイズに対応して
Facebook Like boxが表示されるようになります。

a-004

iPad、iPhoneの縦・横でどのように表示されるか
確認したいとき、このサイトが役に立ちますよ。

 ipadpeek

a-005

レスポンシブデザイン対応テンプレートを使っている方は、ipadpeekで
デザインの崩れがないか一度チェックしてはいかがですか?

 

フェースブックページをカスタマイズしました!

 新しい未来派フェースブックページを今すぐチェック!
(※Facebookにログインしているとページが見れます。)

2014y01m08d_200445016

この記事が気に入ったら
いいね ! しよう

当ブログは「ALPHA WordPress Theme」を使っています

当ブログは未来派野郎hiroと吉田デザイン:吉田元一氏との共同販売のワードプレステンプレート「ALPHA WordPress Theme」を使っています。初心者からプロまで、思い通りのサイトを直感的に構築できます。

「ALPHA WordPress Theme」の詳細はこちら

●未来派野郎hiro販売商品

ALPHA WordPress Theme
WordPressがはじめてという方でも直感的な操作でプロ顔負けのシックなサイトを作ることができます。
税金対策ストラテジー「NTS」
アフィリエイトに特化した税理士Kが教える確定申告・節税マニュアル。上位版がおススメです!
YouTube Adds pro
YouTube動画の表現力を最大限に引き出すWordPressプラグイン。未来派製作販売商品です。

One Response to “Facebook Like Boxをレスポンシブデザインに対応させよう”

コメントを残す