Ghost Theming: Adding Disqus Comments Count

Around six months ago I wrote my theme for this blog. Overall I was happy with the clean design of it, but I still felt that it lacked something and wasn't enticing enough to the audience. A great way to get your audience engaged in your posts is to provide a quick way for visitors to move navigate directly to the comments section.

Ghost is still in it's infancy, having launched as a Kickstarter campaign back in 2013, so it's lacking in additional features such as comment counts meaning we, as a Ghost theme developers, need to work hard to make our themes as compelling an offer as possible.

To successfully add Disqus comments to your own Ghost theme you need to do a couple of things:

  1. Add a div including markup for the comment count;
  2. Add hyperlink to jump to the post comments;
  3. Add a placeholder anchor so the hyperlink knows where to jump the user to when clicking it;
  4. Javascript for calculating how many comments there are in the Disqus post;

Firstly we create a div in the post.hbs file that contains markup and a hyperlink reference to the Disqus comments thread at the bottom of the blog post. This is defined by the href {{post.url}}#disqus_thread_comments where #disqus_thread_comments refers to the anchor Id we'll be creating later. {{post.url}} refers to the name of the current blog post page:

    <div class="comment-count">
                <span class="glyphicon glyphicon-comment" aria-hidden="true"></span>
                <a class="comment-count-text" href="{{post.url}}#disqus_thread_comments"><span class="disqus-comment-count" data-disqus-url="{{@blog.url}}{{url}}"></span></a>
              </div>

Once we've added the markup for the comment count let's add the placeholder anchor that we're linking to. This anchor needs to be placed just before where the Disqus comments section is. I've placed this in the posts.hbs file just at the end of the <article> tag:

    <a name="disqus_thread_comments"></a>

Next, our task is to add the custom Javascript that will populate the hyperlink text for the comments count. I put this in a file named comments.js inside the \js folder.

    $(document).ready(function() {
        $('#disqus_thread iframe').load(function () {
        $('#disqus_thread iframe').add('a').attr('name', 'disqus_thread_comments');
        $('#disqus_thread iframe').attr('name', location + '#disqus_thread_comments');
        });
    });

Next we need to pull in the Javascript in the default.hbs file inside the top of the <body>:

    <script async src="{{asset "js/min/comments.min.js" }}"></script>

I've minified the javascript (you can use any kind of online minifier or use a grunt-contrib-uglify task as part of your grunt build mechanism. This, along with the async keyword will speed up page load speeds no end.

That should be it! Check out the comments link on this blog if you'd like to see it in action.

Please subscribe to my Twitter if you're interested in keeping up to date with the latest updates.

James Murphy

Java dev by day, entrepreneur by night. James has 10+ years experience working with some of the largest UK businesses ranging from the BBC, to The Hut Group finally finding a home at Rentalcars.

Manchester, UK
comments powered by Disqus