Add Facebook Comment Box To Blogger
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'- Now search for </body> and paste below code just before 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>
- Replace Your-App-Id with your app id.
- 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.
4. Steps To Hide Blogger 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.
In case if you face any issue while implementation feel free to share your comment.
0 comments:
Post a Comment