Use a button to display Disqus comments count and load comments onClick

Published: May 03, 2014 by Yi Zeng

• Categories:
• tutorials 26

• Tags:
• disqus 1
• javascript 4

Considering most of the site visitors don't read comments, within those who read comments, only few of them would actually say something, it might be a good idea to avoid loading Disqus comments by default. Since Disqus makes enormous amount of requests during creation, disabling it will increase page's loading speed slightly.

Therefore here is a note on how to create a "Show Comments" button to load Disqus comments onClick event. To improve user experience, the comments count will be pulled using Disqus API and displayed right in this button.

• Demo
• HTML markup
• Show Disqus comments count
• Load Disqus comments onClick
• Load comments if URL contains #comment
• Full example
• Disadvantage

Demo

HTML markup

<button class="show-comments" data-disqus-url="REPLACE_WITH_DISQUS_THREAD_URL">Show Comments</button>
<div id="disqus_thread"></div>

Notes:

1. Inside <button> element, data-disqus-url attribute will be used for polling Disqus comments count using its API.
2. <div id="disqus_thread"></div> is a placeholder which will be used by Disqus to create comments area.

Show Disqus comments count

Disqus provides count.js officially for generating comments count links, which only has limited functionalities. Luckily, Disqus API also allows getting comments in a more flexible way. A detailed official tutorial "Get comment counts with the API" can be found here.

var disqusPublicKey = "REPLACE_WITH_DISQUS_PUBLIC_KEY";
var disqusShortname = "REPLACE_WITH_DISQUS_SHORTNAME";
var threadUrl = 'link:' + $('.show-comments').attr('data-disqus-url');

$.ajax({
    type: 'GET',
    url: 'https://disqus.com/api/3.0/threads/set.jsonp',
    data: { api_key: disqusPublicKey, forum: disqusShortname, thread: threadUrl },
    cache: false,
    dataType: 'jsonp',
    success: function(result) {
        if (result.response.length === 1) {
            btnText = 'Show Comments (' + result.response[0].posts + ')';
            $('.show-comments').html(btnText);
        }
    }
});

Notes:

1. Register a Disqus API key first, where only the public key will be needed here.
2. Use Disqus API's threads/set method, which takes in Disqus shortname, public key and thread URL.
3. The quota for API calls is 1000 per hour. If expected requests are larger than that, please contact Disqus support team to increase the limit¹.

Load Disqus comments onClick

The actual Disqus comments can be loaded by calling its embed.js, either using traditional JavaScript approach like this or jQuery approach like below².

$('.show-comments').on('click', function() {
    $.ajaxSetup({cache:true});
    $.getScript('http://' + disqusShortname + '.disqus.com/embed.js');
    $.ajaxSetup({cache:false});
    $(this).remove();
});

Load comments if URL contains #comment

If someone enters the page directly targeting to Disqus comments, then comments should be loaded automatically. To do so, trigger click action if #comment is part of the in coming URL.

if(/\#comment/.test(location.hash)){
    $('.show-comments').trigger('click');
}

Full example

Show

$(document).ready(function () {
    var disqusPublicKey = "REPLACE_WITH_DISQUS_PUBLIC_KEY";
    var disqusShortname = "REPLACE_WITH_DISQUS_SHORTNAME";
    var threadUrl = 'link:' + $('.show-comments').attr('data-disqus-url');

    $.ajax({
        type: 'GET',
        url: 'https://disqus.com/api/3.0/threads/set.jsonp',
        data: { api_key: disqusPublicKey, forum: disqusShortname, thread: threadUrl },
        cache: false,
        dataType: 'jsonp',
        success: function(result) {
            if (result.response.length === 1) {
                btnText = 'Show Comments (' + result.response[0].posts + ')';
                $('.show-comments').html(btnText);
            }
        }
    });

    $('.show-comments').on('click', function() {
        $.ajaxSetup({cache:true});
        $.getScript('http://' + disqusShortname + '.disqus.com/embed.js');
        $.ajaxSetup({cache:false});
        $(this).remove();
    });

    if(/\#comment/.test(location.hash)){
        $('.show-comments').trigger('click');
    }
});

Disadvantage

Googlebot won't be able to index those comments anymore.

1. StackOverflow answer made here by Ryan V. ↩

2. Let your readers decide when to load Disqus by Yu-Jie Lin. ↩