Web、モバイル(スマホ・格安SIM)、ソーシャルメディア活用術、フリーランスの働き方などを綴ります!

Recommendation Barの設置で評価(いいね!)されてる記事を表示しよう!

9,336 view
更新日:2015年01月12日 投稿日 : 2012年09月07日
  • はてなブックマーク
  • facebook
  • twitter

今に始まった事ではないですが、ブロガーさんのブログ(サイト)を見ると、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″の数値を1~5で設定。

♪過去記事の数を設定

<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開発者

是非お試しあれ。

もう1記事、読んでみませんか?

当記事がお役に立ちましたらシェアして頂ければ嬉しいです。

  • はてなブックマーク
  • facebook
  • twitter
9,336 view 2012年09月07日

webdesignerwork 著者

フリーランスWebデザイナーとして活動をはじめて18年。全国の私を必要としてくれる方々からWordPressでのWeb制作のご依頼を頂いております。

各地のコワーキングスペースやWordPressの勉強会(WordBench/WordCamp)などに顔を出し、様々な人達とご縁をいただき刺激を受け、学んだこと感じたことを、日々のお仕事や自社メディアへの開発・配信にと繋げております。妻、子、プードル2匹と里山暮らし。

当ブログで公開されているテキスト、画像、イラストなどに関する権利は、当方に帰属します。
著作者の許諾を得ることなく複製、改変、転載、販売、出版など著作権法そのほか法律に触れる行為は禁止されております。

運営者情報

© 2004 webdesignwork ALL COPYRIGHTS RESERVED.