Like Boxの設置

はじめに

当たり前ですが、Like BoxはFacebookページを開設していないと設置できません。もしも、まだFacebookページを持っていない場合は「Facebookページを作成する手順」を参考に新しくページを作成してください。Facebookページを開設したら、以下に進みます。

Like Boxの作成

facebook developersにアクセスします。すると、以下のような項目があるので、各項目を順に設定していきます。

設定項目

Facebook Page URL

あなたのFacebookページのURLを入力します(サイトやブログのURLではありません)。

Width

Like Boxの幅を入力します。250pxなら「250」

Height

Like Boxの高さを入力します。250pxなら「250」

Show Friends’ Faces
「いいね」を押してくれた人のサムネイル表示の有無。表示させたい場合はチェックを入れましょう。
Show Posts
あなたのFacebookページのタイムライン表示の有無。表示させたい場合はチェックを入れましょう。

Color Scheme

Like Boxのカラーをプルダウンから選択します。「light」が一般的な色合いです。

Show Header
Like Box上部の帯を表示させるかどうか。不要な場合はチェックを外します。
Show Border
Like Boxの周囲の枠線を表示させるかどうか。不要な場合はチェックを外します。

設定が完了したら、下のほうにある「Get Code」をクリックします。

コードの選択

「Get Code」をクリックすると、下図のようなポップアップが表示されます。

画面には「URL」「HTML5」「XFBML」「IFRAME」の4つのタブがありますが、URLはリンク用のコードが表示されるだけなので、それ以外の「HTML5」「XFBML」「IFRAME」の中からそれぞれの環境に応じたコードを選びます。この3つのコードは、大きく分けると以下の2つの用途に分けられます。

HTML5 or XFBML
Javascriptが使える環境のサイト・ブログ用のコードです。
IFRAME
Javascriptが使えない環境用のコードです。

HTML5とXFBMLは、いずれも「JavaScript SDK」というスクリプトを使ってFacebookからのデータを取得・表示させる仕様です。これが使えない環境の人はIFRAME版を使います。ただ、一般的には記述が簡単なIFRAME版を選ぶ方が多いようです(もしくはスクリプトの実行が重いから、などの理由も…)。

(ちなみに「いいね」ボタンのXFBML版とIFRAME版だと、ボタン押下後にコメント入力用のポップアップが表示されますが、Like Boxの場合はないようです)

コードの配置

利用するコードを選択したら、サイトやブログの任意の場所にペーストします。

無事に表示が出来れば完成です。表示されないという場合は、ソースコードやボックスの幅や高さの指定方法を確認してみましょう。