Blogger :Install and Configure Facebook Comments

   Add comment
Blogger :Install and Configure Facebook Comments

Facebook ,as you know,is a famous social networking website.Besides its fame and popularity,there are also two solid reasons why it's so much important for bloggers.Firstly,it is a fact that it has the greater number of users as compared to twitter,google plus etc.Secondly, it has the greatest number of active users  which is 1,590 million according to Statista.By activity I meant the time for staying on the facebook pages, liking, and commenting.So people worldwide are familiar with facebook and its features.


This may be the turning point for your blog if you have a large number facebook fans.You and I have to think why would people leave facebook and visit our sites ? Can we beat facebook ?.I think that is not possible.So the only option left for us is to use some of its services on our blogs.In this post, the service I am discussing is facebook comments feature which is officially known as "comments plugin".Some basic features of  facebook comments are as follows :

Features of Facebook Comments :


  1. Facebook-logged in users can easily comment without any botheration because of familiarity with facebook.
  2. Facebook commenters can also share their comments on facebook.
  3. People can mention their friends just like they do on facebook.
  4. Admins or Moderator feature is also available in facebook comments which allow you to delete a comment or ban someone from commenting on your site.
  5. Analytics provided by facebook.

Install and Configure Facebook Comments :


Step 1 :

Make a Facebook App and Get your APP ID.
Copy the App ID and add it below the <head&gt if you don't have meta tags installed.
<meta content='FACEBOOK-APP-ID' property='fb:app_id'/>
You can also install meta tags if you don't have them from the link below..
After you have installed meta tags,just replace APP id with yours.If you already have them just replace the APP Id and FB  admins id


Step 2 :

Now backup your template (for safety).Find <html in your template(Use CTRL + F).Add the following line after it with a space between them.
xmlns:fb=’http://www.facebook.com/2008/fbml

It will look like this

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

Step 3 :

Find the <head> tag and paste these codes below it.

<meta expr:content='data:blog.pageTitle' property='og:title'/>
<meta expr:content='data:blog.url' property='og:url'/>
<meta content='Pro Blog Tricks‘ property='og:site_name'/>
<meta content='Image-Link-Of-Blog-Logo‘ property='og:image'/>
<meta content='YOUR_APP_ID ‘ property='fb:app_id'/>
<meta content='http://www.facebook.com/problogtricks‘ property='fb:admins'/>
<meta content='article' property='og:type'/>

You can also add an Admins id instead of fan page URL.To Get your facebook ID (Click here).

Step 4 :

Search for
tag and add the following code above it to install facebook SDK for facebook Apps.

<div id='fb-root'></div>
<script>
window.fbAsyncInit = functionundefined) {
FB.initundefined{
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
});
};
undefinedfunctionundefined) {
var e = document.createElementundefined‘script’);
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementByIdundefined'fb-root').appendChildundefinede);
}undefined));
</script>

 Step 5 :

Find <data:post.body/> in your template and copy the codes below after it.Remember that it will appear three times in your template code .Place it after second or third one<data:post.body/>


<b:if cond='data:blog.pageType == "static_page"‘>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div align='center'>
<div style="background: #414141;">
<div style="color: #F0F0F0; font-family:Cambria,'Palatino Linotype','Book Antiqua','URW Palladio L',serif; font-size: 32px; text-align: center;">
<strong>Share your thoughts using below comment form!</strong></div>
<br/>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<div><fb:comments expr:href='data:post.url' expr:title='data:post.title' expr:xid='data:post.id' width='450‘/></div>
</div>
If the above method didn't work copy the codes after this line
<div class='post-footer-line post-footer-line-1'>

Customizations :


  1. In the above code, I have added condition tags which will make the comments box to appear on static as well as archive pages.If you want to make the comments box only to appear in posts pages,you will  have to replace those tags with this one
  2. You can change the background and font colors by changing their color values.
  3. You can also change the font family .If you want to use your template's font just make the font family 'inherit'.
  4. I have set the width of the comment box to 450 px. You can change the width according to your display.If you want the comment box to automatically adapt the device width (Responsive) Just delete the width=450px or make it auto.
  5. You can also change the heading of the comments box with your own.

Ending Remarks :


I hope that you find this method of setting up facebook comments for blogger easy.If you experienced any problem please comment below.Do remember to share it on social media.Thanks
 ,

Stay connected, You'll not be disappointed!

0 comments:

Leave a Comment

1-No spamming (links etc unless necessary)
2-Ask what's related to the post