75回目:Facebook Recommendation BarをBloggerに導入して見た(解説つき)


国内のブロガーさんの間でもかなり話題になってる「Facebook Recommendation Bar」なんですけど、多くの導入方法を紹介しているブログがWordPressであったり、App IDの所得方法の解説を省いてますね。まあ、分かる人には分かるって感じ....「Facebook Recommendation Bar」の存在自体はベータ版の時から知っていて、メリットが曖昧だったので導入するか否かを検討していましたが、とうとう導入するという決断をいたしました。今回はBlogger向けにApp IDを所得するところから「Facebook Recommendation Bar」の導入方法を紹介します。

FacebookのApp IDを所得する


URL欄に"https://developers.facebook.com/apps"を入力していただくか、面倒くさい方はコチラのリンクからアクセスして下さい。https://developers.facebook.com/apps

次に「新しいアプリを作成」ボタンを押していただき、別ウィンドウが表示されますので、「App Display Name」、「App Namespace」(空欄可)と「地域」を設定し、「Web Hosting」に同意するというチェックを入れ、「続行」ボタンを押してください。


あとは、次の画面でセキュリティチェックをクリアしてください。













こんな画面が出てきたけど、「キャンセル」をクリックしといた。



最後に「Website with Facebook Login」にブログのURLをコピペする。

Facebook Recommendations Barを作成


いよいよ終盤、Facebook Recommendations Barの作成&導入..これも前回と同じく、URL欄に
"https://developers.facebook.com/docs/reference/plugins/recommendationsbar/"
を入力していただくか、やっぱり面倒くさいという方は下記のリンクからアクセスして下さい。
https://developers.facebook.com/docs/reference/plugins/recommendationsbar/

次に「URL of the article」に表示されているURLを消して、「Domain」のところにブログのURLを入力してください。※一応、入力後に「Enter」キーを押してください。


「Get Code」ボタンを押していただくと、別ウィンドウが表示されますので、表示された2つのコードを<body>タグの直後にコピペしてください。






















次に、「APP_ID」の6文字を消して、先ほど作ったApp IDに差し替えます。あとは「テンプレートを保存」ボタンをクリックしていただければ終了です。

Ps:なお、投稿のプレビュー時に以下の画像のようなエラーが出ますが、大丈夫ですよ。

最後に、Bloggerあるある


















The reference to entity "appId" must end with the ';' delimiter.」というエラーが出てきて、テンプレートを閉じられなかった方は1つ目のコード(Javascript)を以下のコードに置き換え、「APP_ID」の6文字を消して、先ほど作ったApp IDに差し替えてください。

<div id="fb-root">
<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&amp;appId=APP_ID";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
</div>
また、なぜか僕の使っている"syntaxhighlighter"からコピペしても「The reference to entity "appId" must end with the ';' delimiter.」というエラーが出てきてしまいます。

Ps:信じないのであれば、試しにどうぞ..

追記:残念な君へ















こんな感じのエラーが出ていませんか?最近他の「Facebook Recommendation Bar」を導入しているブログを閲覧していると、かなりの割合で「Object at URL ブログのURL has og:type of 'website'. The property 'article' requires an object of og:type 'article'.」というエラーが出ている記事に遭遇します...(僕もそのひとりでしたw)

早速、解決策を提示い致します。(エラーの意味がわかれば、すごく簡単に解決できますよ)

ヘッダ(<head>)内に以下のメタ(<meta>)ダグをコピペすれば、解決します。うん...




<meta content='article' property='og:type'/>

あ、ちゃんとメタ(<meta>)ダグを閉じてくださいね!!←コレ分かんなかったら、コメント..