Ghost Blogs: Adding Disqus Comments with Comment Count

Disqus is now added to my ljdelight.com site! Thanks to the help of several tutorials, I had almost no issues adding Disqus to Ghost. However, tutorials that I followed did not get the comment counts added to Ghost v0.7.0 (Ghost uses trailing slashes on all URLs and this seems to confuse Disqus). Here I explain the Disqus setup to enable comments, and add comment counts (working with Ghost v0.7.0 anyway).

Before we start, look at the comment count at the top of this page, and the comments at the bottom; that's what your site will look like! We'll be making small modifications to these files and accomplish these goals:

  • /var/www/ghost/content/themes/casper/post.hbs
    • Adding Disqus Universal Code to add comments
    • Show comment count at the top of a post
  • /var/www/ghost/content/themes/casper/default.hbs
    • Adding the one-line Disqus Universal code for comment counts
  • /var/www/ghost/content/themes/casper/partials/loop.hbs
    • Show comment count in the list of posts

1. Create a Disqus account, add script to post.hbs

First create your Disqus account and obtain Disqus' "Universal Code" for your site. Then open /var/www/ghost/content/themes/casper/post.hbs with vim.

There are several potential places for the universal code, and I found the easiest location to be in the <section class="post-content"> just after the {{content}}. Inserting the code here gets the comments to match the width of the post, making for a very pretty page.

Below is how the Disqus code should be modified for Ghost. Be sure to update the REPLACE_THIS_WITH_YOURS to what Disqus has for your site. Read more about why you should set Disqus configuration variables here.

Here's an example snippet of post.hbs:

<section class="post-content">  
    {{content}}
    <!-- Disqus universal code pasted below. Copy after this point -->
    <div id="disqus_thread"></div>
    <script>
        var disqus_config = function () {
            this.page.url = '{{post.url}}';
            this.page.identifier = '{{post.id}}';
        };
        (function() { // DON'T EDIT BELOW THIS LINE
            var d = document, s = d.createElement('script');
            s.src = '//REPLACE_THIS_WITH_YOURS/embed.js';
            s.setAttribute('data-timestamp', +new Date());
            (d.head || d.body).appendChild(s);
        })();
    </script>
    <noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript" rel="nofollow">comments powered by Disqus.</a></noscript>
    <!-- End of disqus addition -->
</section>  

Save post.hbs and restart Ghost (service ghost restart). You now have Disqus comments!!

2. Add the Disqus Comment Count Script to default.hbs

Next copy Disqus' one-line Universal Code for comment count, and add it to your /var/www/ghost/content/themes/casper/default.hbs. I added the single line as the last element of <body>, just before the closing tag.

Snippet of the modified default.hbs:

<body class="{{body_class}} nav-closed">  
    {{navigation}}
    ... code ...
    <script id="dsq-count-scr" src="//REPLACE_THIS_WITH_YOURS/count.js" async></script>
</body>  

Finally, we're ready for the links which tie in the comment counts. Here's the link that we'll add: <a href="{{url}}#disqus_thread" data-disqus-identifier="{{id}}">Comments</a>. The href goes to the comment section when clicked, and the disqus-identifier is for the comment count.

3.1 Modify post.hbs

The /var/www/ghost/content/themes/casper/post.hbs does the displaying of posts. You can add the above anchor anywhere you want the comment count to appear in a page. If you look at the top of this post that you're reading, you'll see mine is added at the header.

Here's what that looks like in post.hbs:

<header class="post-header">  
    <h1 class="post-title">{{title}}</h1>
    <section class="post-meta">
        <time class="post-date" datetime="{{date format='YYYY-MM-DD'}}">{{date format="DD MMMM YYYY"}}</time> {{tags prefix=" on "}}
        <!-- added the anchor -->
        <a href="{{url}}#disqus_thread" data-disqus-identifier="{{id}}">Comments</a>
    </section>
</header>  

3.2 Modify loop.hbs

The loop.hbs file is for the home page's "list" of posts. Modify the file and add the anchor at the end of the <footer class="post-meta"> section. I set class="post-date" on the anchor to get the nice vertical separator.

Here's example code for loop.hbs:

<footer class="post-meta">  
    ... code ...
    <time class="post-date" datetime="{{date format='YYYY-MM-DD'}}">{{date format="DD MMMM YYYY"}}</time>
    <a class="post-date" href="{{url}}#disqus_thread" data-disqus-identifier="{{id}}">Comments</a>
</footer>  

And you're done! Just restart Ghost again and your posts will have comments plus comment counts.

If I missed anything, comment below. Comments are working :)


Powered by Digital Ocean

Click the image for a $10 referral