How to add a comment feature to Ghost blogs?

Comment is one of the most engaging feature for any blog. Ghost is one of the best blogging platforms with a great user experience, but unfortunately, it doesn't support any comment support out of the box. Though there are a few options that Ghost suggests they are mostly paid services or ads integrated solutions. If you are ok with adding such a solution then you can go to the below link.

Ghost integrations – official apps, plugins & tools

Ghost plugins, tools & apps to integrate withh your Ghost site for automation, analytics, marketing, support and much more! 👉

Ghost - The Professional Publishing Platform

When I wanted to add comment support to this blog, I wanted something very simple. One option which stood out was utterances

Utterances

A lightweight comments widget built on GitHub Issues. Use GitHub issues for blog comments, wiki pages, and more!

utterances

A lightweight commenting system using GitHub issues.

Utterances

Since my blogs are developer-focused, it made sense to have comment service identity tied to GitHub login. The installation step is pretty easy and straightforward.

Installing Utterances to ghost blog

• Create a new repository in GitHub and keep the repository public
• Make sure the utterances app is installed on the repo, otherwise users will not be able to post comments.
• Go to utterances and configure the Blog Post ↔️ Issue Mapping and get the script

After this you would get a script which needs to be added to the ghost blog. You can simply add the script to the following section

Settings -> Code Injection (Advanced Section) -> Site Footer

<script src="https://utteranc.es/client.js"
        repo="[ENTER REPO HERE]"
        issue-term="pathname"
        theme="github-light"
        crossorigin="anonymous"
        async>
</script>

This works as expected, but there are a few issues with having this added like this.

• Comment dialog is shown on every page
• Comment dialog is shown after the footer section. Hence not a great user experience

How to custom configure comment dialog?

If you check my current blog, you would see that the comment section is added right after the post. This can be achieved in 2 ways:

• The easy way: You can modify the template and add the script tag to be inserted in the blog detail template, in the exact position where you want your comments to be visible. Pitfall, you will have to update the theme template and carries some risk of template failure, with my past experience of messing up with ghost templates, I tend to avoid this approach.
• The hard way: Follow the below steps to modify comment position without template change.

Just like adding a new script tag, we are going to add a new script tag to the Site Footer section.

<script type='text/javascript'>
$( document ).ready(function() {
    if(document.getElementsByClassName('read-more-wrap')[0]){
        var script_tag = document.createElement('script');
        script_tag.setAttribute('type', 'text/javascript');
        script_tag.setAttribute('src', "https://utteranc.es/client.js");
        script_tag.setAttribute('repo', "<public repo>");
        script_tag.setAttribute("issue-term", "url");
        script_tag.setAttribute('theme', "github-dark");
        script_tag.setAttribute('crossorigin', "anonymous");
        script_tag.setAttribute('async', '')
        document.getElementsByClassName('site-main')[0].appendChild(script_tag);
    }
});
</script>

Let me explain what I am doing (Disclaimer: works with Casper theme)

• We can observe that the read-more-wrap section is only present for posts detail URLs. So the following section would only return true if the posts detail page is open

if(document.getElementsByClassName('read-more-wrap')[0])  

• Inside the if the statement we are creating a new script node DOM element and then appending to site-main  section which has the post body content. Do update the attribute as per the script tag which is generated previously.

That's it, now you have comments added ✌️