Add Disqus comments to my blog

Some users prefer the Disqus commenting platform over the Blogger-native one, or its integrated G+ comments.

Disqus should be installed as an HTML gadget using their Blogger installer!

Doing so achieves the same result as this article, only more smoothly, since the Disqus short-name is automatically populated for you!

However, it can also be installed by clicking the button below, if you've got the short-name handy. If you don't, follow the link above and fetch it.

The HTML gadget provided here is just a small tweak to the manual instructions on the Disqus website - namely, it ensures that the div containing the contents isn't rendered (which sometimes results in extra dividers, etc).

Content of the HTML gadget is:

<script>
  var disqus_shortname = 'EXAMPLE';
</script>

And the custom markup for the HTML gadget is:

<b:includable id='main'>
  <b:include name='super.main' />
  <script type='text/javascript'>
    if (!disqus_shortname
        || disqus_shortname === 'EXAMPLE') {
      alert('You did not set your disqus_shortname!'
          + ' Set it by editing the <data:widget.instanceId /> gadget.');
    }

    var disqus_blogger_current_url =
        '<data:view.url.canonical.jsEscaped />';
    if (!disqus_blogger_current_url.length) {
        disqus_blogger_current_url = '<data:view.url.jsEscaped />';
    }
    var disqus_blogger_homepage_url =
        '<data:blog.homepageUrl.jsEscaped />';
    var disqus_blogger_canonical_homepage_url =
        '<data:blog.homepageUrl.canonical.jsEscaped />';
  </script>

  <b:if cond='data:view.isSingleItem'> 
    <style type='text/css'>
      #comments { display:none; }
      /* Hide this gadget's containing div. */
      #<data:widget.instanceId /> { display: none; }
    </style>

    <script type='text/javascript'>
      (function() {
        var bloggerjs = document.createElement('script');
        bloggerjs.type = 'text/javascript';
        bloggerjs.async = true;
        bloggerjs.src = '//' + disqus_shortname + '.disqus.com/blogger_item.js';
        var parent = document.getElementsByTagName('head')[0]
          || document.getElementsByTagName('body')[0];
        parent.appendChild(bloggerjs);
      })();
    </script>
  </b:if>

  <style type='text/css'>
      .post-comment-link { display: none; }
  </style>

  <script type='text/javascript'>
    (function() {
      var bloggerjs = document.createElement('script');
      bloggerjs.type = 'text/javascript';
      bloggerjs.async = true;
      bloggerjs.src = '//'
          + disqus_shortname
          + '.disqus.com/blogger_index.js';
      var parent = document.getElementsByTagName('head')[0]
          || document.getElementsByTagName('body')[0];
      parent.appendChild(bloggerjs);
    })();
  </script>
</b:includable>

It's not working!

There's several reasons that Disqus may fail to load on your blog.

G+ Comments are enabled

Disqus's JS for replacing the commenting system is actually pretty trivial, and it doesn't handle replacement of G+ comments. Head to your settings (blogger.com, [Your blog], Settings, Posts and Comments) and disable them.

Your template uses an unrecognized post class

Welp. You're going to have to make sure that your post-container bodies have a class recognized by the Disqus JS:

var posts = blog_block.getElementsByTagName('div');
for(var i = 0; Math.min(i, posts.length) != (posts.length); i++) {
  if (hasClass(posts[i], "hentry") || hasClass(posts[i], "post") || hasClass(posts[i], 'disqus-blogger-post'))
    change_links(posts[i]);
  }
}

i.e. hentry, post, or disqus-blogger-post

Happy commenting!