ทำ Facebook Comments Box in Blogger (ทำมาหลาย Theme ได้ผล 100%)

เอามาจาก เว็บนอกอีกทีนะครับ แต่ผมทำดูแล้วในหลายๆ ธีมได้ผลที่น่าพอใจ

Add Facebook Comments Box To Blogger

อันดับแรก ไปจัดการ

Creating a Facebook Application:

1.ไปที่ Facebook Developers Page
2.สร้าง Apps Facebook เพื่อเอา ID





3.ใส่ Domain Name 

4.Scroll down and hit save changes,now you are done with creating facebook application.On the same page copy your App ID and save it in notepad.

Adding codes to your Template

1.Go to Blogger Dashboard -->Template -->Edit Html (Tick Expand Widgets Template)

Note:-Always Backup your template Before proceed.

2.Search(Ctrl+F) for <html  and replace it with the following code.

<html xmlns:fb='http://www.facebook.com/2008/fbml'

3.Find For <body> tag and add the following code just after it.

<div id='fb-root'/><script>    window.fbAsyncInit = function() {    FB.init({      appId  : &#39;YOUR_APP_ID&#39;,      status : true, // check login status        cookie : true, // enable cookies to allow the server to access the session      xfbml  : true  // parse XFBML    });  };    (function() {    var e = document.createElement(&#39;script&#39;);      e.src = document.location.protocol +   &#39;//connect.facebook.net/en_US/all.js&#39;;    e.async = true;      document.getElementById(&#39;fb-root&#39;).appendChild(e);    }());</script>

Note:: Replace YOUR_APP_ID with your app id you just noted down.

4.Now search(Ctrl+F) for </head> and add these open graph meta tags just above it.

<meta expr:content='data:blog.pageTitle' property='og:title'/><meta expr:content='data:blog.url' property='og:url'/><meta content='GeekoTips Blogger Tutorials' property='og:site_name'/><meta content='YOUR_BLOG_LOGO_IMAGE_LINK' property='og:image'/><meta content='YOUR_APP_ID ' property='fb:app_id'/><meta content='http://www.facebook.com/KBTricks' property='fb:admins'/><meta content='article' property='og:type'/>

Note::
i)Replace GeekoTips Blogger Tutorials with your blog name.
ii)Replace YOUR_BLOG_LOGO_IMAGE_LINK with your blog logo image url.
iii)Replace YOUR_APP_ID with your app id you noted Down.
iv)Replace http://www.facebook.com/KBTricks with your Facebook page url.

5.Now Search(Ctrl+F) for this Code.

<data:post.body/>

If you find 3 occurrence of  <data:post.body/> then add the above script after the first occurrence of it.If it doesnot work, try with second occurance.

<b:if cond='data:blog.pageType == &quot;item&quot;'><div style='padding:20px 0px 5px 0px; margin:0px 0px 0px 0px;'><script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/><div> <fb:comments colorscheme='light' expr:href='data:post.url' expr:title='data:post.title' expr:xid='data:post.id' width='550'/></div><div style='color:#fff; background-color:#3B5998;border: solid 1px #ddd; font-size:10px; padding:3px; width:550px;'>Facebook Comments Plugin Enhanced by <a href='http://kb-tricks.blogspot.com/' target='_blank'><b>GeekoTips Blogger Tutorials</b></a></div></div></b:if>

หมายเหตุ::
i)เปลี่ยนตัวเลข 550 คือความกว้างของ Box Comment
ii)อยากได้สีขาวหรือดำก็เปลี่ยนได้ตามใจ light or dark.

6.Save เท่านี้ก็เรียบร้อยแล้วครับ