Adding disqus comment counts to ghost themes on linux server

You should first have disqus comments in your posts enabled. Check this post to see how.

Log on to your linux ssh terminal and lets go to the ghost themes directory.

[ahmed@amayem ~]$ cd /var/www/ghost/content/themes/

You should be running ghost using its own user, which is probably called ghost. Since we will be modifying things to do with ghost its best if we switch to the ghost user so we don’t have to keep sudoing and messing up file ownership.

[ahmed@amayem themes]$ sudo su ghost

Cool we are now acting as the ghost user. Let’s check which themes we have.

[ghost@amayem themes]$ ls
casper  casper-disqus  ghostwriter

We will continue our modifications in casper-disqus as in the the last post.

[ghost@amayem themes]$ cd casper-disqus/

We want the comment counts to appear on the index page beside each post. The file index.hbs looks promising.

Setup

Make sure you have your code from disqus to insert. Disqus should give it to you when you login to your account with them. It will look similar to this:

<script type="text/javascript">
    /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
    var disqus_shortname = 'ahmedamayemcom'; // required: replace example with your forum shortname

    /* * * DON'T EDIT BELOW THIS LINE * * */
    (function () {
        var s = document.createElement('script'); s.async = true;
        s.type = 'text/javascript';
        s.src = '//' + disqus_shortname + '.disqus.com/count.js';
        (document.getElementsByTagName('HEAD')[0] || document.getElementsByTagName('BODY')[0]).appendChild(s);
    }());
 </script>

It’s just a script tag so we can really put it anywhere a <script> tag can go, but preferrably near the bottom of the the page. We can put it into default.hbs, but then it would be on every page. I’d like it to only be on the index page. Simply paste it into index.hbs before the </main> tag. The next step is to add the tags that show the comment counts. On my disqus account it’s telling me to

Append #disqus_thread to the href attribute in your links. This will tell Disqus which links to look up and return the comment count. For example: <a href="http://foo.com/bar.html#disqus_thread">Link</a>.

Now time to do some experimentation. If you just want the solution feel free to jump to the final try

First Try

Looking at post.hbs I see the following part of the code:

{{#foreach posts}}

<article class="{{post_class}}">
    <header class="post-header">
        <span class="post-meta"><time datetime="{{date format='YYYY-MM-DD'}}">{{date format="DD MMM YYYY"}}</time> {{tags prefix="on "}}</span>
        <h2 class="post-title"><a href="{{url}}>{{{title}}}</a></h2>

    </header>
    <section class="post-excerpt">
        <p>{{excerpt}}…</p>
    </section>
</article>

{{/foreach}}

Seems like its saying that for each post it will output that html fragment. The a tag is especially interesting: <a href="{{url}}>{{{title}}}</a>. If I just add a #disqus_thread to it I should get a comment count. Move your cursor to the there, press i to enter insert mode and append #disqus_thread so that it looks like this:

<h2 class="post-title"><a href="{{url}}#disqus_thread">{{{title}}}</a></h2>

Exit insert mode using Esc or ctrl+c and save with :x. Restart ghost:

[ghost@amayem casper-disqus]$ forever list
info:    Forever processes running
data:        uid  command       script                  forever pid   logfile                       uptime        
data:    [0] v7zw /usr/bin/node /var/www/ghost/index.js 914     15304 /home/ghost/.forever/v7zw.log 0:0:24:24.727 
[ghost@amayem casper-disqus]$ forever restartall
info:    Forever restarted processes:
data:        uid  command       script                  forever pid   logfile                       uptime       
data:    [0] v7zw /usr/bin/node /var/www/ghost/index.js 914     15304 /home/ghost/.forever/v7zw.log 0:0:24:29.31 

Now let’s check what we have on our live blog aaaannnnddd WHOAA, that doesn’t look good. Instead of my post titles I am seeing a huge 0 Comments. The fact that it is zero doesn’t help. Anyways, I got it now, it seems that the #disqus_thread link only returns back the comment count number … just as disqus said earlier. Man, I gotta read the instructions better. But wait something else is weird. Some of my titles haven’t changed into comment numbers. But when I click on those and see the disqus comment box load there, then return to the index page and do a hard refresh it changes into the comment counts. It seems that disqus needs to be loaded in the post at least once to allow the comment counts to work. Just make sure you open all your posts at least once with disqus so the counts work.

Final Try

Now we know exactly what we need to do. Let’s head back to index.hbs.

Some people might like to add the comment counts before the comment title somwhere next to the tags. I think it looks better under the post title. I’ve added both in this code snippet. See which one you prefer or play around with its position:

<article class="{{post_class}}">
    <header class="post-header">
        <span class="post-meta"><time datetime="{{date format='YYYY-MM-DD'}}">{{date format="DD MMM YYYY"}}</time> {{tags prefix="on "}} <a href="{{url}}#disqus_thread"></a></span>
        <h2 class="post-title"><a href="{{url}}">{{{title}}}</a></h2>
    <span class="post-meta"><a href="{{url}}#disqus_thread"></a></span>

    </header>
    <section class="post-excerpt">
        <p>{{excerpt}}…</p>
    </section>
</article>

We now have comment counts. Enjoy!

References

1. Ghost Doc Themes
2. Disqus installation article, which I found through this post by Christoph Voigt.