こんにちは!すなふ(@sunafu35)です。
最近、色々なブログで見かけるようになって気になりだしていた、Facebookの【Recommendations Bar】という、サイトの右下にヒョコっとオススメ記事を表示してくれるツールを導入してみました!
それに伴って、複眼RSSをちょっと休止に。どうしても重いのも気になってましたからね。
参考リンク
最近、見かけるようになったのですが、ブログの記事の右下あたりにヒョロリと表示される、Facebookの「Recommendations Bar」をネタフルでも設置してみました! ...
ブログを読み進めてスクロールしていくと、ブラウザの右下に上のようなボックスが表示されます。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に追加します。
▲まずは何も変更せずに、「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 = '//connect.facebook.net/ja_JP/all.js#xfbml=1&appId=ここにApp ID'; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script>▲このコードを、<body>直下に挿入。コードは非同期読み込みになるようにしてますよ~。
●テンプレートHTMLは、
「管理画面>テンプレート>HTMLの編集」から!
ちなみに、<body>直下が公式でも指示される場所ですが、</body>の上あたりに入れても、このブログでは問題なく動いているようです。
2.) プラグインのコードをHTMLに追加する
次は、オススメボックスを表示させるためのコードをテンプレートHTMLに追加します。
▲画像のように設定をしていって、「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'/>設定値は、
コードは、<body>から</body>の間ならどこに入れてもいいようです。
私は、</body>の上あたりに挿入しています。
さて、ここでちょっと注意点。
Bloggerに追加する場合、ちゃんと表示できるかどうかは「プレビューモード」では確認できませんので、テンプレートを保存して、実際のブログで確認してください。
▲プレビューだと、こんな感じに表示されるので、設定が正しいがどうかの確認が出来ません。
おまけ
さて、表示自体はこれで出来るはずですが、このままだとトップページでも、どこでも表示されることになります。
それでいいよ!って人には無関係なのですが、個人的には個別記事ページのみ、こういったオススメ記事のポップアップはして欲しいので、
<b:if cond='data:blog.pageType == "item"'> <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>タグを追加しています。
これで、個別記事以外ではヒョコッとは出ないことになります。
ブログの直帰率の改善にどこまで効果があるかは、まだ分かりませんが、意外と見やすいなという印象ですので、興味があれば挑戦してみるのはいかがでしょう?
それではまた!
追記
後日、モバイル閲覧時に表示されるとかなりの邪魔になるため、モバイルでは表示しないように設定をしました。先日、Facebookの【Recommendations Bar】をBloggerに表示する方法を紹介したのですが、モバイルでの表示について考慮するのを忘れていました。 ...
これはいいですね。
返信削除コメントありがとうございます!
返信削除結構使いやすいし、オススメ出来そうですねヽ(´ー`)ノ