Facebookが提供しているソーシャルプラグインの数々。今やブログを運営しているとソーシャルは切っても切れない関係なわけで、当ブログでもFacebookのソーシャルプラグインをチラホラと導入しています。
そんなプラグインのひとつである「Recommendations Bar」がベータ版から正式版になっていたので、うちでも導入してみました。

Recommendations Bar

ブログを読み進めてスクロールしていくと、ブラウザの右下に上のようなボックスが表示されます。Facebookで「いいね!」された記事が2件ランダムに表示されるようになっているんですね。

当ブログではこれまで、同種の機能を持つ「SimpleReachSlide」というやつを導入していたんですが、表示件数や、「いいね!」数の表示がされるといった点から、こちらのほうがCTR高そうかなーという印象もあり、こちらに差し替えることにしました。

導入方法は至ってカンタンです。

1) Javascript SDKを導入する

Facebook CommentsやLike Boxを導入済みの場合はすっ飛ばしてください。導入の際にはApp IDが必要なので、初めての導入の場合は以下からアプリ作成しましょう。
Facebook開発者 

<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.async = true;
  js.src = "//connect.facebook.net/ja_JP/all.js#xfbml=1&amp;appId=ここにApp ID";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

挿入位置は<body>直下になります。変なところに入れないように気をつけてくださいな。ちなみに非同期のコードにしてあるので、表示速いです。

2) 任意の場所にプラグインコードを入れる

こちらはhtml5版のコードです。xfbmlやiframeを使いたいという場合は、以下から別途コードを取得します。
Recommendations Bar - Facebook開発者 

<div class="fb-recommendations-bar" data-href="ここにURLを入れる" data-trigger="20%" data-read-time="10" data-action="recommend" data-site="ここにドメインを入れる"></div>

放り込めるパラメータについては以下のとおり。

  • data-href
    ここにはURLを入れます。多くのブログの場合は記事を個別に吐き出すタグがあるので、それを入れればOK。
    WordPressの場合であれば<?php the_permalink(); ?>ですね。 ちなみに、この部分なくてもちゃんと動きます(確認済み)。
  • data-trigger
    こちらはページをどのていどスクロールしたらRecommendations Barを展開するか指定している部分です。上記の場合だと20%ほどスクロールしたら展開するようになっていますが、次の項目の数字が優先されます。
  • data-read-time
    ページが開かれてからRecommendations Barを展開するまでの秒数です。デフォルトでは30秒が指定されています。また、この項目を入れない場合も30秒が自動的に指定されます。さすがに30秒は長いので最小値の10秒を指定してあります。
  • data-action
    これは、表示する際に「おすすめ」「すすめています」と表示させるか、「いいね!」「いいね!しています」と表示させるかを決めるものです。上記では「recommend」となっていますが、「いいね!」のほうがいい場合はlikeに差し替えましょう。
  • data-site
    ここには導入するサイトのドメインを入れます。うちであればmbdb.jpです。この項目自体はあってもなくても大して違いはないと思いますが、設置の際にエラーが出る恐れもあるので、上記には入れておきました。
  • data-side
    Recommendations Barを左右のどちらに配置するかを指定できます。leftあるいはrightを付与しましょう。
    ちなみになければないで、勝手に右側に表示されます。
  • data-num-recommendations
    Recommendations Barに表示するおすすめ記事の件数を制御できます。
    最小でデフォルトの2件、最大で5件まで指定が可能です。付与する場合は、data-num-recommendations="3"とかやればOKです。
  • data-max-age
    表示されるおすすめ記事を、作成された日数から制御することができます。
    有効な値は最小で1、最大で180まで指定することができます。

なお、プラグインコードの挿入位置ですが、基本的には<body>〜</body>の中であればどこでも構いません。
当ブログでは記事を吐き出すコードの直下にぶちこんであります。

Facebookの類似プラグイン「Recommendations Box」と比較してCTRが3倍にもなったという話もありますが、実際のところサイトやブログに及ぼすかは、正直そのサイトやブログ次第ですから、まぁ額面通りには受け取らないほうがいいかと。

一応うちでも1週間ほどのデータで比較してみたいとは思います。

追記:

「OZPAの表4」でもコレ参考に実装しています。紹介ありがとん!
「いいね!」されたオススメ記事をひょこっとブログ下部に表示させるFacebookアプリ「Recommendations Bar」を導入してみた | OZPAの表4 

追記:

「ネタフル」にも設置が完了しました。一応デザイン担当なもので。
[N] オススメ記事を右下にヒョロリと表示するFacebook「Recommendations Bar」設置する方法 

追記:

表示件数を制御するdata-num-recommendationsについて書き加えました。

追記:

表示する記事の日数範囲を指定するdata-max-ageについて書き加えました。

Commentsコメントしてもらえると励みになります