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.
When I wanted to add comment support to this blog, I wanted something very simple. One option which stood out was
A lightweight comments widget built on GitHub Issues. Use GitHub issues for blog comments, wiki pages, and more!
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
- 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 Mappingand 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
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.
Let me explain what I am doing (Disclaimer: works with Casper theme)
- We can observe that the
read-more-wrapsection is only present for posts detail URLs. So the following section would only return true if the posts detail page is open
- Inside the
ifthe statement we are creating a new
scriptnode DOM element and then appending to
site-mainsection 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 ✌️