Discourse + Ghost

Connect your Ghost site with your forum and unlock a fully-functional commenting feature on posts and pages on your publication

1. Create an embeddable host on Discourse

The first step is to login to your Discourse account and create an embeddable host, since this is where your comments will be hosted and embedded into your Ghost posts.

Go to Admin > Customise > Embedding in your Discourse instance and create a new host and enter some information:

• Allowed Hosts should be the hostname (your Ghost domain) where you want to embed your comments - note the lack of http:// and path.
• Class Name is a class name that will be attached every time your iframe is rendered. You can use this for styling purposes.
• Path Whitelist allows you to specify the paths that will accept your embed. In this example, we want the embeds to appear on the /blog/ path.
• Post to Category - if you supply a category alongside the host you are entering, posts imported from that host will automatically end up in that category.

Once you save your new host, you should also ensure that there is a correct user entered in the settings menu. This is the Discourse user who will create topics, and is usually populated with the admin user.

2. Edit the HTML provided

Once your new host is created, Discourse will provide the following snippet of code:

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

<script type="text/javascript">
      if (window.location.pathname.indexOf('/p/') < 0) {
  DiscourseEmbed = { discourseUrl: 'https://example.com/',
                     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>

It will automatically enter your discourseUrl and leave a REPLACE_ME line where you'll need to enter the URL where your comments will be embedded. Since we want to embed comments across all posts on the /blog/ route, we'll need to use a helper to automatically generate the values, for example: {{url absolute="true"}}.

3. Paste the embed code into post.hbs

Once your code is good to go, the next step is to paste it into the post.hbs template in your theme files. This template is for all posts on your site. Here's what our final code snippet looks like in this example:

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

<script type="text/javascript">
      if (window.location.pathname.indexOf('/p/') < 0) {
  DiscourseEmbed = { discourseUrl: 'https://example.com/',
                     discourseEmbedUrl: '{{url absolute="true"}}';

  (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>

A good spot for this code is right after the content in the template file. In Casper, Ghost's default theme, you'll see a line of code specifically reserved for inserting comments - paste your Discourse code here:

        {{!--
        <section class="post-full-comments">
            If you want to embed comments, this is a good place to do it!
        </section>
        --}}

Make sure you remove the comments

4. Update your active theme

Once you've done this, all that's left is to update your active theme by uploading a fresh .zip in Ghost Admin in the Design settings. The next time your existing posts are visited, the Discourse thread will be created, and you'll be able to see the comments function at the bottom of your posts.

5. Styling your Embedded content (Optional)

On the latest build of Discourse it is possible to add a stylesheet for your embedded comments. Visit Admin > Customise > CSS/HTML > Embedded CSS and you can add a custom styling for your comments threads.

Copyright statement: Unless otherwise stated, all articles on this blog adopt the CC BY-NC-SA 4.0 license agreement. For non-commercial reprints and citations, please indicate the author: Henry, and original article URL. For commercial reprints, please contact the author for authorization.