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

        21 comments:

        ABDUL BASITH said...

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

        Mc Dewey Lacapag said...

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

        ABDUL BASITH said...

        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

        Mc Dewey Lacapag said...

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

        ABDUL BASITH said...

        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

        Mc Dewey Lacapag said...

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

        Olu Isaac Tayo said...

        thanks for this....its really and i have installed it on my blog and you can see it working here here: http://dudurepublic.blogspot.com/2013/09/kerry-washington-covers-october-2013_20.html.....thanks

        Mc Dewey Lacapag said...

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

        richard said...

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

        Mc Dewey Lacapag said...

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

        Claud C said...

        That was a great tutorial. The nearest I got to make this work. I am having problems to load Disqus though. See this page http://prcarloselias.blogspot.com.br/2013/09/um-crente-foi-ao-rock-in-rio-eu-sou.html

        Mc Dewey Lacapag said...

        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.

        Claud C said...

        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.

        Mc Dewey Lacapag said...

        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 :)

        Alex Thompson said...

        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

        Gourav Gir said...

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

        COH PARTA said...

        no problem.very thanks.

        Jake Patriarca said...

        thanks for this..can i copy ur script?

        Mc Dewey Lacapag said...

        yes sure you can copy the script

        Jaden T said...

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

        Garywal Lacapag said...

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

        Post a Comment