facebookのいいね！が増える？公式LikeBoxの作り方・設置方法

facebookページをアピールできる公式ソーシャルプラグイン

最終更新 [2015年3月20日]

キーワード：いいね！, ソーシャルプラグイン, 公式,

facebookの「いいね！ボックス」ことLikeBoxの作り方、サイトやブログへの設置方法です。

ブログやWEBサイトのサイドバーやら記事の下などによく設置してあるfacebookの↑
『Facebookもチェック。○○人が「いいね！」と言っています。』というやつです。

そのサイトのサイト名やサムネイル、そのサイトに対していいね！している自分の友だちなどが表示されていたりします。

これはfacebookではLikeBoxと呼ばれているもので直訳すると「いいね！ボックス」です。
ソーシャルプラグインといわれるものの1つでfacebook公式で作ることができます。
設置もコードをサイト内に埋め込むだけでとってもカンタンです。

このLikeBoxをusedoorでも作って設置してみたくなったので作り方・設置方法のメモ書きです。

facebookのLikeBoxの作り方・設置方法

usedoorのやつ作ってみた。

⇒ usedoorのfacebookページ

これから紹介するやり方でusedoorのfacebookページのLikeBoxを作ってみました。
facebookでも最新情報や気になったことをチラチラと発信していますのでどうぞ「いいね！」してやってくださいm(._.)m

facebookDevelopersからカンタンに作れちゃう！

LikeBoxはfacebookDevelopersのページからカンタンに作成できます。
↓にアクセスします。
⇒ https://developers.facebook.com/docs/plugins/like-box-for-pages

↑にアクセスするには「個人のユーザーでログインしている」必要があります。
facebookページのユーザーでログインしているとユーザー変更を求められますぜ。

Facebook Page URL

LikeBoxに使いたいfacebookページのURLを入力します。
usedoorだと「https://www.facebook.com/usedoor」となります。

Width

作成するLikeBoxのヨコ幅を設定します。
指定しない場合、横幅が300ピクセルのLikeBoxを表示します。

自分のサイトの設置したい場所の幅に合わせるのがいいと思います。

Height

作成するLikeBoxのタテ幅を設定します。
指定しない場合、縦幅が270ピクセルのLikeBoxを表示します。

Show Friends’ Faces：友だちの顔を表示するかの設定
Show Posts：このfacebookページの投稿を表示するかの設定

Color Scheme

LikeBoxの全体のカラー設定
といっても白基調の「light」か黒基調の「dark」しか選択できませんが。。

Show Header：LikeBoxの上の「Facebookもチェック」の有無
Show Border：LikeBoxを線で囲むかどうかの設定

全部の設定が終わったら「Get Code」をタップしてコードを取得します。

コードは2つあります。
上のコード：＜body＞タグの下に書いておくfacebookとのデータのやり取りを行うjavascript
下のコード：Likeboxを呼び出すコード
となります。

サイト・ブログに設置する

あとはサイトやブログに設置するだけでOKです。
サイトのソースを開いて＜body＞が始まる部分を探します。
＜body＞タグのすぐ下に↑で表示された1つ目のコードを埋め込みます。

<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/sdk.js#xfbml=1&version=v2.0";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

ここからページ構成開始

<body>

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/sdk.js#xfbml=1&version=v2.0";

fjs.parentNode.insertBefore(js, fjs);

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

ここからページ構成開始

次に設置したい場所に2つ目のコードを埋め込みます。

サイドバーなどに
<div class="fb-like-box" data-href="https://www.facebook.com/usedoor" data-colorscheme="light" data-show-faces="true" data-header="true" data-stream="false" data-show-border="true"></div>

1 2	サイドバーなどに <div class="fb-like-box" data-href="https://www.facebook.com/usedoor" data-colorscheme="light" data-show-faces="true" data-header="true" data-stream="false" data-show-border="true"></div>

以上で完了です。

これでLikeBoxがWEBサイトに埋め込むことができます。

facebookのソーシャルプラグインの中でも人気の高いLikeBoxの設置方法は以上です。
サイトやブログを運営されている方は是非とも使ってみてくださいなー。

usedoorのFacebookページも引き続き宜しくお願いしますm(_ _)m

⇒ usedoorのfacebookページ

< この記事をシェア >