How to add comments to a Ghost site
Add EchoThread comments to Ghost. Edit post.hbs in Source or Casper, replace Ghost's members-only comments, keep threads keyed to the post ID, and theme the widget.
On this page
Why Ghost + EchoThread
Ghost has had native comments since 5.0, but they are tied to Ghost members: a reader has to create an account on your publication before they can say anything. That is a deliberate design choice for paid newsletters and a poor one for a public blog, where most readers will not sign up to leave one sentence.
EchoThread replaces that block with open commenting — Google, GitHub, X, and Facebook sign-in, or guest comments if you allow them — plus threaded replies, emoji reactions, and ML spam filtering. The widget is under 60 KB gzipped and loads asynchronously from a CDN, so a Ghost page stays as fast as Ghost made it.
Prerequisites
- A Ghost site (5.x or later) where you can change the theme
- An EchoThread account — create one free
- Your site's API key from the EchoThread dashboard
Ghost has no plugin system, so this is a theme edit. You do not need a local Ghost install: download the active theme from Settings → Design & branding → Theme → Download, change one file, and upload the folder back.
Step 1 — Edit post.hbs
Open post.hbs in your theme and find the comments block. In Source, Ghost's current default theme, it looks like this:
{{#if comments}}
<div class="gh-comments gh-canvas">
{{comments}}
</div>
{{/if}}
In Casper the wrapper is a <section> with the class article-comments gh-canvas, but the {{#if comments}} guard and the {{comments}} helper are identical. Replace the whole block with the EchoThread container and script:
<div class="gh-comments gh-canvas">
<div id="echothread"
data-api-key="YOUR_API_KEY"
data-page-url="{{url absolute="true"}}"
data-identifier="{{id}}"
data-page-title="{{title}}"></div>
<script src="https://cdn.echothread.io/widget.js" async></script>
</div>
Replace YOUR_API_KEY with the public API key from your EchoThread dashboard. It is designed to live in page source — it only lets visitors read and post on your registered site.
Three Handlebars values do the work. Inside post.hbs the template context is the post itself, so {{id}} is the post's ID, {{title}} is its title, and {{url absolute="true"}} is its full public URL — the absolute attribute matters, because without it Ghost emits a relative path.
Step 2 — Upload the theme
Zip the theme folder and upload it under Settings → Design & branding → Theme → Upload theme. Ghost activates the new version immediately; reload any post and the widget appears where Ghost's comments used to be.
If you are running Ghost yourself, editing the theme on disk works too — restart Ghost, or re-upload, so the template cache is rebuilt.
Step 3 — Ghost's own comments
Once the block above is replaced, Ghost's comments no longer render, because {{comments}} is the only thing that outputs them. You can leave the setting alone.
If you would rather turn it off explicitly, set Settings → Membership → Commenting to Nobody. That stops Ghost sending its own comment notification emails, which would otherwise be confusing once the real discussion lives in EchoThread.
Choosing an identifier
The snippet above uses {{id}} — Ghost's internal object ID, a 24-character string that never changes. That is the right choice: change a post's slug and its URL changes, but the ID does not, so the discussion stays attached to the post.
If you omit data-identifier entirely, EchoThread keys the thread to the page URL instead. That is simpler but fragile on Ghost, where editing a title often rewrites the slug.
Theming
The widget reads your page's colour scheme by default. To pin it, add data-theme="dark" or data-theme="light", and set an accent with data-accent-color:
<div id="echothread"
data-api-key="YOUR_API_KEY"
data-page-url="{{url absolute="true"}}"
data-identifier="{{id}}"
data-theme="dark"
data-accent-color="#ff1a75"></div>
Ghost themes that expose a dark-mode toggle usually set a class or data- attribute on <html>. Point the widget at it with data-theme-source and it will follow the toggle instead of being pinned. The theme builder generates the full attribute list.
Troubleshooting
The widget doesn't appear
- Confirm you edited the theme that is actually active. Ghost ships both Source and Casper, and editing the wrong one changes nothing on the site.
- Re-upload the theme after editing — Ghost caches compiled templates.
- Check the API key in your dashboard, and that your Ghost domain is registered on the site.
Sign-in opens and then does nothing
EchoThread only hands a completed sign-in back to a domain you have registered on the site. Add your Ghost domain under the site's settings in the dashboard. Comments still display without it, which is why this shows up as "reading works, signing in doesn't".
Ghost's comments are still showing
You replaced the block in post.hbs but your theme may also render comments in another template — some themes include a partial from page.hbs or a custom post template such as post-wide.hbs. Search the theme for {{comments}} and replace each occurrence.
Frequently asked questions
Does Ghost have built-in comments?
Yes, since Ghost 5.0 — but they are members-only. A reader has to sign up for your publication before they can comment, and there is no threading, no reactions, and no spam filtering. EchoThread replaces that block with open commenting: readers sign in with Google, GitHub, X, or Facebook, or comment as a guest if you allow it.
Do I have to edit my theme?
For the recommended placement, yes — one block in post.hbs. Ghost has no plugin system, so the theme is where post-level markup lives. You can download your active theme from Settings → Design & branding → Theme, edit one file, and upload it back; you never need a local Ghost install.
Will this slow down my Ghost site?
The EchoThread widget is under 60 KB gzipped, loads from a CDN, and is requested with async, so it never blocks rendering. Ghost serves pages from its own cache either way — the widget is fetched by the browser after your content is painted.
Which theme file do I edit if I use Source or Casper?
Both. Ghost ships Source as the current default and Casper as the classic one, and both put the comments block in post.hbs. Source wraps it in <div class="gh-comments gh-canvas"> and Casper in <section class="article-comments gh-canvas">. The block you are looking for starts with {{#if comments}} in either theme.
Ready to add comments to your Ghost site?
Free for your first site. Set up in under 5 min.
Create free account