Load Disqus on Button Click

Adding Disqus to your webpage is dead simple if you follow their instructions, but what if you don't want the comments to load by default? Well, if you're like me (and pretty much every page in existence) you'll think "let's load on a button press!" Great minds think alike, so let's begin.

The default instructions say to add the following code:

<div id="disqus_thread"></div>
<script>

/**
*  RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION BELOW TO INSERT DYNAMIC VALUES FROM YOUR PLATFORM OR CMS.
*  LEARN WHY DEFINING THESE VARIABLES IS IMPORTANT: https://disqus.com/admin/universalcode/#configuration-variables*/
/*
var disqus_config = function () {
this.page.url = PAGE_URL;  // Replace PAGE_URL with your page's canonical URL variable
this.page.identifier = PAGE_IDENTIFIER; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
};
*/
(function() { // DON'T EDIT BELOW THIS LINE
var d = document, s = d.createElement('script');
s.src = 'https://your-disqus-site-name.disqus.com/embed.js';
s.setAttribute('data-timestamp', +new Date());
(d.head || d.body).appendChild(s);
})();
</script>
<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>

this.page.url is the url of the page you want the comments to appear. in Django, for example, here I have:

this.page.url = '{{ request.build_absolute_uri }}';

this.page.identifier is a unique identifier for the page. Here, I use the post title and post id:

this.page.identifier = '{{ post_detail.title }} - {{ post_detail.id }}';

this.page.title as you guessed is the page title and once again in Django, I have:

this.page.title = '{{ post_detail.title }}';

If you load the page now you should see your Disqus comments. Great! Almost there, but now we're getting to the original purpose of this post, loading the comments when a button is clicked. To do this, I was a bit of a rebel. Do you see the comment // DON'T EDIT BELOW THIS LINE? Yup, I edited below that line.

First, let's give the function a name so we can call it:

function loadDisqus() { // DON'T EDIT BELOW THIS LINE

And add a button that calls the function:

<div class="container text-center" style="margin-bottom: 5rem" id="load_comments">
    <a class="btn btn-secondary btn-xl sr-button" onclick="loadDisqus(); return false;">
    Load Comments
    </a>
</div>

Next, we want the button to disappear when clicked:

document.getElementById('load_comments').style.visibility = "hidden";

Originally I just removed the button, but I noticed the page was changing size when the button was removed then changed size AGAIN when the comments loaded. I thought this looked awkward, so I maded it "hidden" and added the following code to delay the resizing until the comments loaded:

setTimeout(function (){document.getElementById('load_comments').remove()}, 1000);

The timeout of 1000ms is kind of arbitrary, but after some trial and error it seemed to consistently take about that long to begin loading (if you have a more elegant solution, please share below!).

If you try it now, everything works, but the comments may load out of view depending on your layout (they did with me). So, I decided to have the comments scroll into view after 2 seconds (again, about how long they were taking to load):

setTimeout(function () {
    var elmnt = document.getElementById("disqus_thread");
    $([document.documentElement, document.body]).animate({
                scrollTop: $("#disqus_thread").offset().top
    }, 1000);
}, 2000);

Now, when you click the button, it will hide, load the comments in the background, and scroll to the comments section when they are done loading. I have a feeling this won't work 100% with slow connections (comments may not load within 2 seconds), but it works well enough for me.

In summary, my Disqus section now looks like this:

<div id="disqus_thread"></div>

<script>

    /**
    *  RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION BELOW TO INSERT DYNAMIC VALUES FROM YOUR PLATFORM OR CMS.
    *  LEARN WHY DEFINING THESE VARIABLES IS IMPORTANT: https://disqus.com/admin/universalcode/#configuration-variables*/
    var disqus_config = function () {
        this.page.url = '{{ request.build_absolute_uri }}';
        this.page.identifier = '{{ post_detail.title }} - {{ post_detail.id }}';
        this.page.title = '{{ post_detail.title }}';
    };

    function loadDisqus() { // DON'T EDIT BELOW THIS LINE
        var d = document, s = d.createElement('script');
        s.src = 'https://existenceundefined.disqus.com/embed.js';
        s.setAttribute('data-timestamp', +new Date());
        (d.head || d.body).appendChild(s);
        document.getElementById('load_comments').style.visibility = "hidden";
        setTimeout(function (){document.getElementById('load_comments').remove()}, 1000);
        setTimeout(function () {
            var elmnt = document.getElementById("disqus_thread");
            $([document.documentElement, document.body]).animate({
                scrollTop: $("#disqus_thread").offset().top
            }, 1000);
        }, 2000);
    }
</script>
<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>

That's it! Now your page will load faster and use less user data just by adding a button to load comments.

Sept. 3, 2018, 8:46 p.m.
Load Comments