Adding Comments to a Ghost Blog

Disqus is a third party that interacts seamlessly with Ghost to provide this functionality.

Adding Comments to a Ghost Blog

Getting feedback on your posts through comments is a valuable way to keep your writing current and to build a community from your blog site. Disqus is a third party that interacts seamlessly with Ghost to provide this functionality.

This site is going to remain comment free (see this post where I explained why), but I have another site that’s related to sports, rugby in particular, which is more suited to getting a discussion going. What do sports fans like more than to say how they could do it better?

The site is bluegreenrugby.club and like this one it is still in its infancy. But I thought the time right to let anyone who comes across it to add feedback.

Sign Up, Set Up

The first step is to sign up at Disqus.com and select the option to add comments to your site. Note that you need to verify the email address that you sign up with - their email went into the spam folder for me when I registered, so check there if you don’t get it immediately.

Disqus supports a lot of platforms - select Ghost from the list. The selection panel looks like this:

disqus_supported_platforms

The instructions are then given but they are, perhaps overly complicated. Here’s a simpler way.

Basically you need to edit the template that displays all the posts on the site. This is done by editing post.hbs within your theme. I’m using Casper at the moment and it already has a block of code written that you can uncomment.

First back up the existing file after connecting to your server and then edit the file:

cd /var/www/<your ghost install folder>
cp content/themes/casper/post.hbs /tmp/post.hbs.bak
vi content/themes/casper/post.hbs

Use a different editor such as nano if you don’t like vi. Search for “comments” (in vi type “/” and then the word and the enter) and you will find the following commented out block:

{{!--

If you use Disqus comments, just uncomment this block.
The only thing you need to change is "test-apkdzgmqhj" - which
should be replaced with your own Disqus site-id.

<section class="post-full-comments">
    <div id="disqus_thread"></div>
    <script>
        var disqus_config = function () {
            this.page.url = '{{url absolute="true"}}';
            this.page.identifier = 'ghost-{{comment_id}}';
        };
        (function() {
            var d = document, s = d.createElement('script');
            s.src = 'https://test-apkdzgmqhj.disqus.com/embed.js';
            s.setAttribute('data-timestamp', +new Date());
            (d.head || d.body).appendChild(s);
        })();
    </script>
</section>
--}}

To uncomment, move the last line with --}} to just before the line beginning with <section and then replace the URL with the one you should have received when signing up with Disqus, as indicated in the comments.

You will need to restart Ghost to pick up the changes. Note that you’ll need to do this as the same user that you used to install Ghost. No need to run as sudo - the command requests this as it runs.

ghost restart

Back on the Disqus sign up process, the last step allows you to add additional description and colour suggestions so that the comment block aligns with you website.

The following is what it ends up looking like. Note that Disqus allows various ways of logging in with social media or by creating an account directly with them.

comment-block

Policy

One of the additional items that you can fill in is the URL for a comment policy URL. This should be a page rather than a post and be hosted at your site. You can do this in Ghost by creating a post as normal, then on the settings side bar (click the cog in the upper right corner) select the option “Turn this post into a page”.

I think this is a good idea to write the comment policy at an early stage. It helps to avoid anger later when you have to remove a comment that breaches your rules. Harder to do if you have not written the rules yet. Disqus has a helpful page that you can use to craft you own comments page, but there are many examples out there. Here’s what I came up with: http://bluegreenrugby.club/comment-policy/

There is also a shorter summary of the policy that you can add. This appears just before the comment block.

Comment_policy_

Moderating

Now that people can comment on your blog, are you going to be a watchdog to stop people abusing your new, shiny policy? This is a part of the reason that I don’t have comments on this blog, I don’t want the hassle of having to check these.

Disqus appears to have a pretty decent interface for managing comments. The dashboard gives you a count of the number of pending comments and allows you to see each one only once.

There is also the option to add other moderators who can police the comments on your behalf. If someone follows your posts and offers good feedback regularly, why not reach out to them and ask them to lend a hand to keep the comments adding value to everyone?

If it all gets to be too much, you can always just pull the plug. Comment back out the section above and restart Ghost and all those nasty comments disappear. If life is just not worth going through it all, there’s a button within the Settings section to simply delete everything. Goodbye, good riddance.

Advertising

Disqus offer a free service which should be sufficient for a small blog. But this is based on getting advertising fees through ads that appear within the comments section. The ads kick in after a certain amount of time rather than appearing immediately.

There is some basic configuration you can use to keep the ads as close as possible to the purpose of the site, but if this is a real turn off for you there are paid options that allow ads to be turned off permanently.

All in all this was a pretty painless process to add a valuable resource to the site. The advertising is a small price to pay for having comments slot so easily into the page.

I may make a few changes to the post.hbs to change how comments show up. On some blogs I’ve visited, the comments are hidden so that they only appear if the person is interested in seeing existing comments or in making their own. A button or link activates a javascript control to hide or display the entire comments section, including the ads.

It’s not only because of the advertisements that I’d consider this; sometimes comments can go to hundreds of lines, dwarfing the original post and making the page enormous. Have you ever printed off a post without realising it was mostly comments? I have and it was annoying.

Before I do this I’ll check the terms of service at Disqus - they may frown upon this. But if there are no problems and I give this a go, I’ll add a future post with the details.