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

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

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

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

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

設定内容は以下のとおりです。
Facebookレコメンデーションバーの設定

  • 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ソースを書き換えることで変更可能です。
Facebookレコメンデーションバー コード取得

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

取得したコードを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()が使えませんので注意してください。

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

この投稿へのコメント

コメントはありません。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

この投稿へのトラックバック

トラックバックはありません。

トラックバック URL