Product Dev Back to Ghost

How to use Discourse for commenting on your Ghost blog

As a Ghost user, you have several choices when it comes to selecting a commenting platform. For example, you could setup Disqus, Google+, or even use Facebook if you wanted.

There's no right or wrong choice, they all enable the same feature - to allow your readers to leave commentary on your Ghost blog.

I will admit, some services are much easier to setup than others, but for those up to the challenge, why not try Discourse for a change?

Discourse, like Ghost, is an open source discussion platform. It can work as a mailing list, a discussion forum, a long-form chat room, AND... you guessed it, a commenting platform!

Setting up Discourse

The purpose of this tutorial is not to teach you how to setup Discourse, but rather to walk you through connecting Discourse to your blog. If you're interested in installing Discourse, their team has a very thorough guide that will get you setup on DigitalOcean in under 30 minutes. If you'd prefer a more hands-off approach, Discourse does have a few paid hosting options, which aim to take the hassle out of setup. However (and wherever) you decide to get Discourse up and running is entirely up to you.

Embedding Discourse

After you've installed and configured your Discourse site, you'll need to connect it to your Ghost blog. To do this, log in to your Discourse site, and access the Embedding settings by going to,

Admin > Customize > Embedding.

On the Embedding screen, click the Add Host button to reveal a set of empty fields. In the empty field underneath Allowed Hosts, type in the URL to your Ghost blog.

Underneath Post to Category, select a Category for your blog posts to be added on your Discourse site. When finished, click the checkmark to the right of the category drop down to save your settings.

Once your blog has been added as an Allowed Host, Discourse will provide you with an embed code and some additional Embedding and Feed Settings. These settings will need to be filled out before you continue. Below is an example of how the settings should be filled out.

Note: There are other settings you can fill out on this screen, but for the purpose of this tutorial, we will only focus on the Embedding and Feed settings.

Editing the Discourse embed code

Once you've added your blog as an Allowed Host, and configured your Embedding/Feed settings, you can start playing with your Discourse embed code. The embed code should look similar to the code below, and will appear just above the Embedding Settings.

<div id='discourse-comments'></div>

<script type="text/javascript">  
  DiscourseEmbed = { discourseUrl: 'http://path/to/your/discourse/',
                     discourseEmbedUrl: 'REPLACE_ME' };

  (function() {
    var d = document.createElement('script'); d.type = 'text/javascript'; d.async = true;
    d.src = DiscourseEmbed.discourseUrl + 'javascripts/embed.js';
    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(d);
  })();
</script>  

This short piece of code is what we're going to use to collect and display your Discourse comments on your blog. Pretty neat, right?

Go ahead and copy your embed code, and open it up in an HTML or text editor; there's a few things you'll need to change before we can slap this on your blog. For starters, you need to add in a value for the discourseEmbedUrl.

Right now, your discourseEmbedUrl is filled with a value called, 'REPLACE_ME'. This needs to be replaced with http://yourdomain.com{{url}}. Notice how there is no trailing / before the {{url}} helper.

It's important that the discourseEmbedUrl is setup correctly, because this is what ties your blog post directly to it's thread on your Discourse site - and vice versa, Discourse will know what to look for when checking for (and displaying) new comments.

Editing your theme

Once you've got a fully configured Discourse embed code ready to go, you need to actually get the code onto your blog. To do this, you'll have to go under the hood, and edit your theme files, specifically your post.hbs file.

For this tutorial, I'm going to add the Discourse embed code to the default Ghost theme, Casper.

To add the code, find and open your theme's post.hbs file in an HTML editor. This is the template file that controls single blog posts. Anything we add or change on this file will carry throughout every post.

Once the file has been opened, you will need to paste the code within the opening and closing {{post}} {{/post}} helpers. This will ensure that the {{url}} helper you added to our embed code earlier, properly loads the URL of the blog post.

On the Casper theme, I've pasted my Discourse embed code before the closing </article> tag aswell, so that the comments will display directly below my author and sharing details and conform to the width of my blog post's content.

When you've finished editing the post.hbs file, you'll need to save your changes, then upload your theme to your blog. Once your theme has been uploaded, your Discourse comments should now appear with each of your blog posts, AND your blog posts should appear on your Discourse site.

Common Errors

  • If your blog uses https, be sure to use https on your discourseEmbedUrl, otherwise you may run into problems.
  • If your blog posts are not appearing in Discourse, try checking your feed URL or clearing your browser cache then viewing Discourse again.