Add Facebook Comments Box To Blogger
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 : 'YOUR_APP_ID', 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('script'); e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js'; e.async = true; document.getElementById('fb-root').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 == "item"'><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 เท่านี้ก็เรียบร้อยแล้วครับ