How to Add a Comments Plugin to Your Ghost Blog?

Until Ghost implements native comments like WordPress that ship out of the box, you'll need to add them manually. Some themes arrive with the code for a specific comments plugin already included, and you need to add your API Key or whatever means to make it unique to your site.

In this guide, we won't be looking at those. We will be looking at how to include a comments plugin in a Ghost theme that doesn't have it. A good example would be Casper - Ghost's default theme.

Let's dive in!

Pick a Comments Plugin

There are many options in the market. Here are some of them: Hyvor Talk (which I use), Commento, Cove Comments, Disqus, etc.

The options are only one google search away! Choose your favorite one!

Get The Plugin's Installation Code

The plugin you'll sign up for will give you a snippet of code that you'll have to include in your theme for comments to show up.

Here's an example of Hyvor Talk's code with the site ID redacted:

            <div id="hyvor-talk-view"></div>
            <script type="text/javascript">
                var HYVOR_TALK_WEBSITE = HYVOR_TALK_WEBSITE_CODE;
                var HYVOR_TALK_CONFIG = {
                    url: false,
                    id: "{{comment_id}}"
                };
            </script>
            <script async type="text/javascript" src="//talk.hyvor.com/web-api/embed.js"></script>

Instead of HYVOR_TALK_WEBSITE_CODE , you'll have a specific number for your website.

Add The Code to Your Theme

Now that you got your code, it's time to add it to your theme. The most logical place would be on the handlebars page that defines your blog posts.

On Casper, it's a file named post.hbs

Helpfully, the ghost team had already made a placeholder section for comments on Casper. If you CTRL+F and look for the word 'comments', you should see something like this:

        {{!--
        <section class="article-comments gh-canvas">
            If you want to embed comments, this is a good place to paste your code!
        </section>
        --}}

That piece of code is commented out. Which means it doesn't affect anything. You'll have to remove those comment brackets from the top and bottom and replace the internal text with your comment code.

Zip Up and Upload

Compress the entire folder that includes your theme (and modified post.hbs) and upload it as a new theme to ghost admin through Settings -> Design.

If everything went well, you could see it as an option to activate now.

Activate The Theme

Click Activate on the theme and visit your website. If it worked well, a lovely comments plugin should appear on any of your blog posts.

Conclusion

Today's article talked about the steps needed to add a comments plugin to your website. To recap:

1. Choose your plugin.
2. Get its installation code.
3. Add it to your theme in the right place.
4. Zip up and upload the theme.
5. Activate it and verify by visiting your blog's posts.

Would you like to automate this process? I recently wrote a guide about how to fork Casper and automatically update your ghost site with an updated theme whenever you make a change to the main branch on that repository.

Check it out here and save yourself some time.

Thanks for reading! Have any questions? Post them below!