Blogger: Disqus Comment on Click with API Counter Comment Count

We will about to implementing disqus Comment on Click event with Comment post Count using API Call. This one has advantage eg: does not have delay on showing our post comment count like count.js do, but in basic free disqus plan have disadvantage 1000x callback (1k uses / api call) per hour. If you are looking method without an API (without limit), see post Load Disqus On Click Without API.

Before we we begin, we must already have disqus public API KEY. to get one, go to disqus site and login, see the bottom part of that page and click on API links. For detail, see post How To Get Disqus Public API Key.

Still on disqus site, go to disqus admin site setting page and click on "Community". On the right side we have three "Comment Count Link". by default it filled with : Zero comment : 0 Comments, One comment : 1 Comments, Multiple : {num} Comments. We have to Change that comment counter text on that field with removing all " Comments" text, so it will look like : 0, 1, and {num}. Click on Save button to make changes.

DEMO

Show / Write Comments

Now go to your blogger site admin page. If you have already installed disqus widget, remove it first from the left sidebar "Layout" page. Next, click on "Theme" on the left sidebar. On the new right interface you will notice "Backup /Restore" button, hit that to download and save your xml theme script, in case we got messing around it can be restored with that xml by hitting the button again.

On the "Theme" Section, Click on "Edit HTML", click on our html text area box then hit CTRL + F on the keyboard, then fill with <b:includable id='comments' var='post'> on the input text area new ones appear in our html code box, then hit Enter on the keyboard.

Once the result found, we are shown the highlighted keyword. if it still wrapped, click on ">" on the left line of the highlighted word to expand, so we got code structure shown like below :

<b:includable id='comments' var='post'>
 <div class='comments' id='comments'>
  <a name='comments'/>
  <b:if cond='data:post.allowComments'>
   <h4><data:post.commentLabelFull/>:</h4>

We are about to modify on that structure, to make it look like this :

<b:includable id='comments' var='post'>
 <div class='comments' id='comments'>
  <!-- Paste our newly disqus block code below here -->
  <a name='comments'/>
  <b:if cond='data:post.allowComments'>
   <h4><data:post.commentLabelFull/>:</h4>

Copy this block code and paste below <div class='comments' id='comments'> , then you must make change on script part at var disqus_shortname = 'Your_Disqus_API_Public_Key' and var disqus_shortname = 'Your_Disqus_Shortname' with your given Api Key and Shortname, save.

<!-- Disqus Block Code -->
<b:if cond='data:view.isPost'>
<style>
#disqus-box {
    background-color: #2e9fff;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    height:100px;
    text-align: center;
    width: 100%;
    border-width: 0px;
    margin: 20px 0px;
    cursor: pointer;
    border-radius: 5px;
}
#disqus-box:hover {
    background: #164b78;
}
#disqus-pre {
    position: relative; padding: 40px 0px; 
}
</style>

<div class='popzone'>
    <div id='disqus_thread'>
        <div id='disqus-box'>
            <div id='disqus-pre'>Show / Write Comments</div>
        </div>
    </div>
</div>

<script>
    var disqus_publickey = "Your_Disqus_API_Public_Key";
    var disqus_shortname = "Your_Disqus_Shortname";
    var disqus_blogger_current_url = "<data:blog.canonicalUrl/>";
    var thread_url = 'link:' + disqus_blogger_current_url;

    $.ajax({
        type: 'GET',
        url: 'https://disqus.com/api/3.0/threads/set.jsonp',
        data: { api_key: disqus_publicKey, forum: disqus_shortname, thread: thread_url },
        cache: false,
        dataType: 'jsonp',
        success: function(result) {
            if (result.response.length === 1) {
                divText = 'Show Comments [' + result.response[0].posts + ']';
                if (result.response[0].posts == "0") {
                    $('#disqus-pre').html("Write Comment");
                } else {
                    $('#disqus-pre').html(divText);
                }
            }
        }
    });
 
    var disqus_config = function () {
        this.callbacks.onReady = [function(data) {
            $("#disqus-box").delay(300).fadeOut();
        }];
    };
 
    $('#disqus-box').on('click', function(){
        $.ajax({
            type: 'GET',
            url: '//' + disqus_shortname + '.disqus.com/blogger_item.js',
            dataType: 'script',
            cache: true
        }); $('#disqus-pre').html("Loading Comment Box...");
    });

    if(/\#comment/.test(location.hash)){
        $('#disqus-box').trigger('click');
    } 
</script>
</b:if>
<!-- Disqus Code End -->

Explanation :
Script require an disqus_publickey, disqus_shortname to be filled, while thread_url is value from our page canonical url. There is blogger_item.js not embed.js for blogger, which require disqus_blogger_current_url. Script will make an ajax call to get post count result. If response is "0" then text inside div with id disqus-pre will be overriden by text "Write Comment" else it will show an text Show Comment [num_post_count]. if the post has just been created, result will show nothing, exept someone open that box, and there is delay before count show result, so we fill with text "Show / Write Comments in it. If someone post an comment after reload, instantly we will get count result.

Script then give #disqus-box div have an function when clicked. It will replace all text inside to "Loading Comment Box...", when callback disqus on ready state, div block will disappear after 300ms. At the end, if url has #comment then #disqus-box div will simulating click event.

You will get more detail of you se post Disqus Comment on Click with Counter Comment Count. If you looking for Disqus Lazyload Method, see post Lazyload Disqus Comment on Blogger Site