FacebookのレコメンデーションバーをWordPressに実装する

Facebookのレコメンデーションバーを見かけることが多くなってきました。
レコメンデーションバーはページ右下(設定により左下)に表示され、おすすめ記事をピックアップして表示してくれるFacebookのプラグインで、Facebookのテストによるとおすすめ記事は以前のレコメンデーションボックスと比べてクリック数が3倍となったとのこと。

このレコメンデーションバーをWordPressに組み込む方法をご紹介します。

レコメンデーションバーのコードを取得する

まずはFacebook DeveloperのPluginsからRecommendations Barのページへ行き、表示条件などの設定を行った上でコードを取得します。

設定内容は以下のとおりです。

• URL of the articles (記事のURL)
  実際にレコメンデーションバーを組み込むページのURLです。
• Trigger (トリガー)
  • onvisible
    最も単純な方式で、プラグインタグを設置した場所が読み込まれた際に展開されます。
    本来、記事末尾等にプラグインタグを設置して利用するためのものです。
  • X％
    ページがX%スクロールされた際に展開されます。
    スクロール値は取得したコードのdata-trigger=”X%”のXの部分を書き換えることで設定が可能です。
  • manual
    手動で展開します。
    javascriptからFB.XFBML.RecommendationsBar.markReadをコールすることでも展開可能です。
• Read Time (展開までの時間)
  広がるまでに何秒待つかを設定でき、最小値は10、初期値は30です
• Verb to display (ボタンの種類)
  Likeかrecommendのどちらのボタンを設置するかを設定します
• Side (表示位置)
  表示される位置を左または右に設定できます
• Domain (サイトのドメイン)
  サイトのドメインを設定します
  SDK読み込みのために使用するFacebookアプリの設定で許可されているドメインでなければなりません

Get Codeをクリックすると、htmlコードが取得できます。
設定値はLike boxなどと同様、後からhtmlソースを書き換えることで変更可能です。

なお、Likeボタンは取得したコードのappIdがなくても動作しましたが、レコメンデーションバーはappIdが無いと動作しないようです。
appIdの取得にはアプリを作成する必要があり、アプリを作るためには開発者登録が必要となります。
作成したアプリは、Website with Facebook Loginに必ずレコメンデーションボックスのDomainと一致する内容設定しておく必要があります。

取得したコードをWordPressに対応させる

レコメンデーションバーのコードを取得したら、早速WordPress用に書き換えて行きましょう。
取得したコードのスクリプト部分(コード取得画面上部)は、bodyタグ直後にそのまま設定します。

htmlコード部分は、記事ブロックの末尾に設置するのが望ましいとされていますので、single.phpやpage.php内のthe_post()を行ったブロックの最下部にでも以下のコードを追加します。

<div class="fb-recommendations-bar" data-href="<?php the_permalink(); ?>" data-read-time="10" data-site="<?php bloginfo('url'); ?>"></div>

上記サンプルではURLを記事のパーマリンクに、トリガーはonvisible、リードタイムは10秒、ドメインにはブログ設定のURLを使用しています。
postブロックの中でないと、the_permalink()が使えませんので注意してください。

また、上記コードはレコメンデーションバーの性質的に、記事ページに設置されるべきものとし、インデックスページやアーカイブページには対応していません。