How to Add Facebook Comments Box in Blogger Blog

Facebook has recently released many plugins for websites and blogs. Facebook Developers has introduced their best social plugin 'Facebook Comments Box' for webmasters and bloggers. Know here how we can add this plugin in blogger blogs.

You can embed Facebook Comments Box in any website or blog. This is very helpful plugin. With Facebook Comments Box, facebook users on your site can comment on your posts, post those comments to their facebook profiles and share them with their friends.

Add Facebook Comments Box in Blogger :
There are few steps to get this done. Just follow the below steps and you will have a nice facebook comments box installed in your blogger blog.

Creating a Facebook App :

First go to Facebook Developers Page and click on Create new App.

Now Enter your App name and name Space and click on Continue.

Fill all required fields and in App Domain enter your domain name or blogspot.com (if you have a blog).

On the same page copy your App ID and save it on notepad. After saving your app id, scroll down and click on Save Changes. You are done with creating facebook app/application.

Adding Codes to Template :

Now we have to add some java script and html codes in blogger blog template.

Open Blogger in your browser and Go to Template section (backup your template before proceeding).
Now Search for and replace it with the following code.

<html xmlns:fb='http://www.facebook.com/2008/fbml'

Find in template and add the following code just below 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 noted down in notepad.

Now search for and add these 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='Pc Gats' 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/PcGats' property='fb:admins'/><meta content='article' property='og:type'/>

Note:-

1.) Replace PC Gats with your blog/website name.

2.) Replace Your_Blog_Logo_Image_Link with your blog/website logo image URL.

3.) Replace Your_App_Id with your app id.
4.) Replace http://www.facebook.com/PcGats with your facebook page URL.

Now search for below code.

<data:post.body/>

If you find 3 occurrence of the above code, then add the below code after the first occurrence. If it don't work, try with second occurrence 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:550px;'>Facebook Comments Plugin Enhanced by <a href='http://www.PcGats.blogspot.com/' target='_blank'><b>PC Gats Blogger Tutorials</b></a></div></div></b:if>

Note:-

1.) Replace 550 with your desired width of box.

2.) You can change color scheme from light to dark.

3.) To hide blogger comments, go to Blogger Dashboard --> Settings --> Post and Comments and set comments section hide.

Now Click on Save to save your template and settings.

Now Facebook Comments Box is on your's blog. If you have any kind of problem about this article, tell us by comments. If you like this article, Share it with your friends. Also Subscribe to our daily updates..

Tuesday, 18 June 2013

How to Add Facebook Comments Box in Blogger Blog

Artikel Terkait How to Add Facebook Comments Box in Blogger Blog :

0 comments:

Post a Comment

Entri Populer

Labels