Facebook comment box is a useful tool for bloggers to increase & improve conversations and drive more traffic since the post commented on, by your blog visitors will be shown on the visitor’s wall on Facebook. Adding Facebook comment form on blogger blog is a nice way to drive traffic from the social networking website.
HOW TO ADD FACEBOOK COMMENTS BOX/FORM TO BLOGGER
CREATE FACEBOOK APP
- Go to Facebook developers page to create a new app
- Create an new app as shown below
- Now you will be taken to a Settings page. Now note down your Facebook app id which will be shown like this
- Go to Blogger Dashboard --> Template --> Edit HTML --> Proceed
- Backup your Template before making any changes to your blog
- Now Expand Widget Templates
- Press Ctrl + F and search the code shown below
- Now Find the code shown below using [ctrl+F]
<html
- Now replace it with the code shown below
<html xmlns:fb='http://www.facebook.com/2008/fbml'
- Now Find the code shown below using [ctrl+F]
</body>
- Now Paste the JavaScript SDK Code Shown Below just above/before it
<div id='fb-root'/>
<script>
//<![CDATA[
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=YOUR_APP_ID";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
//]]>
</script>
<script>
//<![CDATA[
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=YOUR_APP_ID";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
//]]>
</script>
- Replace YOUR_APP_ID with your app id you just noted above
- Now Find the code shown below using [ctrl+F]
</head>
- Now Paste Facebook Open graph tags Shown Below just above/before it
<meta expr:content='data:blog.pageTitle' property='og:title'/>
<meta expr:content='data:blog.url' property='og:url'/>
<meta content='Latest Hack' property='og:site_name'/>
<meta content='YOUR_BLOG_LOGO_IMAGE_URL' property='og:image'/>
<meta content='YOUR_APP_ID ' property='fb:app_id'/>
<meta content='http://www.facebook.com/latesthack' property='fb:admins'/>
<meta content='article' property='og:type'/>
<meta expr:content='data:blog.url' property='og:url'/>
<meta content='Latest Hack' property='og:site_name'/>
<meta content='YOUR_BLOG_LOGO_IMAGE_URL' property='og:image'/>
<meta content='YOUR_APP_ID ' property='fb:app_id'/>
<meta content='http://www.facebook.com/latesthack' property='fb:admins'/>
<meta content='article' property='og:type'/>
- Replace Latest Hack with your blog name
- Replace YOUR_BLOG_LOGO_IMAGE_URL with your blog logo url
- Replace YOUR_APP_ID with APP Id as shown above
- Replace http://www.facebook.com/latesthack with your facebook page url
- Now Find the code shown below using [ctrl+F]
<data:post.body/>
- Now Add the Code Shown Below just above/before it
<b:if cond='data:blog.pageType == "item"'>
<div style='padding:10px 0px 5px 0px; margin: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='97%'/></div>
<div style='color:#ffffff; background-color:#3b5998;border: solid 1px #ddd; font-size:11px; padding:3px; width:97%;'>Facebook Comments Box by <a href='http://www.latesthack.com' target='_blank'><b>LATEST HACK</b></a></div></div></b:if>
<div style='padding:10px 0px 5px 0px; margin: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='97%'/></div>
<div style='color:#ffffff; background-color:#3b5998;border: solid 1px #ddd; font-size:11px; padding:3px; width:97%;'>Facebook Comments Box by <a href='http://www.latesthack.com' target='_blank'><b>LATEST HACK</b></a></div></div></b:if>
- Now save your template
- Now Go to Blogger Dashboard --> Settings --> Post and comments
- Now set comment location to Hide
0 comments: