Do You want to add facebook comment box for your site just like the image below???
Don't Worry, I am posting all steps involving in adding facebook comment box in your blog.
- This tutorial assumes that you have a Facebook account and a Blogger account with a blog.
First of All You Have to Create A Facebook App.
Creating a Facebook Application:
1.Go To
Facebook Developers Page. And click on create App.(see the image below)
2.Enter your app name, namespace and click on
Continue.
3.Fill the required fields,in app domain enter your domain name or just enter blogspot.com if you have no custom domain.
4. At the top, copy your App ID and save it in your desktop.(I prefer to save it in notepad)
5. Scroll Down and Hit save changes.
Now You have successfully created your Facebook App. And now you have to link your facebook app to your blog. Follow these steps to link your app to your blog.
Adding codes to your Blog:
Here you have to work with html codes. so first of all backup your template first.And follow the steps below.
2. Search (Ctrl+F) for
<html and replace it with the code below.
<html xmlns:fb='http://www.facebook.com/2008/fbml'
3. Search for
<body> tag and paste 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 again 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='Tech-Ashish' 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/Tech.Ashish' property='fb:admins'/><meta content='article' property='og:type'/>property='fb:admins'/><meta content='article' property='og:type'/>
Note::
i) Replace Tech-Ashish 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/Tech.Ashish with your Facebook Page URL.
5.Now Search (Ctrl+F) for this Code.
<data:post.body/>
If you find more than one occurrence of <data:post.body/> then add the above script after the first occurrence of it.If it doesnot work, try with second occurance and so on.
<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:620px;'><a href='http://tech.ashishdanai.com.np/2013/08/how-to-enable-facebook-comment-in.html' target='_blank'><b>Click Here</b></a> to Build Your Own Comment Box | Facebook Comments Plugin Enhanced by <a href='http://tech.ashishdanai.com.np' target='_blank'><b>Tech-Ashish</b></a></div></div></b:if>
Note::
i)You can change the width of widget by replacing 500 with your desired width. You have to replace both 500 by your desired width.
ii)As you all know you can change the color scheme to light or dark.
In this way, you can add facebook comment box in your blog. If you want to place your blogger's default comment too, you are now done. But if you want to place facebook comment only, then you have to hide your blogger's default comment. Folow these steps.
Go to
--> Blogger dashboard
--> Settings
--> post and comments and set comment section as HIDE.
.png)
.png)
.png)
.png)
