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!

Comments

Post a Comment

Popular posts from this blog

Filter out certain labels from my Blog Homepage

Change the landing page of my blog

Get Facebook to show feature image for your Blog's Homepage