Skip to main content

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

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 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
    • 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.


        Now just above it place the below code

        • 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.
        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 !!


        1. dear brother plz permit me to edit ur html can i remove?

        2. @Abdul yes you can..i just want to place it there so everyone who wants to use it, will know where to find it, if your kind please leave it as it is.

        3. brother i already have jquery ur commend box html is also jqery if i use ur html one of my slide is not work what can i do

        4. @ABDUL brother just remove the older jquery it is advisable to always use the latest pack of jquery...BTW it will work without my jquery in the code, try to remove my jquery and see if your slider works..

        5. brother if i remove ur jquery my slide is work but ur code in command box seperate by three box command box disqus box and fb box.there is a ny possible two jquery commands in single blogger.please help me brother

        6. @ABDUL yes you can use 2 jquery.. can you try to place the code as it is without removing anything..maybe some code are broken when you try to remove the credit..and can you tell me your blog URL so i can address the problem.
          you can send details in my contact form if you don't want to publish it here.

        7. thanks for this....its really and i have installed it on my blog and you can see it working here here:

        8. @Isaac thanks for adopting my widgets :)
          stay tune for more new stuffs.

        9. Thanks for this Mc. easy to install with full instruction. i find your posts interesting and useful

        10. @Richard, Hi thanks for dropping by. yes i made it easy to understand.. and step by step so anyone can understand it, even newbies can relate to the post.

        11. That was a great tutorial. The nearest I got to make this work. I am having problems to load Disqus though. See this page

        12. Hi Claud, i already look at your template, seems your did some error on the last part of tutorials. can your repeat the step 8, and be sure your disqus name is correct.
          then message me in my contact form for more advance help if still disqus is not loading, i'll surely fix that for you.thanks.

        13. Thank you for your help. I managed to install your plugin. I've noticed that Disqus comments only show a summary of the comment not the full text, and there doesn't appear to be a way to view the full text, as it is with comments made via the blogger comment system.

        14. Hi Claud.. i already replied to your email about your background color request..BTW the summary of message of disqus.. it is in the disqus side.. we can't do anything about it.. they made it that way so it will not load long messages.. imagine if all your comments has 400 characters then it will be too long :)

        15. It also has the advantage of integrating tightly with social networking sites like Twitter and Facebook. It incorporates a strong spam filter as standard. Although commonly used in blog pages, in theory you can add support for Disqus to many other page types in RapidWeaver as well.
          los angeles website design

        16. thanks that was too great thanks again but sorry for i have removed your credit link...

        17. thanks for this..can i copy ur script?

        18. bakit nag iba ang tutorial.. nawala yung fold..

        19. @Jaden T anung fold yan? walang nabago jan since na published yan.

        20. Hello! I must have some extra (old) code in my page that is stopping this from working - would it be possible for you to have a look please? Thanks so much!!!

          Amber. x

        21. Could you please provide a demo link? Thanks..



        Post a Comment

        Popular posts from this blog

        FIXED! Adsense Ads not Showing in Homepage of Blogs or Website

        Problem Solved! have you experience your Adsense ads not showing on homepage? Ads are showing on other pages except for homepage, well just this week I had a hard time figuring out why my ads are not showing in homepage.

        I have another blog that is using Adsense ads. After a day of fixing almost all my template errors still the Adsense ads are not showing so I tried to search for it on internet.

        Some forums will tell you that it is about updating your privacy policy pages, well I did that also but there's no effect.

        The solution is very simple just navigate to blogger setting or wordpress seo settings. I'm focusing on blogger since my blog is in blogger platform.

        Go to Blogger settings ->> Search Preferences->> Enable search description. Click yes then put your sites description and save. That's it! reload and see the magic :D

        Facebook Popup (Like Box Widget) With Time Delay

        Facebook Popup Like Box Widget With Light box and Time DelayIf you are looking on how to increase your blog social media connection you can use widgets that will expose it to your reader. One of the best way is to use Facebook like box will pop up with the lightbox effect. This facebook pop up is not annoying because of its ability to detect its user cookies. It won't open when it is already closed. It has a time delay also to avoid visitors leaving your blog. Just set it in any way you want and increase your followers/likes easily.
        Add Widget to Your Site Add the following code anywhere in any widget/HTML box.
        Go To layout and add gadget--> HTML/JavaScritp Box Paste all the below code -> then save

        <script src='' type='text/javascript'></script>
        #fanback {