更新日：2015年01月12日 投稿日 : 2012年09月07日
Web、モバイル（スマホ・格安SIM）、ソーシャルメディア活用術、フリーランスの働き方などを綴ります！
Recommendation Barの設置で評価（いいね！）されてる記事を表示しよう!
今に始まった事ではないですが、ブロガーさんのブログ（サイト）を見ると、facebook、twitter、はてななど、様々なSNSブログパーツが組み込まれて連携が取られております。勿論、私のブログにも厳選したSNSブログパーツを導入し連携をとっております（笑）
あらゆる場所からユーザーを惹き込まないと！
日本でもfacebookユーザーが増えて来たこともあり、facebookとのブログの連携は顕著！しないと勿体無いという感じでしょう。また、勢いのあるうちにfacebookも次々とブログとの連携が取れるプラグイン（ブログパーツ）を開発・リリースをしてきてます！
今回紹介するのは最近ブロガーさん周りで話題になっている、ページビューアップにも期待が持てるfacebookプラグイン「Recommendation Bar」です。
はてなブックマークや人気エントリーランキングみたいな感じで、facebookの友達などからいいね！ボタンをクリックされた記事がおすすめ（推薦）としてリストで表示され、ブログ読者の興味を惹かせるプラグインです。見られれば見られるほどページビューも上がるし、記事自体のSEO評価も高まります。
設定した時間やスクロール位置によりRecommendations Barはブラウザ画面の右下や左下からひょっこり出てくるのですが、この動的印象もクリック率に繋がっているのではと推測致します。
スポンサーリンクRecommendation Barの設置方法
まずは、facebook開発者ページでFacebookのAppIDを取得しましょう。すでに取得されている方は、AppIDをコピペできるように用意しましょう。
facebook開発者 +新しいアプリを作成
AppIDを取得・用意したら、Recommendations Barページを開き、各項目を入力していきましょう。
Recommendations Bar – facebook開発者
♪ URL of the article
記事のURLを記入します…が、自分で自分の記事をおすすめとして入力するのは違和感が（笑）
各ブログサービスには記事を個別に吐き出すタグがあるのでそれを入力。
空欄の場合でも動作可能。
Movabletypeの場合は、コード取得後、data-hrefに<$MTEntryPermalink$>を入力。
<div class="fb-recommendations-bar" data-href="<$MTEntryPermalink$>" data-site="ドメインを入れる"></div>
WordPressの場合は、コード取得後、data-hrefに<?php the_permalink(); ?>を入力。
<div class="fb-recommendations-bar" data-href="<?php the_permalink(); ?>" data-site="ドメインを入れる"></div>
♪ Trigger
表示されるタイミングをページのどこにするか。
data-triggerより下記Read Timeの秒数が優先されます。
♪ Read Time
何秒後に表示させるか？最短10秒から設定できる。
空欄の場合、初期値の30秒が自動的に指定されます。
♪ Verb to display
ボタンの文言を「いいね」か「おすすめ」かを選択。
♪ Side
表示位置は右下か左下かを選択。
♪ Domain
ブログ（サイト）のドメインを入力。
上記必要箇所を入力したらコードを取得して、<body>〜</body>内に貼り付けます。
※HTML5とXFBML用のソースが利用できます。
<div class="fb-recommendations-bar" data-href="https://developers.facebook.com/docs/reference/plugins/recommendationsbar/"></div>
表示数などの設定を追記できる
♪記事の表示数の変更（表示最大数は5記事）
<div data-href=”https://developers.facebook.com/docs/reference/plugins/recommendationsbar/” num_recommendations=”1″></div>
num_recommendations=”1″の数値を１～５で設定。
♪過去記事の数を設定
<div data-href=”https://developers.facebook.com/docs/reference/plugins/recommendationsbar/” max_age=”7″></div>
以上、Recommendation Barを設置して、推薦記事にどんどんアクセスして貰いましょう！
ページのRecommendation Barにエラーが出たら
メタ内に下のソースを挿入しましょう！
<meta content="article" property="og:type" />
サイドバー設置用にRecommendations Boxもある。
はてなブックマーク（人気エントリー）のブログパーツと被る感じですが、facebookユーザーから評価（いいね！）された記事を表示させるRecommendations Boxもあります♪
こちらはひょっこり出現する動きは無いです。
Recommendations Box – facebook開発者
是非お試しあれ。
webdesignerwork 著者
フリーランスWebデザイナーとして活動をはじめて18年。全国の私を必要としてくれる方々からWordPressでのWeb制作のご依頼を頂いております。
各地のコワーキングスペースやWordPressの勉強会（WordBench/WordCamp）などに顔を出し、様々な人達とご縁をいただき刺激を受け、学んだこと感じたことを、日々のお仕事や自社メディアへの開発・配信にと繋げております。妻、子、プードル２匹と里山暮らし。