コンテンツマーケティングを行う上で、より多くのファンを獲得することは非常に重要だ。なぜなら、ファンの数が多くなればなるほど、コンテンツがシェアされて、より多くの人に届けられる可能性が高くなるからだ。
そして、ファンの獲得のために、まずやっていおきたいのが、Facebook の LikeBox をサイトに設置することだ。
そこで、ここでは、例として WordPress に LikeBox を設置する方法をご紹介する。
LikeBox が2015年6月23日でサービス終了しました。代わり利用できる PagePlugin という新しいサービスは、ここでの解説内容よりもっと簡単でシンプルとなっています。以下はあくまで参考までにとどめてください。
１．Facebook Developers でコードを取得
LikeBox を設置するには、まず、Facebook Developers にアクセスしよう。
サイトは英語だが、操作は簡単なので安心して欲しい。
１−１．所定項目の入力
まずは下図の所定の入力項目にそれぞれ入力しよう。
入力項目は次の通りだ。
- Facebook Page URL：自分の Facebook ページの URL を入力
- Width : LikeBox の横幅を数字で入力
- Height：LikeBox の高さを数字で入力
- Color Scheme：light か dark の２種類から選択
次に任意のチェックボックスにチェックをいれよう。
- Show Friend’s Faces：Facebook ページにいいねを押しているファンの顔写真の表示
- Show Posts：Facebook ページのタイムラインの表示
- Show Header：ヘッダーの表示
- Show Border：ボーターの表示
これらに変更を加えるたびに、変更後の LikeBox が下のプレビュー欄に表示されるので、確認しながら設定しよう。
その後 ” Get Code ” をクリックしたら、コードを取得することができる。
１−２．コードの取得
” Get Code ” をクリックすると、以下のようにコードが表示される。
まず注目して欲しいのが、コードには３つの種類があるということだ。まずは、それぞれのコードの違いを理解しておこう。
１−２−１．LikeBox の３種類のコード
コードには、
- HTML5：最新の HTML 言語
- XFBML：Facebook が独自に開発した言語
- IFRAME：Inline Frame という昔からある技術
の３つのバージョンがある。
結論から言うと、HTML5 を使うことをおススメする。
理由は、ソース的にもっとも軽く表示が早いからだ。XFBML も表示が早いが、これはプログラミングに精通している人でなければ使いこなせないので、技術者の方以外は気にする必要がない。
IFRAME は Inline Frame と言って、自分のサイト上に、他のサイトのページを表示させる技術のことだ。他サイトからデータを引っ張ってくることになるので、どうしても表示速度が遅くなる。
以上のことから、ここでは HTML5 をメインに解説していく。
１−２−２．コードの取得方法
まず、左側のHTML5 が選択されていることを確認しよう。
HTML5 版では、２つのコードが表示される。
上段のコードは、スクリプトというプログラミング言語だ。細かく理解しておく必要はないが、サイトの <body> タグ内に設置しておかなければいけない。下段のコードは上段のスクリプトコードを読み込んで、LikeBox を表示させるためのコードだ。
つまり、サイト内に設置した上段のスクリプトコードを、下段のコードが読み込んで LikeBox が表示されるという形になる。
この２つのコードを、メモ帳などにコピー & ペーストしておこう。
今では WordPress のほとんどのテンプレートが HTML5 で作られている。しかし稀に HTML5 以前のコードで作られているテンプレートがある。その場合、LikeBox が表示されない可能性がある。その時は IFRAME 版を選択するようにしよう。ちなみに IFRAME 版ではスクリプトコードは不要なのでコピーするコードは１つだけになる。
２．WordPress に Likebox を設置
次に、WordPress に Likebox を設置してみよう。
ここでは例としてサイドバーに表示させてみよう。やることは、先ほどの２つのコードをテキストウィジェットに貼付けるだけだ。もし、上で解説したスクリプトコード（上段のコード）を、既にサイト内のどこかに設定している場合は、LikeBox の表示コード（下段のコード）だけを貼付ければ良い。
ウィジェットに関して分からないことがあれば、『 WordPress ウィジェットの追加と編集方法』で、ウィジェットの追加・編集・並び替え・停止・削除の方法を全て解説しているので確認しよう。
貼付けたら、右下の「保存」をクリックしてからサイトを確認しよう。
もし表示を調整したければ、ウィジェット設定画面でコードを直接編集すると早い。
編集可能な部分は、下の太字で表示した６つだ。
<div class=”fb-like-box” data-href=”https://www.facebook.com/bazubu” data-width=”240″ data-height=”420″ data-colorscheme=”light” data-show-faces=”true” data-header=”false” data-stream=”false” data-show-border=”false”></div>
data-width とdata height は数字を変更すると、それぞれ横幅と高さを調整できる。他の４つに関しては、 ” true ” にすると有効に、” false ” にすると無効になる。
これは実際にいじってみると理解が早いだろう。
最後の「保存」をおして確認すると、WordPress のサイドバーに Likebox が表示されるようになっているはずだ。
３．まとめ
Facebook の LikeBox の設置方法に関しては以上だ。
もちろん、LikeBox は、サイドバー以外の場所にも自由に設置することができる。
おススメは、サイドバーと記事下の２カ所だ。しかし、普通のテンプレートの場合、ウィジェットでサイドバーを編集することはできるが、ウィジェットで記事下を編集することはできない。そのため、新たに PHP と呼ばれるファイルを追加して、その PHP ファイルの中に、LikeBox のコードを入力する必要がある。
新たなPHPの設置は、かなり技術的な内容になるので、ここでは、そこまでは踏み込まないが、おいおい解説記事を用意したいと考えている。
何はともあれ、多くの人に「いいね！」を押してもらえるように、良質なコンテンツを作ることに全力で挑もう。
またサイドバーの設定に関しては、あわせて以下の３つのページも参考にしておこう。
お世話様です。バズ部さんのサイトを見ながら「設定」をしているのですが
このWordPress に Likebox を設置だけが何度やってもサイトのサイドバーに
表示されません。やり方がまちがっているのでしょうか？
瀬野様
お問い合わせの件ですが、LikeBoxのコードはHTML5をお使いでしょうか？
その場合、テンプレートにスクリプトコード（上段のコード）を追記する必要があります。
すぐにでもLikeBoxを表示させたいのでしたらIFRAMEのコードをおススメします。
これはテンプレートを修正する必要がありません。
Facebookを埋め込む際のコードについて、質問があります。
html5の方が表示が速いと言う事ですが、
違うサイトで
「html5のコードも結局はjavascriptでiframeを生成しているのでiframeの方が速い」
と仰っているものがありました。
http://actyway.com/7720
上記のサイトが言っている事は正しいのでしょうか？
サイト表示の高速化に取り組みたいと思っていて、
どちらの埋め込みコードを使うべきかと悩んでおります。
どちらが速く表示されるのでしょうか？
色々な情報を分かりやすく説明していただき、役立たせて頂いております。
ありがとうございます。
ご質問いただき、ありがとうございます。
おっしゃるとおりバズ部では html5 を推奨しています。
「１−２−１．LikeBox の３種類のコード」に記載した内容は便宜上、遅い・早いという表現を使ってますが、
https://lucy.ne.jp/bazubu/how-to-add-facebook-likebox-23418.html
これはコンテンツ全体（記事１ページ全体）の表示を考えた時、html5 のコードの方が「いいね」ボタンがスムーズに表示される、という意味で書いています。
理由は html5 の場合、“ 非同期 ”と呼ばれる記事ページが読み込まれるのとは別で html5 のコードが読み込まれる仕組みにあります。
いつもバズ部様の記事を参考にさせてもらい、お世話になっております。
「Facebook Developers」にアクセスすると
「With the release of Graph API v2.3, the Like Box plugin is deprecated and will stop working on June 23rd 2015. Use the new Page Plugin instead. The ｛Page Plugin｝ allows you to embed a simple feed of content from a Page into your websites.」
というのが出てき、｛Page plugin｝をクリックしてLikeboxの設定を行ったのですが、「Facebook Page URL」のところに自分のFacebookのURLを打ち込むと「Facebookページurlが無効なものです」と表示され、likeboxを作ることができませんでした。
どうすればよいでしょうか？よろしくお願いします！
Yusukeさん、情報のご提供ありがとうございます。
解決策ですが、FacebookページのURLを間違えなく入力するとできるかと思います。（例．バズ部の場合、https://www.facebook.com/BazuBu）
またウェブさえさんの『FacebookのLike Boxは2015年6月23日で終了。Page Pluginに変わります』という記事が参考になるかと思います。
こちらの記事内容はすぐに更新しなければいけませんね。
返信が遅れて大変申し分けありません！
ありがとうございます。試してみます！^ ^
お世話になっております。
Page Pluginにアクセスして自分のfacebook URLを入力しているのですが、
何度試みてもエラー表示が出てしまいます。
※「エラー: FacebookページのURLが無効です。」というもの。
正しくURLを入れているのですが、facebookでの設定が間違っているのでしょうか？
ちなみにコンテンツを見ることが出来る人は「公開」にしてあります。
解決策を教えて頂けたらと思います。
「Facebook Page URL」にはあきかんさんのURLではなく、facebookページのURLを入れてください。
facebookページのURL以外のURLは無効となります。
例を挙げると、バズ部の場合は「https://www.facebook.com/BazuBu」となります。
「https://www.facebook.com/【あきかんさんの作られたURL】」を入力してください。
facebookページについては、SMMLabさんの「Facebookページの作り方～初めてでも簡単！11の手順～」が参考になります。
facebookページのURLが
https://www.facebook.com/yotsukaidou/
なのですが、このURLで作成すると、サイドバーに表示が出来るのですが、あきかんさんと同じように、エラー: FacebookページのURLが無効です。との赤い文字が表示されます。
自分で作られたURLを入力してくれとのことですが、一年前くらいに作成したのもあり、忘れているのもあり、自分のフェイスブック内の設定などを確認しているのですが、見つけることが出来ません。
是非ご教示願います。
かつさん、コメントありがとうございます。
LikeBoxのサービスはすでに終了していますので、
代替のサービス（PagePlugin）をご利用いただけますと解決するかと思います。
https://developers.facebook.com/docs/plugins/page-plugin