Load Disqus comments on a button click for Blogger

The Disqus comment system is the best third party commenting service for blogging platforms like WP and Blogger. But loading Disqus can make the website slow and which is not a good experience for your readers. Our goal is to improve its performance by calling Disqus scripts only when user wants to read them.

It's a tweaked Lazy loading method which is adopted by leading blogs like TheNextWeb. Disqus definitely has an edge over the blogger comments as - it's almost spam free, cross platform and very easy to manage. But it definitely increases the overall page loading time of your blog which is reason to worry.

Statistics 

Following image which shows the difference between normal Disqus Vs Disqus on demand. I tested the code on one of my websites and results are self explanatory. With lazy loading plugin website got loaded 30% faster as well as made fewer requests.

Blogger comments vs Disqus

Blogger comments are super fast. Being part of the blogger's native development structure, they load within no time. The comments are shown in the comment section. We also get an email which has brief summary about the comment. The email can be found in social tab of your gmail. Here ends the good part, lets see the cons.

Blogger comments are easy to spam. They have been used to create backlinks from spammers and it's pretty easy to get a backlink as most of the bloggers don't understand the significance of link juices they are passing to the commenter.

Disqus is cute. It's really secure and it identifies the spammer. The UI is Intuitive and you get an unique avatar. The best part is it's a cross platform so you can use the same account to comment on Wordpress as well other leading blogging platform. But, being a third party plugin it Loads slower and hence decreasing performance of your pages. Slower page means more bounce rate, which can be a problem in the long term.

Show Disqus comments on button click

Enough talking, let's straight away get to the point. Check out the demo.

Demo

We are going to add a button or div which look like a button and it is clickble. When user wants to comment, he will simply click on the button and comments will get loaded.  The best place to show comment is after the post, so let's add the div/button after posts.

Sign in into blogger and go to your blog's dashboard. Edit layout and Add a new HTML/Javascript  widget in your blogger's dashboard. Copy and paste following code.

<script>
function load_disqus() {
    var hidediv = document.getElementById('disqusdiv');
    hidediv.style.display = 'none';
    var disqus_shortname = 'your-disqus-username';
    (function () {
        var dsq = document.createElement('script');
        dsq.type = 'text/javascript';
        dsq.async = true;
        dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js';
        (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
    })();
}
</script>
<style>
    #disqusdiv
    {
    width:140px;
    height:20px;
    background:#FF3C1F;
    line-height: 20px;
    color: #fff;
    font-size: 15px;
    padding:5px;
    Border:3px;
    cursor:pointer;
    text-align:center;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    border-radius: 3px;
    }
    #disqusdiv:hover
    {
        background:#222;
        color:#fff;
    }
</style>
<div id='disqusdiv' onclick="load_disqus()">Load comments</div>
<div id='disqus_thread'/></div>

Do you want to customize it?

1. The first thing you should do is add your Disqus username inside this code. It's a unique username given for every new site which gets registered with Disqus. Find the red text in code and add your shortname.
2. If you want a bigger and wider button box to be shown, then play around with width, height Properties.
3. If you are good with CSS,  make it more attractive by changing colors. The default color is the background: #FF3C1F. Change it to any color of your choice and suits your template.

Having issues or want to ask questions? Feel free to let us know in the comments.