Product Dev Back to Ghost

Adding a comment count to your blog with Disqus

So you've got Disqus set up for commenting on your Ghost blog and now you want to display a comment count with each of your blog posts... but how?

The setup isn't too difficult, but does require a bit of theme editing. For the purpose of this tutorial, we're going to work with the default Ghost theme, Casper, although the steps should be very similar with any other theme.

Let's begin.

Grab your Disqus script

On the Disqus installation page where you retrieved your Universal Code, there should be a section just below the main script that covers "How to display the comment count."

As stated on the Disqus website's instructions, the snippet they provide you will need to be placed before the closing </body> tag, like this:

<script id="dsq-count-scr" src="//ghostdemoblog.disqus.com/count.js" async></script>  
</body>  

Update your post-meta details

Next, you'll need to open and locate the post-meta information that displays on the homepage of your theme.

In the Casper theme, the post-meta information is located in the <footer> block of code on the loop.hbs file (located in the partials directory of the theme. It should look similar to the snippet below:

<footer class="post-meta">{{#if author.image}}<img class="author-thumb" src="{{author.image}}" alt="Author image" />{{/if}}  
{{author}}
{{tags prefix=" on "}}
<time class="post-date" datetime="{{date format='YYYY-MM-DD'}}">{{date format="DD MMMM YYYY"}}</time></footer>  

Once you've located your post-meta information, you will need to add <a href="{{url}}#disqus_thread">Comments</a> wherever you'd like the comment count to display. This piece of code will update automatically to display the number of comments that particular post has based on the {{url}} of the post.

Note:You do not have to place the comment count reference in the post-meta, it can be located anywhere within the {{foreach}} loop.

The final code should look something like this:

<footer class="post-meta">{{#if author.image}}<img class="author-thumb" src="{{author.image}}" alt="Author image" />{{/if}}  
{{author}}
{{tags prefix=" on "}}
<time class="post-date" datetime="{{date format='YYYY-MM-DD'}}">{{date format="DD MMMM YYYY"}}</time>  
<a href="{{url}}#disqus_thread">Comments</a></footer>  

Once the comment count code has been added, you can style the output the same way you would style any other part of your blog's theme.

If everything has been added correctly, you should start seeing the comment count with your posts on the homepage of your blog.