Load Disqus comments on demand

The default way of loading comments

When you setup an account on Disqus they provide you with a piece of HTML / JavaScript which you can add to your website. It will load the comments and display them in an element with the id disqus_thread. It is pretty straightforward and easy to include.

<div id="disqus_thread"></div>
<script type="text/javascript">
    /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
    var disqus_shortname = 'example'; // required: replace example with your forum shortname

    /* * * DON'T EDIT BELOW THIS LINE * * */
    (function() {
        var dsq = document.createElement('script');
        dsq.type = 'text/javascript';
        dsq.async = true;
        dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
        (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
    })();
</script>
<noscript>
    Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a>
</noscript>
<a href="http://disqus.com" class="dsq-brlink">comments powered by <span class="logo-disqus">Disqus</span></a>
            

The boilerplate code above will load the comments as soon as the visitor opens the page, no questions asked.

What will we be changing?

First of all we will be adding a button which will enable the visitor to load the comments, this will replace the default behavior where the comments are loaded on page load. Because the comments may never be shown the div element with the id disqus_thread is something we don't need include in the page by default, we can move its creation to JavaScript and create it just before we need it.

We can get rid of the bottom anchor element promoting Disqus, it doesn't serve any purpose other than to promote them and their name will be shown often enough. The noscript element looks like a good idea. How friendly of us to give visitors in a browser that can't run JavaScript or have JavaScript disabled a warning of the JavaScript dependency, but it misses the mark. It doesn't take into account users who for some reason or another never get the JavaScript files even though the browser is capable of running it.

According to this article on gov.uk most users who don't run the JavaScript actually do have a JavaScript capable browser and do have JavaScript enabled. This group of visitors will not get to see the content of the noscript element and will just see an empty space. This will need to be addressed by moving the message out of the noscript element and into something that is visible to all users.

Last but not least I would like to show the current comment count in the button which we're going to add. Disqus has two different methods to get the comment count but we'll see that neither really suits our needs.

A clean start

Let's first create a nice clean baseline from which we can expand our solution. Let's remove the stuff we don't want on page load and make sure the message about the JavaScript dependency is visible to all visitors, not just the ones with a browser that can't run JavaScript or have it disabled.

<p id="disqus_thread">
    The comments on this website require the use of JavaScript. Perhaps your browser isn't
    JavaScript capable or the script is not being run for another reason. If you're
    interested in reading the comments or leaving a comment behind please try again with a
    different browser or from a different connection.
</p>
            

The text about the JavaScript dependency is now visible to all visitors, also the ones who don't get to run JavaScript even though their browser is capable and willing. We will hide this message later on in our JavaScript module. The p element has the same id as the original div element had, this is done on purpose.

First of all we will need to be able to find this element in JavaScript so we can remove it, this way it is real easy to find the element. The other reason has to do with showing the comment count.

Disqus has a away to show the comment count using an anchor element where the href attribute ends on #disqus_thread. If we would totally remove this id from the page we have links that now have an invalid target and appear broken when the visitor clicks on them. By assigning the id to the p element the browser still has a target to navigate to.

You probably also noticed the lack of the script element. This is because we will be moving the script into a separate file which will make it a lot easier to reuse the script in different projects.

Loading comments on demand

With the HTML all cleaned up it is time to turn to the JavaScript. We don't want the comments to be loaded on page loaded but only after the user indicated the comments should be shown. This will require us to create a button element in JavaScript for the visitor to click on and have the original Disqus code executed in the click handler of the button.

(function() {
    'use strict';

    // required: replace example with your forum shortname
    var disqus_shortname = 'example';

    /**
     * This method will handle the click on the button to load the comments. It will remove the
     * button and execute the original Disqus script for loading the comments.
     */
    function button_clickHandler(event) {
        // We need to get the button element, we could also use the target property of the event
        // but this will do just as well
        var button = document.getElementById('disqus_thread');
        // Now we will have to recreate the div element we removed from the HTML. We will place
        // it into the DOM like we did when we created the button
        var disqusContainer = document.createElement('div');
        button.parentNode.insertBefore(disqusContainer, button);
        button.parentNode.removeChild(button);

        // The div element will need to have the disqus_thread id as this is required for Disqus,
        // it is the way their code identifies the element in which the comments can be displayed
        disqusContainer.id = 'disqus_thread';

        // Now we can execute the original Disqus code
        var dsq = document.createElement('script');
        dsq.type = 'text/javascript';
        dsq.async = true;
        dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
        (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
    }

    /**
     * This method will initialize the module. It will replace the JavaScript dependency message
     * with a button which will allow the visitor to load the comments.
     */
    function init() {
        // Try to get the element we used to display the message about the JavaScript dependency
        var placeholder = document.getElementById('disqus_thread');
        // If we didn't get the placeholder element we will stop setting up the button to load
        // the comments
        if (placeholder == null) {
            return;
        }

        // The placeholder was found, now we can create the button which will allow the visitor to
        // load the comments
        var button = document.createElement('button');
        button.appendChild(document.createTextNode('Click here to load the comments.'));
        button.addEventListener('click', button_clickHandler.bind(this));

        // We will insert the button before the placeholder and once the button has been placed in
        // the DOM we will remove the placeholder
        placeholder.parentNode.insertBefore(button, placeholder);
        placeholder.parentNode.removeChild(placeholder);

        // The placeholder used to have the id which can be reference by an anchor element, to make
        // sure we don't break this functionality we will apply the id to our newly created button
        button.id = 'disqus_thread';
    }

    // Setup the module
    init();
})();
            

We've now accomplished two of the goals we've set out at the start. The comments are no longer loaded on page load, instead the user has to click a button before we request the comments from Disqus. It significantly lowers the initial page weight and is a lot more friendly for visitors on a slow connection or a fixed data allotment.

We also have a system in place that informs all visitors of the JavaScript dependency and we remove this message automatically once our JavaScript module is loaded and run.

Showing the comment count in the button

The third goal that we still need to accomplish is to show the current comment count in the button. As you may have noticed at the top of this article there is an anchor to the comment section and it shows the current comment count. Chances are you missed it at the top of the article or perhaps you forgot how many comments there are by the time you've read the article and reach the comment section.

I expect people will get discouraged to click the button to load the comments if too often it turns out there were no comments to load. To make sure that doesn't happen it is best to shape the expectations and show the current comment count at the moment the visitor makes the decision whether or not to click on the button.

Disqus provides two ways, that I know of, to show the current comment count for a discussion:

1. Use an anchor element and make sure the href attribute ends with the string #disqus_thread. Disqus provides a piece of JavaScript which will set the text for these anchor elements to the current comment count. This is what I use to show the comment count at the start of my articles and on the index page.

2. There is an API you can use to retrieve the comment count for a page. This API is rate limited to a 1000 calls per hour. Disqus advices to cache this value server side and not use this API call client side as you may hit the rate limit.

Since we're using a button to trigger the comment loading there is no way we can use method 1. This leaves us with method 2 but unfortunately that isn't a viable option for this blog. This blog is just a static website, there is no back-end which can retrieve the comment count and cache it server side. While I don't expect I will exceed the Disqus rate limit any time soon it is better to be safe than sorry. Time to come up with a different solution.

Like I said, option 1 is used for the anchor which links to the comment section. This isn't rate limited and is already performed when the visitor visits a page. The JavaScript provided by Disqus pulls in some other JavaScript which in turns sets the text, there is no event to listen to. That leaves us with one option, we'll poll the text of the anchor element. The one requirement here is the anchor needs to be empty on page load. To poll the element we need to alter our JavaScript module.

(function() {
    'use strict';

    var disqus_shortname = 'example', // required: replace example with your forum shortname
        interval = 208,
        link = null,
        maxTries = 8,
        pollTries = 0;

    /**
     * Add the text from the anchor in the button to show the current comment count.
     */
    function addCommentTextToButton() {
        // Get the text from the anchor, make sure it is all lower case
        var text = link.innerHTML.toLowerCase();
        // If there is a single comment we need to use 'is' in the sentence instead of 'are'
        var verb = (parseInt(text, 10) === 1) ? 'is ' : 'are ';
        // Add the text to the button to show how many comments there are, use the verb we determined
        // and the comment count we got from the anchor
        var button = document.getElementById('disqus_thread');
        button.appendChild(document.createTextNode(' Right now there ' + verb + link.innerHTML.toLowerCase() + '.'));
    }

    /**
     * This method will handle the click on the button to load the comments. It will remove the
     * button and execute the original Disqus script for loading the comments.
     */
    function button_clickHandler(event) {
        ...
    }

    /**
     * This method will initialize the module. It will replace the JavaScript dependency message
     * with a button which will allow the visitor to load the comments.
     */
    function init() {
        ...
        // Try to get an anchor element with a href to #disqus_thread, this is where
        // the text with the comment count will be placed in
        link = document.querySelector('[href$="#disqus_thread"]');
        // Check if we've found an element with the requested href
        if (link != null) {
            // Start polling the text inside the anchor element
            pollCommentText();
        }
    }

    /**
     * This method will poll the text inside the anchor element until it contains text. It
     * will do so for maximal 8 times before giving up. The time between each attempt will
     * be 20% longer than the last. With an initial interval of 208ms the math works out
     * to:
     *  1: 250ms
     *  2: 300ms
     *  3: 360ms
     *  4: 432ms
     *  5: 518ms
     *  6: 622ms
     *  7: 746ms
     *  8: 895ms
     * The method will stop checking for the comment count after 4.1 seconds.
     */
    function pollCommentText() {
        // Check if the anchor element still is empty
        if (link.innerHTML === '') {
            // Increase the poll counter
            pollTries++;
            // Check if we haven't exceeded the max number of tries
            if (pollTries <= maxTries) {
                // Wait an additional 20% longer between each attempt
                interval *= 1.2;
                // We still have a try left, check if the anchor has text in a while
                setTimeout(pollCommentText, interval);
            }
        } else {
            // The anchor contains text, add it to the button
            addCommentTextToButton();
        }
    }

    // Setup the module
    init();
})();
            

In the init method we check if there is an anchor in the page which satisfies the requirement set forth by Disqus. If there is we start to check if the anchor element has a text yet. To make sure we don't keep doing this for too long and unnecessarily there is a system in place which limits it to (a completely arbitrary number of) 8 attempts. Because in the beginning it is nice if the text is detected quickly the interval is short. The more tries we need, the longer the interval gets. Perhaps it is a micro optimization but it felt right doing it this way.

If after the maximum number of tries we still didn't find any text in the anchor element it is too bad but we will let it be. It is not a necessity to have the comment count in the button and if after 4 seconds there is no result it could very well be there is something else going on. In my tests I noticed there were usually about 2 to 3 attempts before the comment count had been returned by Disqus.

The addCommentTextToButton takes the inner HTML of the anchor element. My Disqus configuration has the default config where it returns the text as {number} Comment(s). The call to parseInt is given the entire string, the method will only parse up to the first non digit it finds in the string and returns it as a number. It is an easy way to extract the number from the string, no need to use a regex. Once we have the number we can determine if we need to use 'is' or 'are' and construct the sentence we want to add to the button text.

What did it get us?

Now we have achieved all three goals we set out in the beginning. We have a nice, reusable, JavaScript module which puts the visitor in control of loading the comments and a way to provide the visitor with some important information at the moment of deciding whether or not to click on the button. You might disagree with me on it being a good thing that the user decides if the comments should be loaded or not. What you can't argue with are numbers and I have some to show you how much we saved in initial page weight.

Wrapping up

I hope you found the article useful. We've seen the effect it has on the initial page weight when Disqus comments are loaded. In addition to that we've also improved the notification to the user that there is a JavaScript dependency for the comments. I think the user experience is greatly improved by these modifications we've made. If you want you can download the full version of the script from the link below.

• Disqus on demand script