setoya-blog

システム開発技術、データ分析関連でお勉強したことや、山奥生活を綴る、テンション低めなブログです。

はてなブログにFacebookのRecommendations Barを設置する

FacebookのRecommendations Barとは

このブログの右下にも設置してみましたが、そのドメイン内で「いいね」されている別の記事をRecommendationして表示してくれるBarです。はてなブログだと、ブログ毎にドメインが変わるので問題なく(と今のところ思っています)設置できます。
下の画像のようなやつです。読者の滞在時間を長くするような効果があるらしいです。
f:id:sessan:20120927135834p:plain

設置準備

FacebookのRecommendations Barをつけるためには、以下2つの準備が必要です。

  • Facebookの開発者登録
  • Facebookアプリ登録

アプリ登録は、開発者しかできないので、まずは、開発者登録。
そして、その後アプリ登録をします。欲しいのは、アプリのIDです。

Facebookアプリを作ったらFacebook developers サイトで、AppIDを確認できます。

設置手順

  1. Facebook Recommendations Barサイトで、設置用のスクリプトを取得
  2. はてなブログのデザイン設定で取得したコードをフッターに設定

という簡単な手順で設置できます。以下詳細。

1. Facebook Recommendations Barサイトで、設置用のスクリプトを取得

Facebook Recommendations Barサイトで、必要項目を設定して「get code」をするだけです。

はてなブログに自分のエントリーをおすすめするRecommendations Barを設置するだけであれば、全部デフォルトでよいです。
f:id:sessan:20120927141854p:plain

「Get code」すると、以下のような結果がでるから、両方ともメモっとく。

f:id:sessan:20120927171435p:plain

2. はてなブログのデザイン設定で取得したコードをフッターに設定

はてなのデザインカスタマイズ画面で、以下のように1で取得したコードを両方とも貼り付ける。
(順番に貼り付けるだけでオッケー。1つ目コードは、APP_IDのところを、自分のAPP_IDに変えておく。以下の画像では一応自分のAPP_IDを隠してますが、HTMLのソースコードを見ればすぐに分かるけど。)

f:id:sessan:20120927171706p:plain

以上。