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&appId=APP_ID";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
</div>
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>)ダグを閉じてくださいね!!←コレ分かんなかったら、コメント..