【Facebook】Like Box を設置してウェブサイトのファンを増やす : Mac・iPhone・iPad を使い倒したい

さー、いよいよ Like Box を設置しますよー。

Like Box をウェブサイトに配置することで、facebook ページとの連携が可能になります。一度 Like Box の「いいね！」を押してくれた人を facebook ページのファンにすることができます。

facebook ベージをブログのようウェブサイトのページとすれば、ブログに新しい記事を投稿するたびにニュースフィードにその情報を載せることができます。

これで、一定の読者を数を保つことができますし、そこからまたその方の友達へと情報が広がる可能性があるわけです！

では、Like Box の設置方法を見てみます。「いいね！」ボタンと同じように、HTMLコードを入手して、ウェブページにコピペする手順になります。
事前に Facebookページを作成し、Application ID の生成と OGPタグの設置を済ませておく必要があります。

[Facebookとブログ連携はじめの一歩！] ウェブページ・アプリケーションの作成 | C-through the Mac

[Facebook] OGPタグを設定しウェブページの情報をきちんとわかりやすく伝える | C-through the Mac

Like Box コードの取得

Facebook にログインしていない場合は、ログインし、 http://developers.facebook.com/docs/reference/plugins/like-box/ のページに移動します。

それぞれの項目に以下を記入します。

Facebook Page URL

Facebookページの URL です。 (Like Box を設置するウェブサイトの URL ではありませんよ！)

Width

Like Box の横幅です。(単位: ピクセル)
292 以上の数値が推奨されています。実際に設置するウェブサイトのレイアウトも考慮して決めましょう。

Height

Like Box の高さ(縦幅)です。(単位: ピクセル)
何も入力されていない場合、"Show Faces" と "Stream" のオプションを設定しているかどうか、"Show Faces" を設定している場合は、何名以上表示されるかで自動的に決まります。
特に理由がなければ何も入力せず、設置するウェブサイトのレイアウトを考慮する場合は調整しましょう。

Color Scheme

"light" と "dark" が選択できます。
一般的に見かけるのは "light" ですが、設置するウェブサイトの背景色との折り合いで選択しましょう。

Show Faces

チェックをつけると、Like Box の「いいね！」をクリックした人の顔写真が載ります。

Border Color

Like Box 全体の外枠の色です。設置するウェブサイトのレイアウトやお好みで決めましょう。

Stream

Facebookページに投稿した情報が、上からストリーム形式で表示されます。

Header

チェックをつけると、Like Box 上の "Facebookもチェック" のヘッダが付与されます。

上記をすべて入力し終えたところで、"Get Code" をクリックして HTMLコードを入手します。

このコード生成画面で、 [Facebookとブログ連携はじめの一歩！] ウェブページ・アプリケーションの作成 | C-through the Mac で作成したアプリケーションの "Display name" および "App ID" が表示されていることを確認します。

HTMLコードの貼り付け

実際に取得したコードを設置するウェブサイトに貼り付けます。

<body> タグのすぐ後ろに以下をコピペします。
※「いいね！」ボタンやコメントの設置で既に貼付けている場合は不要です。

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/ja_JP/all.js#xfbml=1&amp;appId=406xxxxxxxxxx";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

Like Box を設置したい箇所に以下をコピペします。

<div class="fb-like-box" data-href="http://www.facebook.com/taihomac.web" data-width="500" data-height="450" data-show-faces="true" data-stream="true" data-header="true"></div>

コードの「data-width="500"」「data-height="450"」の数値を変更することで、横幅と高さを変更できます。これを変更して実際の貼り付けた外観を確認しながら、ベストなサイズを決めましょう。

これで終了です！ Like Box の「いいね！」をクリックするとその人数が蓄積され、Like Box や Facebookページで表示されるようになります。

この記事が少しでも役に立ったなーと思った方は、このブログの Like Box に「いいね！」をお願いします！！ (便乗汗)

↓↓↓↓↓↓↓↓↓↓↓↓↓

通常の「いいね！」ボタンの設置方法については以下をご覧ください。