[Facebook]ブログにFacebookページのソーシャルプラグイン「LikeBox」を設置する方法

Tweet
トップへ

こんちくわ。
Facebookページを作ってテンションアゲアゲな@conchikuwaです。
Twitterも楽しいけどFacebookも楽しいっす！！これ間違いないヽ(｀▽´)/
でそんな楽しいFacebookページをブログをご覧頂いている方にも紹介したく、ブログにLikeboxなるものを設置しましたので、設置方法＆カスタマイズ方法をご紹介させていただきやす！！

LikeboxはFacebook公式の誰でも簡単に使えるウェジットでございます！

設置方法＆カスタマイズ方法を紹介って言っておきながら、なんとなくで設置できちゃいます。

でもできれば最後までお付き合いを～～～～m(__)m

Like Boxを設置しよう

まずは↓のリンクから設置画面に移動します。

Like Box – Facebook開発者

あとはテキストボックスやプルダウンメニューから自分のブログに合わせて、調整するだけ。

ね、簡単でしょ(^^♪

設定項目

LikeBoxの設定項目は↓

Facebook Page URL

LikeBoxで表示したいFacebookページのURLを入力します。これはもちろん自分のFacebookページ

Width

LikeBoxの横幅を自分のブログの設置場所に合わせて入力します。私は240としました。

Height

LikeBoxの縦幅を自分のブログの設置場所に合わせて入力します。Facebookページのストリームを表示させる場合は少し長めの方がいいですが、私は表示させないので、275としました。

Color Scheme

LikeBoxの全体の色合いを”light”と”dark”から選択。ブログが白ベースのデザインなら”light”がいいかな。もう少し細かく設定できればいいのに。。。

Show Faces

Facebookページをいいねしてくれた人のFacebookのアイコンを表示させるか選択。表示させる場合は”Show Faces”にチェックを入れます。

Border Color

枠線の色を指定します。ブログのデザイン的に枠線が無い方がよかったので”＃FFFFFF（白）”としました。

Stream

Facebookページの投稿内容を表示するか選択します。表示させる場合は”Show Stream”にチェックを入れます。

Header

LikeBoxのヘッダーを表示させるか選択します。表示させる場合は”Show Header”にチェックを入れます。

入力が完了したら”Get Code”をクリックしてブログに貼り付ける為のコードを取得します。取得できるコードには↓の3種類があり、環境に合わせて設置して下さい。

HTML5版コード

XFBML版コード

IFRAME版コード

正直違いはわかりません(^^ゞとりあえずHTML5版を選択しました。

↓のようにLikeBoxを全ページ共通の右サイドバーに設置してみました。

ブログのデザインにも合っていてなかなかいい感じかな。

あとデフォルトでは日本語で表示されるんですが、うちのブログの場合、LikeBoxの横幅が240と狭く”あなたが「いいね！」と言っています”という文言が改行して見づらいので、スクリプトコードの5行目の”ja_JP”を”en_US”に変更してみました。

Before

&lt;script&gt;(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 = &quot;//connect.facebook.net/ja_JP/all.js#xfbml=1&amp;appId=291904744162618&quot;;
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));&lt;/script&gt;

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&appId=291904744162618";

fjs.parentNode.insertBefore(js, fjs);

}(document, 'script', 'facebook-jssdk'));</script>

After

&lt;script&gt;(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 = &quot;//connect.facebook.net/en_US/all.js#xfbml=1&amp;appId=291904744162618&quot;;
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));&lt;/script&gt;

var js, fjs = d.getElementsByTagName(s)[0];

if (d.getElementById(id)) return;

js = d.createElement(s); js.id = id;

js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=291904744162618";

fjs.parentNode.insertBefore(js, fjs);

}(document, 'script', 'facebook-jssdk'));</script>

これで、”あなたが「いいね！」と言っています” が ”You like this.” と表示されてスッキリしました。