WordPressに『Like Box』を設置 / Facebook基礎

FacebookのLike Box

前回までの記事でFacebookページ作成方法を3回に分けて紹介しましたので、今回は『Like Box』の設置方法を紹介します。

『Like Box』は設置したブログやサイトからFacebookページの『いいね』をクリックすることができる外部サイトとFacebookページを連動させるソーシャルプラグインの1つです。

Step01

まずは下記URLのLike Boxページにいきます。
http://developers.facebook.com/docs/reference/plugins/like-box/

Like Boxページには下の画像のような入力欄が表示されていますので、画像の解説を参考に各入力欄の項目を埋めてください。

①： Facebook Page URL
制作したFacebookページのURLを入れてください。
②： Width
LikeBoxの横幅を設定します。
③：Color Scheme
LikeBoxの背景の色を『light』か『dark』の2種類から選択します。
④： Show Faces
『いいね』を押してくれたユーザーのプロフィール写真の表示・非表示を選択します。
⑤： Border Color
Like Boxのボーダー色を変更することができます。
⑥：Stream
Facebookページのウォールに投稿したコメントが新着順に表示されます。チェックをはずすと表示されなくなります。
⑦：Header
Like Boxの一番上のエリア、青い背景に白文字で『Find us on Facebook』と書かれている箇所の表示・非表示を選択できます。

すべての選択が完了したら『Get Code』ボタンをクリックしてください。

Step02

『Get Code』ボタンをクリックすると画面上に『iframe』『XFBML』の2種類のコードが表示されます。今回は『iframe』のコードを使用します。

画面に表示されたコードをコピーして『Like Box』を表示したい場所にペーストしてください。その時に注意したいのが『Like Box』の高さの値です。横幅は設定することができたと思いますが高さは調節する項目欄がありませんでした。高さを調節する場合は、下画像の青線がひかれているheightの値を2箇所変更してからペーストしてください。

以上で設定は完了です。ソースコードをペーストしたページに『Like Box』が表示されていたら完了です。

FacebookのLike Boxのカスタム方法 ー応用編（おまけ）ー

Like Boxについて調べていたらデザイン自体をカスタマイズすることができるみたいです。私も今度試してみようと思いますが、もし興味がある方は下記のブログ記事に掲載されていたので参考にしてみてください。

参考サイト：

• FacebookのLikebox(いいね！ボックス)を結構カスタマイズしちゃいたい。　【Liglog】
• Facebookページをアピール出来るソーシャルプラグイン・Likebox（いいね！ボックス）をオリジナルデザインに変更する方法　【かちびと.net】