[Blogger]オススメ記事をヒョコッと表示してくれる！Facebookの【Recommendations Bar】の導入方法。

こんにちは！すなふ(@sunafu35)です。

最近、色々なブログで見かけるようになって気になりだしていた、Facebookの【Recommendations Bar】という、サイトの右下にヒョコっとオススメ記事を表示してくれるツールを導入してみました！

それに伴って、複眼RSSをちょっと休止に。どうしても重いのも気になってましたからね。

参考リンク

[N] オススメ記事を右下にヒョロリと表示するFacebook｢Recommendations Bar」設置する方法

最近、見かけるようになったのですが、ブログの記事の右下あたりにヒョロリと表示される、Facebookの｢Recommendations Bar」をネタフルでも設置してみました！ ...

誰でもカンタン! Facebookの｢Recommendations Bar｣を設置する方法 | [M] mbdb

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

導入方法

導入方法は、簡単のようなちょっと手こずるような、微妙な難易度。
すでにFacebookの【Like Box】などを導入していて、OGPの設定などで「App ID」を持っている場合は、お手軽モードになります。

Facebookのアカウント作成からしようと思うと、少し面倒かな？

1.) Javascript SDKを導入する

上記のように、【いいねボタン】や【Like Box】を導入したことがなくて、「App ID」もない場合は、この設定が必要になります。

あるよ！って人は、すっ飛ばして「プラグインのコードをHTMLに追加する」に進んで下さいね。

■Facebook開発者
■月間10万PVに貢献！Facebookからのアクセスを5倍に増やす方法 | gadget or gimmick

まずは、「App ID」の取得から、上に挙げたリンク記事を参考にしながら、アプリを作成して、「App ID」を取得してください。IDが欲しいだけなので、アプリ自体はテキトーに作成します。

「App ID」が取得出来たら、IDを含んだJavascript SDKコードをテンプレートHTMLに追加します。

Recommendations Bar - Facebook開発者

▲まずは何も変更せずに、「Get Code」をクリックして、Javascript SDKコードを取得。

【APP_ID】の部分を、取得しておいた「App ID」に置き換えます。

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

▲このコードを、<body>直下に挿入。コードは非同期読み込みになるようにしてますよ～。

●テンプレートHTMLは、
「管理画面＞テンプレート＞HTMLの編集」から！

ちなみに、<body>直下が公式でも指示される場所ですが、</body>の上あたりに入れても、このブログでは問題なく動いているようです。

2.) プラグインのコードをHTMLに追加する

次は、オススメボックスを表示させるためのコードをテンプレートHTMLに追加します。

Recommendations Bar - Facebook開発者

▲再びFacebookのプラグイン作成ページから、今度は必要事項を入力してコードを作成。

▲画像のように設定をしていって、「Get Code」をクリック。
表示されるコードを、軽く変更していきます。

<div class='fb-recommendations-bar' data-action='recommend' data-expr:href='data:post.url' data-read-time='10' data-site='あなたのサイトドメイン名を入力' data-trigger='40%' num_recommendations='3'/>

設定値は、

data-action='recommend'
「オススメ」の表示にする設定。「いいね」がいい場合は、【like】に変更します。

data-expr:href='data:post.url'
Bloggerでの、個別記事URL取得の為。
data-href="https://developers.facebook.com/blog/post/559/" と表示されている部分を書き換えます。
(追記：このパラメータ、なくても動きますね。動作に違いがあるのかは良くわかりませんでした。)

data-read-time='10'
サイト表示から何秒後に展開するかを設定。デフォルトでは30秒です。

data-site='あなたのサイトドメイン名を入力'
サイトドメイン名を入力して下さい。

data-trigger='40%'
40%スクロールすると表示されるという設定・・・なのですが、秒数指定が優先してしまって、うまく動いてないかも。

num_recommendations='3'
おすすめとして表示する記事の数を設定します。デフォルトのコードでは表示されていないパラメータなので、追加する必要があります。最大数は5。

コードは、<body>から</body>の間ならどこに入れてもいいようです。
私は、</body>の上あたりに挿入しています。

さて、ここでちょっと注意点。
Bloggerに追加する場合、ちゃんと表示できるかどうかは「プレビューモード」では確認できませんので、テンプレートを保存して、実際のブログで確認してください。

▲プレビューだと、こんな感じに表示されるので、設定が正しいがどうかの確認が出来ません。

おまけ

さて、表示自体はこれで出来るはずですが、このままだとトップページでも、どこでも表示されることになります。
それでいいよ！って人には無関係なのですが、個人的には個別記事ページのみ、こういったオススメ記事のポップアップはして欲しいので、

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='fb-recommendations-bar' data-action='recommend' data-expr:href='data:post.url' data-read-time='10' data-site='あなたのサイトドメイン名を入力' data-trigger='40%' num_recommendations='3'/></b:if>

▲こんな感じで、<b:if>タグを追加しています。

これで、個別記事以外ではヒョコッとは出ないことになります。

ブログの直帰率の改善にどこまで効果があるかは、まだ分かりませんが、意外と見やすいなという印象ですので、興味があれば挑戦してみるのはいかがでしょう？

それではまた！