2012/08/05

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

follow us in feedly
follow us in RSS
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が欲しいだけなので、アプリ自体はテキトーに作成します。

Recommendations Bar1

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

Recommendations Bar - Facebook開発者

Recommendations Bar2
▲まずは何も変更せずに、「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のプラグイン作成ページから、今度は必要事項を入力してコードを作成。

Recommendations Bar3
▲画像のように設定をしていって、「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に追加する場合、ちゃんと表示できるかどうかは「プレビューモード」では確認できませんので、テンプレートを保存して、実際のブログで確認してください。

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


おまけ


さて、表示自体はこれで出来るはずですが、このままだとトップページでも、どこでも表示されることになります。
それでいいよ!って人には無関係なのですが、個人的には個別記事ページのみ、こういったオススメ記事のポップアップはして欲しいので、
<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>タグを追加しています。

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

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

それではまた!


追記

後日、モバイル閲覧時に表示されるとかなりの邪魔になるため、モバイルでは表示しないように設定をしました。

[Blogger]Recommendations Barを導入後、モバイル閲覧時には表示させないようにする方法。 - Sunabox
先日、Facebookの【Recommendations Bar】をBloggerに表示する方法を紹介したのですが、モバイルでの表示について考慮するのを忘れていました。 ...


[blogger]シンプルな関連記事表示がしたい!「Smarter Related Posts Widget for Google Blogger - v2.0」! - Sunabox

[blogger]サイズ自由のサムネイル表示で、ランダムに記事を表示可能なブログパーツ!『複眼RSS』 - Sunabox

2 件のコメント:

  1. これはいいですね。

    返信削除
  2. コメントありがとうございます!
    結構使いやすいし、オススメ出来そうですねヽ(´ー`)ノ

    返信削除

Related Posts Plugin for WordPress, Blogger...