Adding Facebook comment box to your blog or website will be really helpful if you want to increase the no.of comments in your blog. People can easily add comment in this facebook comment box rather than normal comment form.
In 2009, Facebook introduced a plugin "Facebook comments box" which allows people to add comments using facebook. There are many webmasters explained about how to add facebook comments box but most of those didn't worked for many people. Because of these, few of my blog users requested me to write an article about how to add facebook comment box. So I am sharing how to add facebook comment box with easy way.
Recommended : How To Add Floating Like Box To Blogger
In 2009, Facebook introduced a plugin "Facebook comments box" which allows people to add comments using facebook. There are many webmasters explained about how to add facebook comments box but most of those didn't worked for many people. Because of these, few of my blog users requested me to write an article about how to add facebook comment box. So I am sharing how to add facebook comment box with easy way.
Recommended : How To Add Floating Like Box To Blogger
Facebook Comment Box : Why You Must Add
1. Facebook is the largest networking site in the world. So many people are using facebook and this comment box will help more users to comment on your website or blog.
2. It is very easy to comment using Facebook rather than normal comment form.
3. It will reduce spam links on your blog.
Below is the preview of Facebook Comment box.
Also See : Adding Facebook Like Box To Blogger
Step 1: Goto Facebook Developers Page and click "Create New App"
Add Facebook Comment Box Blogger :
Step 1: Goto Facebook Developers Page and click "Create New App"
Step 3: Now it will take you to settings page. In "App Domains" field, enter your domain and then make sure you "Disabled" "Sandbox Mode". Now enter your site URL and click "Save Changes"
Note : If you are using custom domain (eg: bloggingmind.com) enter your domain in "App Domains" otherwise enter blogspot.com.
Step 4: Now go to your Blogger account and Click "Template" and "Edit HTML".
Step 5: Search for <html and after it give a space and add below code.
xmlns:fb='http://www.facebook.com/2008/fbml'
Step 6: Now search for <body> and add the below code after <body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = functionundefined) {
FB.initundefined{
appId : 'YOUR APPLICATION ID HERE',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
};
undefinedfunctionundefined) {
var e = document.createElementundefined'script');
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementByIdundefined'fb-root').appendChildundefinede);
}undefined));
</script>
Note: Make sure you replaced your App ID with 'YOUR APPLICATION ID HERE'
Step 7: Now search for </head> and paste the below code above </head>
<meta expr:content='data:blog.pageTitle' property='og:title'/>
<meta expr:content='data:blog.url' property='og:url'/>
<meta content='Blogging Mind' property='og:site_name'/>
<meta content='BLOG LOGO IMAGE LINK' property='og:image'/>
<meta content='YOUR APP ID ' property='fb:app_id'/>
<meta content='http://www.facebook.com/vinay.vk.852' property='fb:admins'/>
<meta content='article' property='og:type'/>
* Replace BloggingMind with your blog title.
* Replace BLOG LOGO IMAGE LINK with your blog logo image link.
* Replace YOUR APP ID with your App Id.
* Replace http://www.facebook.com/vinay.vk.852 with your profile link (so that you can manage and delete comments)
Step 8: Now search for <b:includable id='comment-form' var='post'> then paste the below code after that.
<b:if cond='data:blog.pageType == "item"'> <div style='padding:0px 0px 0px 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='520'/></div> <div style='color:#fff; background-color:#3B5998;border: solid 1px #ddd; font-size:10px; padding:3px; width:510px;'>Facebook Blogger Plugin: By <b><a alt='Blogger Widgets' href='http://www.bloggingmind.com' style='text-decoration:underline; color:#fff;' rtarget='_blank' title='Blogger'>bloggingmind.com</a></b></div></div> </b:if>
Note : I have highlighted some in above code, you can chage those according to your need.
Step 9: Now Click "Save Template" to finish the process.
Congratulations! You have succesfully completed all the steps. Open your blog and Facebook comment box will be there in all posts. Happy Blogging!
If you are still facing any problems, feel free to ask me and comment your problems below.
Also Read : Adding Vertical Floating Social Media Sharing Buttons
Subscribe Today And Discover All Tips And Tricks !
Note : Don't forget to click the confirmation link in youe email inbox!
0 comments:
Post a Comment