How to Use Facebook, Disqus and Blogger Comment tab Together in Blogger Blogs

As writers of  blogs, we all are aware of the importance of comments. While it is true that some blogs/websites tend to disable comments entirely, those are special instances where the websites do not essentially require comments. However, in general, comments form an integral part of any blog, be it a personal one or a magazine site. After all, what good is any info unless it provokes a healthy discussion?

All blogging platforms (including WordPress) come with native support for some sort of comment mechanism which seems to suffice for most bloggers. But sometimes, users may require some dedicated or specialized comment mechanism. This is where third-party commenting systems come in handy. In this article, we will take a look at some of the major third-party commenting mechanisms

Disqus
Disqus is a mature comment management system and perhaps the most used amongst bloggers and website owners. Introduced back in 2007, it is currently serving more than 750,000 websites. According to a recent study done by folks at Lijit, 75% of the websites using 3rd party commenting system are powered by Disqus.

Facebook Comments
Uses social signals to surface the highest quality comments. Comments are ordered to display the most relevant comments from friends and friends of friends as well as the most-liked or active discussion threads. Comments marked as spam are hidden from view.
Comments are easily shared with friends or with people who like your Page on Facebook. If people leave the “Post to Facebook” box checked when they post a comment, a story appears on their friends’ news feed indicating that they’ve made a comment on your website, which will also link back to your site.

Blogger Comment Box
Is the default commenting platform for bloggers which gives us the full control in all the blogposts comments

In this post i will give a detail explanation and tutorial on how to COMBINE FACEBOOK, DISQUS and BLOGGER as commenting platform of your blogs

First thing you need to have disqus and Facebook App Id. See Below Tutorial to get your on Facebook App

REGISTER to DISQUS.COM to get your username
GET an FACEBOOK APP ID

• Go To Facebook Developers Page
• Submit your blog URL and give it a name. Keep Site name as your “Blog Title” and Site URL as your “blog address”

• Hit “create app” button and proceed
• After submitting the security check code you will see this page,

• Save that FACEBOOK APP ID in a notepad because we will need that later. Now Click the link near the top-right corner of the same page that says “Developer Dashboard”  

Now i had assumed that you had your own disqus account username and Facebook App Id, So Now lets start the tutorial.

Step 1: Login in blogger Account. And select Your Blog.
Step 2: Backup Your Blogger Blog.
Step 3: Navigate Blogger Dashboard > Go to Template > Edit HTML.
Step 4: Find Following Code by pressing CTRL + F.

</head>

Now just above it place the below code

Note:

• Replace mcdeweyl with with your own personal facebook username.(this will be used in regulating your fb comment box
• Replace xxxxxxxxxxxxxxx with your own facebook App Id.

Step 5: Now search for below code.

<div class='comments' id='comments'>

You may find 2  instance of  <div class=’comments’ id=’comments’> place the code in both of this. [ 1st is when there is no comment and the 2nd is when there ‘s already comment] some users having problem that disquss and facebook is hidden when they comment using blogger comment. It is because they don’t put it twice.

Step 6: Use Below Integrated Facbook, disqus and blogger tab generator, Copy and Paste Generated Code Just After
<div class=’comments’ id=’comments’> code.

 
Step 7: Now we need to add disqus script to show no. of comment on button for it, find below code.
 </body>
Step 8: Paste Following code just above </body> tag.

Step 9: Replace Disqus-Site-Name  (one the 3rd line) with your own disqus site username
Step 10: Save Your Template, that set.

Note: If you find any trouble regarding appearance of 3 comment box, kindly change the comment setting as per instruction. Go to Setting > Post and Comment > In field of comment location select option “Embedded or Full Page” and check it respectively..

If you experience any problem just drop a comment

Credits to: jsblogstop for the css
             to: tipsviablogging for the generator.

Enjoy Pals!

1. Add 3 In 1 Slide Out Follower Box Widget to Blogger Blogs – New !!
2. Facebook Like Box Without Footer Note
3. Facebook Likebox with White Lightbox Effect for Blogger Blogs – New !!
4. How To Add Beautiful Horizontal Random Post to Bloggers Blog
5. How To Add HTML Contact Form for Blogger Blogs
6. How To Add Mashable Subscription Box to Blogger Blogs
7. How To Create Drop Down Menu Form with GO Button for Blogger Blogs – New !!
8. How to Add Random Post Widget to blogger Blogs
9. How to Add a Beautiful Accordian Table of Contents for Blogger Blogs – New !!
10. How to Create a Beautiful Table of Contents for Your Blogger Blogs – New !!
11. How to Use Facebook, Disqus and Blogger Comment tab Together in Blogger Blogs – New !!
12. Slider Don’t Forget To Join Our Community Popup Widget for Blogger Blogs – New !!
13. Smooth JQuery Scroll to Top Widget Generator for Blogger Blogs – New !!
14. The Fastest and Easiest Tabber Widget For Blogger Blogs – New !!