Facebook Comment box helps your blog visitor to comment on your blog via Facebook account. Facebook comments also helps to increase your site traffic because if someone use its account to make comment then your commented post automatically comes in their news feed. Which increase chances for getting more visitors. As i already discuss about the advantages of adding Facebook Like Box and also using Facebook Like button in between articles. Facebook Comments box also help you to make your blog for user friendly if you have great visitors from Facebook. So if you want to add Facebook comment into your bloggers blog then follow below given simple steps carefully.
Steps To Add Facebook Comment Box
1. Create Facebook Application
- First of all you need to create an app on Facebook. To create new app Visit here
- Just create app with valid App name, their is no need to add or change any another option and if you want then add.
- After Creating new App change sandbox mode settings to OFF
- Click on Save Button and Note down your App Id.
2. Settings of Facebook Comment Box For Blogger
- Open Your Blogger Template section of Blog
- Then Edit HTML
- Now Search for <html and Replace it with below code
<html xmlns:fb='http://www.facebook.com/2008/fbml'
<div id='fb-root'/><script> window.fbAsyncInit = function() { FB.init({ appId : 'Your-App-Id', status : true, // check login statuscookie : 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> Now Search </head> and paste below code just above it.
<meta expr:content='data:blog.pageTitle' property='og:title'/><meta expr:content='data:blog.url' property='og:url'/><meta content='Safe Tricks' property='og:site_name'/><meta content='Blog-Logo-Image' property='og:image'/><meta content='Your-App-Id' property='fb:app_id'/><meta content='http://www.facebook.com/SafeTricks' property='fb:admins'/><meta content='article' property='og:type'/>Replace:-
Safe Tricks:- With Blog Title Name
Blog-Logo-Image:- With Logo Image
Your-App-Id:- With Facebook App id
SafeTricks:- With Facebook Page Username
This above method will give better appearance to blog in Facebook News Feed when someone comment on your blog.
3. Setting For Comment Box Placement.
- Now Search For this code <b:includable id='comment-form' var='post'> or code look like same.
- Paste Below code Just after above searched code.
<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='530'/></div><div style='color:#fff; background-color:#3B5998;border: solid 1px #ddd; font-size:10px; padding:3px; width:520px;'>Facebook Blogger Plugin by <b><a alt='blogger templates' href='http://www.safetricks.com' style='text-decoration:underline; color:#fff;' target='_blank' title='blogger templates'>Safe Tricks</a></b></div></div></b:if> - In case if are not able to find above searched code or in case if comment box not appear then instead this code <b:includable id='comment-form' var='post'>
- Search for this code and paste above given coding just below it.
<div class='post-footer'>
- This code may comes 2 times always choose code which comes second.
- Now to change width of comment box change values of width='530' and width:520px
- Now Save Your Template Settings. Now Refresh your any blog post and see live Facebook comment box.
- If You want to hide your blogger comment box
- Then go Settings tab of blog >> Then Post and Comments
- Now Change Comment Location to Hide and then save settings.
I try to
explain the whole process into 4 sub parts in which i explore about comment app
creation, then design placement, then comment box placement and Blogger comment
box hiding. I hope you will follow all steps as i mention carefully without any
mistake.
In case if you face any issue while implementation feel free to share your comment.
In case if you face any issue while implementation feel free to share your comment.
0 comments:
Post a Comment