Add Facebook Comments Tab below Blog Posts – Facebook Comments for Blogger

By -
5 Flares Filament.io 5 Flares ×

In This Tutorial we will learn how to show both facebook and blogger comments inside tabs that can be easily switched and toggled. The comment count will appear inside the tabs with an icon thus letting the visitor a much clearer option of commenting. The tabs are clickable to behave like buttons.  The tabs act more like two separate pages that let the user decide which commenting system to choose. The tabs are created using normal JavaScript code used for toggle view. Its extremely easy to install if you follow this tutorial carefully. I am sure most of you were waiting for this therefore it would be fun sharing it today.

This is extereme and Mash Widget for your blogger you can use both comment system default and facebook plus you can handle facebook commets because you will use official default freely facebook your own build apps that you can completely access because you will be have api and secret.

This Comments box has a lot of latest features.

  • Comments Counting show
  • Manage Facebook and Blogger Comments
  • Comment as multiple social network
  • Easy Widget and customizable
  • No Premium Script simple and freely
  • Only 5 Mints work no additional and JavaScript coded

facebook comments for blogger very important it’s increase pageviews, and traffic and social rank.

Add Facebook Comments + Comment As System to Blogger

Add Facebook Comments + Comment As System to Blogger

 

So Lets Start the Tutorial:

1st of all learn why you should add facebook comments into your blogs click here

Requirements :

Facebook Application api key and secret key

Need to add code into your blog

Step 1 >> You need a Api and secret for handling facebook comments.

[jbox color=”yellow”]Create you First Facebook Application easily[/jbox]

So you Got your Api key and secret

 

Step 2 >>

  1. Go To Blogger > Settings > Comments
  2. Set “Comment Form Placement”  to  Embedded below post

[jbox color=”red”]Before taking any step must Make Backup For Your Blog : How to Make Blogger Backup & Template Backup[/jbox]

Step 3 >> Go to Your Blogger dashboard >> Templates >> Edit html and search fortag and just below paste this code.






Note : Must replace your facebook app api key with FACEBOOK APP ID FACEBOOK APP ID

and image logo link with the Blog Logo Image

 

Step 4 >>  Search for

Note: Give a space at the end of the above code.

Now search for the ]]>and just above it paste this Css code

/*--- Tabbed Facebook Comments By BlogCheer.com----*/
.comments-page { background-color: #f2f2f2; width:450px;}
#blogger-comments-page { padding: 0px 5px; display: none;}
.comments-tab { float: left; padding: 5px; margin-right: 3px; cursor: pointer; background-color: #f2f2f2;}
.comments-tab-icon { height: 14px; width: auto; margin-right: 3px;}
.comments-tab:hover { background-color: #eeeeee;}
.inactive-select-tab { background-color: #d1d1d1;}

Now search for this line

After the first occurrence of the above available code paste this code:


Comments
Comments

Facebook Comments by
Blogger Widgets

That is all every thing is completed now you can refresh your blog 🙂 note if you have custome designed theme before do anything think about it. and make backup.

You can Handle your comments by visiting Facebook/tools/Comments

Thats it Hope you like it 🙂

5 Flares Twitter 0 Facebook 4 Google+ 1 Reddit 0 Filament.io 5 Flares ×

My Name is Umer i am a self made blogger, i learn blogging my own self, i love to learn more and share some best blogging tips on my this blog. I hope you may like my some articles special thank you to reading about my self. Please Check my Latest Project @ Templotic - Best Blogger Templates