Header Ads

Bloggerテンプレートのカスタマイズ 記事ごとにFacebookコメント欄を表示

Bloggerの新テンプレートをカスタマイズして、Facebookのコメント欄を記事ごとに表示する方法をまとめてみました。

コード生成

facebook social plugins comments などと検索すると出てくる以下のページから
http://developers.facebook.com/docs/reference/plugins/comments/
Get Code ボタンを押してコードを生成します。



するとこのようなコードが生成されるはずです。











BloggerのHTML編集画面を開く

Bloggerの画面から、テンプレート→HTMLの編集の順にクリックします。




JavaScript SDKを追加

1.の部分をコピーしてBodyタグのすぐ後ろに貼付けます。


(注) appIdを追加する場合は、
js.src = "//connect.facebook.net/ja_JP/all.js#xfbml=1&appId=xxxxxxxxxxxxxxxxxxxxxxx";
のように、&は&と書くとエラーが出ません。
http://stackoverflow.com/questions/11996456/like-box-blogger-error

(注)js = d.createElement(s); js.id = id; js.async = true; とすると読み込みが高速化するようです。 
http://iphone-lab.net/archives/253683 

 (注)テンプレートを保存すると、"は"に、'は'に変換されるようです。



htmlタグ内に追記

2.のコードをhtmlタグの中に追記します。




コメントを表示したい場所にプラグインコードを追加

3.のコードを<b:includable id='comments' var='post'>のすぐ後ろに貼付けます。この際、貼付けるコードは

<fb:comments href="http://example.com" width="470" num_posts="10"></fb:comments>

ではなく、

<fb:comments expr:href='data:post.url' num_posts='10' width='470'/>

とします。

 
(注)expr:href= とせずに href= のままだと以下のエラーが出ます。

 http://stackoverflow.com/questions/9245310/cant-integrate-facebook-comments-to-blogger

(注)URLに記事固有のパーマリンクを指定すると、記事ごとにコメントを管理できるようになります。
http://blog.livedoor.jp/mintoa/archives/5177692.html

(注)新しいテンプレートではパーマリンクのタグとして <$BlogItemPermalinkURL$>は使えません。data:post.url を使います。
 http://www.consumingexperience.com/2007/01/new-blogger-expr-how-to-convert.html 



テンプレートを保存

オレンジ色のテンプレートを保存 ボタンを押して完了します。



チェック

記事をひとつ開いてみて、下のほうにFacebookのコメント欄が表示されていて、コメントが残せればチェック完了です。


 


 参考になったページ

コメントを表示させるタグを置くのは<b:includable id='comments' var='post'>の直後
http://www.superblog.jp/2011/03/bloggerfacebook.html 

& を &amp; と書いてエラー回避
http://stackoverflow.com/questions/11996456/like-box-blogger-error

 hrefをexpr:href と書いてエラー回避
http://stackoverflow.com/questions/9245310/cant-integrate-facebook-comments-to-blogger

パーマリンクを使ってそれぞれの記事にFBコメントが出るように
http://blog.livedoor.jp/mintoa/archives/5177692.html

Bloggerの古いテンプレートタグリスト(古いテンプレート用なので使わないけど)
http://support.google.com/blogger/bin/answer.py?hl=en&answer=42070

Bloggerの古いテンプレートタグを新しいデータタグへ変換
http://www.consumingexperience.com/2007/01/new-blogger-expr-how-to-convert.html 

Facebookソーシャルプラグインを高速化
http://iphone-lab.net/archives/253683




0 件のコメント:

Powered by Blogger.