WordPressにRecommendations Barを追加
クライアントさんから相談があって、Recommendations Bar なるものを追加することになったのでその覚え書き。
ひょっとするとプラグインとかあるかもしれないのですが、難しい作業ではないのでテンプレートに埋め込むことにしました。
Recommendations Barって何？
たまにページの最後までスクロールすると、にょきっと出てくるボックスがありますよね。
それがRecommendations Barです。
設置されているサイトではウインドウの一番下の右か左に下図のようなバーが現れます。
このバーをクリックするか、ページを最後までスクロールしてしばらく経つと
こんな感じでボックスがニョキっと出てきます。
どういう基準で「おすすめ」なのかよくわかりませんが、恐らく「いいね」が押された数だと思います（未確認）。
ページの回遊率をアップしてくれるパーツといえるかもしれませんね。
設置の手順
- App ID を所得
- 必要なコードを所得
- テンプレートへ設置
の3ステップで完了します。簡単なので是非自分でやってしまいましょう♪
こういうのを設置しようと思うぐらいなならOGPの設定もやっていると思うのでここではApp IDの所得は省略します。
必要なコードの所得
これは下記URLで必要な項目を設定すればOK
https://developers.facebook.com/docs/reference/plugins/recommendationsbar/
URL of the article：記事のURL。WordPressに設置する場合はタグを書き込むことになるでこの段階では何でも良いです。気持ち悪ければ設置するサイトのURLを入れておけばよいでしょう。
Trigger：どのタイミングで表示させるか→普通はonvisibleでOK
Read Time：一番下までスクロール後何秒で表示させるか。最短で10秒です。それ以上短くはできないようです。まぁ、すぐにニョキニョキ出てきたらうっとうしいですよね。
Verb to display：「いいね」か「おすすめ」かを選択。
Side：ウインドウの右下に表示するか左下に表示するか。
Domain：Recommendations Barを表示するドメイン。設置するサイトのドメインをいれておけばOK
他にも変更を加えたいオプションがあるのですが、それはこの画面からは設定できず、コードを修正することになります。
必要な項目を入力して「Get Code」をクリックするとこんな画面が出てきます。
複数サイトを管理している人はアプリIDが正しいことを確認しましょう。
HTML5 版とXFBML版を選択できます。どちらがよいのでしょうね？
WP Social Bookmarking LightでボタンがずれるではXFBML版で不具合があったこともあり、何となく動作が安定しているような気がする（根拠無し）HTML5版を選択しました。
テンプレートへ設置
上で所得したコードのうち1.は<body>の下に設置します。
一般的なWordPressのテンプレートだとheader.php内になると思います。
2.のコードはRecommendations Barを表示したい場所に配置となっていますが、どこに配置してもRecommendations Bar自体はウィンドウの一番下の右か左に表示されます。
ただ、2.のコードを設置した部分までスクロールした時点から10秒後にニョッキとボックスが現れるので、例えば記事のタイトルの下にコードを設置すると、本文を読み終わる前にボックスが出てくる可能性があります。
そうなると多くの読者はうっとうしいと感じるでしょう。
そう考えるとページの一番最後までスクロールしてから表示させるのが普通だと思うので</body>タグの直前に貼り付けるのが妥当かと。
wordpressのテンプレートだとfooter.php内ですね。もし
[html]
<?php wp_footer(); ?>
[/html]
の記述があればその前の方がよいかもしれません。この記述部分にはプラグインが吐き出すソースでゴチャゴチャしますので。
で、2.のコードを少し修正します。
[html]
<div class="fb-recommendations-bar" data-href="<?php the_permalink(); ?>" data-read-time="10" data-site="alive-website.com" num_recommendations="5">
</div>
[/html]
修正箇所は2箇所。
一つ目はdata-href。
これは表示するページ毎に変わるのでthe_permalink()を使って表示されているページのURLが入るようにします。
二つ目はnum_recommendations。
これはボックス内に表示する記事の数です。デフォルトは2ですが「2つだけだと寂しい！」という人はここの数字でコントロールできます。最大値は5です。
作業はこれだけです。
簡単ですね。
効果は果たしてどの程度あるのやら？
コメント
この記事へのコメントはありません。
コメントをどうぞ