Add Facebook Comments Box Plugin To Blogger Blogs - Latest

Leave a Comment



add facebook comments plugin.

This is the most asked tutorial on blogosphere and answered by very rare bloggers. So, I decided write this tutorial for you.

In 2009 facebook developers came up with an very interesting plugin called facebook comments box. People can integrate/install this plugin on their website / blog and visitor can able to comment by using their facebook, AOL, yahoo and hotmail id's.


add facebook comments plugin


Initially many bloggers were facing lot of problems while integrating "facebook comments box" with blogger blogs. But thanks to facebook developers, now the problem has been fixed and now you can easily integrate it with your blogspot blog.

Must Read :-

You can also use blogger default comments + facebook comments on blogger blogs. There are lot of advantages of using facebook comments box on your blog. Some are listed below,
  • Facebook is no.1 social media site and there is nobody left on internet who doesn't have facebook account.
  • So people love to comment on your blog.
  • People can edit the comments.
  • Comment is been shared on visitors facebook profile, which obviously gives more visibility to your blog post.
As there are too many advantages of using this plugin, there is also one dis-advantage.
  • Facebook comments are not crawled by Google bots. This is the only disadvantage of using facebook comments box.
If I share my personal experience. When I installed this plugin on one of my blog, I saw 30% more comments. So, I recommend you to give it a try !


Blogger Comment Series:


You have already seen the snap shot above about its look and feel. I guess the UI is pretty clean and attractive. The above snap shot is of light scheme and you can also use it with dark scheme.


add facebook comments plugin


Found this interesting ? So, lets learn how to install this extremely useful comment form in blogspot blogs. Simply follow the simple step by step guide mentioned below.


Must Read :-

Add Facebook Comments Box Plugin:

Task 1 :- Create Facebook Application ID
First of all you have to create facebook application id in order to install this plugin. So, simply follow the steps, 

Step 1 :- Go to facebook developers page

Step 2 :- Click on Register Now button.
Now press the toggle button and press next.
Step 3 :- Add your phone no.
In order to create new facebook application id, you have to add and verify your phone no. 

Step 4 :- Add display name, namespace and category.
Now click on "Create App ID"


add facebook comments plugin


Step 5 :- Pass the security check.
After passing security check you will see below mentioned page.


add facebook comments plugin


Save the App ID in the notepad file as you will need it later. 

Now jump to the next task of the tutorial i.e task 2.

Task 2 :- Adding Facebook Comments Box to Blogger
Now lets install this comments box to your blog template.

Before moving ahead, just make sure you blogger's comment location is selected embedded.


add facebook comments plugin

To do so go to, 
  • blogger dashboard >> settings >> posts and comments.
  • In comments select comment location >> embedded.
  • Now follow the below mentioned steps.

Step 1 :- Go to blogger template.
  • blogger dashboard >> template >> Edit HTML
P.S take backup of your blogger template before making any changes into it.
Step 2 :- Just after <html>, paste the below mentioned code.

xmlns:fb='http://www.facebook.com/2008/fbml'
 
Step 3 :- Now paste the below mentioned code after <body> tag.

 
Now look for the code,
 

appId  : ' Facebook_APP_ID ',  Replace Facebook_APP_ID with your application ID that you had saved in notepad file previously.

Step 4 :- Now paste the below mentioned code in the <head> part.

<meta expr:content='data:blog.pageTitle' property='og:title'/>
<meta expr:content='data:blog.url' property='og:url'/>
<meta content='Solve My How' property='og:site_name'/>
<meta content='YOUR-BLOG-LOGO-IMAGE-LINK' property='og:image'/>
<meta content='YOUR_Facebook_APP_ID ' property='fb:app_id'/>
<meta content='http://www.facebook.com/solvemyhow' property='fb:admins'/>
<meta content='article' property='og:type'/>


Customization :-

Replace,

Solve My How with your blog name.
YOUR-BLOG-LOGO-IMAGE-LINK with your image logo link.
YOUR_Facebook_APP_ID with your facebook application id.
Replace http://www.facebook.com/solvemyhow with your facebook profile link.

Step 5 :- Now search for below mentioned code.

<b:includable id='comment-form' var='post'>

Step 6 :- Just after it, paste below mentioned code.



Change colorscheme='light' to colorscheme='dark' if you want dark skin. You can also change the comments box size, currently width is 520.

Step 7 :- Save your template.
Bingo you're done. Just visit your blogspot blog to check the plugin.

P.S To create such plugins, it requires lot of hardwork. Please respect the copyright. We have added the credits at the bottom of the plugin which get matched with the plugin's background color. Please do not remove it. We only want this favour in return :)

So, this was all about adding facebook comments box plugin to blogger blogs. Hope you found this tutorial informative and worth reading. Please do now hesitate to ask your queries in the comments below. I would be happy to help you. You can also subscribe for solvemyhow newsletter to get latest updates about blogger widgets, SEO and hacking tips and tricks right into your inbox.


Also See :- 

How to Hack Wifi Password in 2 Minutes

Improve Search Engine Optimization Of Your Blog In 5 Minutes For Beginners

How To Add Floating Social Media Buttons To Blogger

How To Add Attractive Email Subscription Box Below Every Post In Blogger

How To Add Email Subscription Popup Widget In Blogger 

Trick To Automatically Tweet Your Blog Posts Using Google Feedburner 

What Is Adsense Revenue Share Between Publishers And Advertisers

Complete Guide To Add Author Bio Box/Widget In Blogger (With Pictures) 

0 comments:

Post a Comment