How To Add Facebook Comment Box In Blogger

Dear CracksTrick Readers today I am going to tell you How To Add Facebook Comment Box In Blogger. Facebook has become the most famous social website in today's time. So many of bloggers wish to add Facebook comment box in their blog. In this tutorial you are going to learn How to add a Facebook comment box in blogger.
Benefit of using Facebook comment box is that the comment done by your user will also publish on the timeline of his fb account which will ultimately advertise your blog in a indirect way.

Just follow these steps To Add Facebook Comment Box In Blogger

Step 1: Disable default comments.

Go to settings>> Comments>> Choose hide option in comments and save the settings.

Step 2: Make a comment box app in Facebook.

Just go to this page, Facebook developers
Then click + Set Up New Application
Enter your application name, (any of your choice)
Aand check agree and click Create Application
Then click on Connect tab
In the newly opened page fill the following info:
Connect URL : Enter your blog url and you must enter it with an ending dash.
(for example: http://crackstrick.blogspot.com/) .
Base Domain you must type blogspot.com
then click strong>agree and click Save Changes
on the next page Facebook will generate you a lot of info. you’ll need only one line, it’s App ID:
just copy it and keep any where, we’ll need it in the next steps. please see the following image to see where you’ll find your Facebook App ID:.

Step 3: Add the following codes in your blog

Go to blogger layout >> edit HTML >> check the Expand Widget Template

Find the following code by pressing " Cntrl + F " in your browser.

<html

and add the following code just after it by adding a space in b/w both 
of them.

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

For example

Now search for the

<body>

and after it add the folllowing code.

<div id="fb-root">
</div>
<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 the YOUR APP ID place with your facebook app ID (digits).

Now search for the

</head>

and add following code just before it

<b:if cond='data:blog.pageType == "item"'>
<meta   expr:content='data:blog.pageTitle' property='og:title'/>
<meta   expr:content='data:blog.url' property='og:url'/>
<b:else/>
<meta   expr:content='data:blog.title' property='og:title'/>
<meta   expr:content='data:blog.homepageUrl' property='og:url'/>
</b:if>
<meta   content='MY-SITE-NAME' property='og:site_name'/>
<meta   
content='http://google.com/help/hc/images/logos/blogger_logo.gif'

property='og:image'/>
<meta content='YOUR-APP-ID'   property='fb:app_id'/>
<meta content='YOUR-FACEBOOK-PROFILE-ID'   property='fb:admins'/>
<meta content='article'   property='og:type'/>

Replace my site name with your blog name, Your app id  and Your facebook
 profile ID with your own fb address (e.g. www.fb.com/salaria.arun )

Now find the following code

<data:post.body/>

and add the following code just after it

<b:if cond='data:blog.pageType == "item"'>

expr:href='data:post.url'

expr:xid='data:post.id'/></div>
<div style='background-color: #f2f2f2;border: solid 1px #cccccc; 
font-size:10px;

padding:3px;width:100%;'>
 <img alt='' class='icon-action'

height='16' src='http://allblogtools.com/imgup/1-2010/

allblogtools-blogger-templa.gif' width='16'/> <b><a href=

'http://www.crackstrick.blogspot.com/2013/03/how-to-add-facebook-comment-box-in.html
 ' target=

'_blank'

title='crackstrick'>Crackstrick Facebook comments for 
blogger</a>

brought to you by

<a href='http://www.crackstrick.blogspot.com/' target='_blank'

title='OllEngg'>ollengg.com ,

Get Yours?</a></b></div>
</b:if>

To change the width of your comments box, change 450 to what ever you want, according to your blogger template.

After adding all this save your template. That's Done!!!!!!

If you like my work you can show your regards by hitting Facebook like button, following us on Google+ or Twitter ,stumbling our posts on stumble upon or giving us a link back via the links below. also comment below. Stay tuned with CracksTrick for more updates. If you enjoy this post! Please take 5 seconds to share it. If You Have More Quires You Are Free To Ask...

1 comment:

YouWeFriday, 04 January, 2019
https://economictimes.indiatimes.com/small-biz/startups/newsbuzz/youwe-a-one-way-broadcast-app-launched/articleshow/64885787.cms

A small team from Cochin has developed a Broadcast Messenger App called *YouWe* ..a broadcast mobile application enabling users to send text, images, documents, video and audio clips to large number of followers

Kindly download (absolutely free) from Google Play store and pl encourage us

Download YouWe app
https://play.google.com/store/apps/details?id=app.youwe

Be sure to check back again because I do make every effort to reply to your comments here as soon as possible. Stay tuned with CracksTrick

How To Add Facebook Comment Box In Blogger

Just follow these steps To Add Facebook Comment Box In Blogger

1 comment:

Like us on Facebook

Popular Posts

The Complete World Of Crackstrick

Posts