Like Box(ライクボックス)の設置方法

Like Box(ライクボックス)とは、当サイトの右側メニューにも表示されている、様々なWEBサイトに設置できるプラグインです。

Like Boxを設置することにより、次のことが可能になります。
※FacebookデベロッパーLike Boxのページの説明文より

  • 何人が「いいね!」をしているか、またその内自分の友達が何人「いいね!」をしているかを確認出来ます
  • Facebookページの最新情報を見ることが出来ます
  • Facebookページに移動すること無く、「いいね!」をすることが出来ます

つまり、独自のWEBサイトとFacebookページをつなぐ事が出来るのです。それにより、WEBサイトからFacebookページ、FacebookページからWEBサイトへ、それぞれユーザーを誘導することが出来ます。

Like Boxの活用方法

■「更新情報」代わりに

例えばWEBサイトの「更新情報」は、CMS(ブログシステム等)などではコンテンツを追加した際に自動的に表示させることも出来ます。しかしそうでない場合は更新情報欄に都度書きこまなければなりません。WEBサイトの運用を専門業者に依頼している場合は特に料金が発生してしまうケースもあります。

このLike Boxを「更新情報」として設置しておけば、Facebookページのウォールに情報を書き込む度に自動で更新されますので、更新情報を自社で手軽に更新したい場合にも応用できます。

■アクセス数UPに

WEBサイトへのアクセス数UPにも役立ちます。Facebookは人と人とをつなぐソーシャル・ネットワーキング・サービスです。「いいね!」がクリックされるとクリックしたユーザーの友人たちへも自動的にその情報は共有されます。

アクセス数UPを図るのであれば、Facebookページのウォールにて独自のWEBサイトへのリンクをシェア(共有)をすることにより、WEBサイトへの誘導、アクセス数UPも可能です。

Like Boxの設置方法

まずは、下記URLにアクセスします。
http://developers.facebook.com/docs/reference/plugins/like-box/

設定項目は全部で7項目あります。

  • Facebook Page URL
    FacebookページのURLです。このURLは初期段階ではFacebookより自動的に割り当てられた長い文字列のURLです。
    独自のURLを取得したい場合はこちらを参考にしてください(Facebookページの個別URL取得方法
  • Width
    Like Boxの横幅です。単位はピクセルですので、自身のWEBサイトに合ったサイズを入力しましょう。
  • Color Scheme
    Like Boxの背景色を変えれます。「light(薄い)」「dark(濃い)」の2択です。自身のWEBサイトに合った色を指定すると良いでしょう。
  • Show Faces
    「いいね!」をクリックしている人の顔(アイコン)の表示、非表示設定です。たくさんの「いいね!」が集まると、アイコンを表示させておくことにより、大変多くの仲間たちがそのFacebookページを支持していることが伝わり、より多くの「いいね!」を集めることにつながります。もしも自分の友達が「いいね!」をクリックしているのであれば、そのアイコンが優先的に上位に表示されるため、親近感が高まり一層効果的です。
  • Border Color
    Like Boxの外枠(ボーダー)の色を指定することが出来ます。ここには「#」から始まる、英数字で6桁のカラーコードを入力します。例えば枠の色を「白」としたい時は「#FFFFFF」と入力します。
  • Stream
    Stream(ストリーム)とは、サムネイル画像(設定した時のみ)・タイトル・説明文などから成り立つ情報です。チェックボックスのON・OFFにて表示・非表示を切り替えれます。「Like Box」の活用方法にて提示した「更新情報」代わりに使用する場合はON(表示)の状態にしておきましょう。
    Like Boxの設置場所が横幅が狭すぎる場合は文字情報のレイアウトは崩れやすい傾向にありますので、非表示設定も良いと思います。
  • Header
    こちらはLike Boxの最上部分です。Find us on Facebook(Facebook上で見る)のリンクや、Facebookのロゴの表示・非表示を設定します。

上記7項目をそれぞれ設定し、最下部の「Get Code」をクリックすればWEBサイトに貼り付けるコードが発行されます。この時「iframe」と「XFBML」の2種類が表示されますが、基本的にはどちらでも結構です。ただし、現時点(2011年8月17日)では表示のされ方が若干異なるようです。

「iframe」を選択した場合、
Header部分の「Find us on Facebook」は日本語表記で「Facebookもチェック」と表示されますが、「Show Faces」にチェックを入れているにもかかわらずアイコンが表示されません。

「XFBML」を選択した場合、
Header部分の「Find us on Facebook」は英語の原文のまま表示されますが、「Show Faces」にチェックを入れていればアイコンは正常に表示されます。

関連記事: