Installing Disqus on Ghost

Mark Corbett Wilson

Aug 24, 2024 • 4 min read

Ghost logo and text with the Disqus logo

I'm aware that not everyone likes Disqus. I've been using it for years and appreciate that all my comments are collected in one place. It was acquired a few years ago and no doubt is worse than before, but until I can figure out how else to add commenting into my new Ghost installation, it's good enough.

After the usual false starts, I found “Disqus + Ghost: How to use Ghost and Disqus together” at https://ghost.org/integrations/disqus/. Maybe it will still be there when you are reading this.

It was pretty easy, if you can use zip files and a text editor. In addition, you'll need a Disqus account and, of course, a Ghost installation.

The following quote, headings and the text immediately below the headings are from Disqus + Ghost: “Setting up Disqus with Ghost involves installing their comment embed code into your theme, and making some small adjustments.”

Sounds easy enough.

Copy this Ghost-Specific Disqus comment code onto your clipboard.

This is not the same as the Disqus Universal Code, but is customised specifically for Ghost themes:

<div id="disqus_thread"></div>
<script>
var disqus_config = function () {
this.page.url = "{{url absolute="true"}}";
this.page.identifier = "ghost-{{comment_id}}"
};
(function() {
var d = document, s = d.createElement('script');
s.src = 'https://EXAMPLE.disqus.com/embed.js';
s.setAttribute('data-timestamp', +new Date());
(d.head || d.body).appendChild(s);
})();
</script>

Now you go to your Ghost installation and open the settings. Today I found them as a gear icon in the lower left corner of my screen. YMMV

On the left side navigation panel under “Site”, I clicked “Design & branding” to open it and then clicked “Customize” to get to the Design edit panel. I scrolled down the right side “Design” panel and clicked “Change theme” to open the “Official themes” page and clicked “Installed” to see my installed themes. I clicked the three dots to the right of my theme and clicked “Download.” I saved the zipped file and unzipped it with the free and open source 7zip utility into a new folder. https://www.7-zip.org/

Now the fun begins! Open the post.hbs file with a text editor and follow the directions below.

For the curious; .hbs is a text file extension for Handlebars, a simple templating language. It uses a template and an input object to generate HTML or other text formats. Handlebars then compiles templates into JavaScript functions.
https://handlebarsjs.com/

Paste the comment code into post.hbs

A good spot for this code is after the content in the template file. In Ghost’s official themes, remove the {{#if comments}} block and replace the {{comments}} helper with your Disqus code:

Update the the comments block with your code

Comments block updated with Disqus code

Find your Disqus shortname:

Next you’ll need to visit Disqus Admin, and create a site or select an existing one.

I already have an account so I signed into Disqus.com and clicked on the “Admin” button. This is where it gets confusing. If you click “Installing Disqus” it takes you through a more complicated process that I couldn’t get to work.

If you set up a new account, it is easier: just click “I want to install Disqus on my site” and follow the directions to create a new site. This creates the shortname you need.

If you already have an account and are signed into the admin panel, click “Settings” on the top navigation bar and then ”General” on the left side navigation: depending on how you have configured your Disqus account, either the “General” under “Site” or under "Organization” will allow you to add your Ghost site by clicking the “Add” button. This creates the shortname you need.

From the site’s settings area, which you can also find on the left side navigation panel “Organization/Sites”, find the shortname and copy it.

Now return to your text editor and:

Insert your shortname into the Disqus code

Lastly, find the line of code in your post.hbs file which says:

s.src = 'https://EXAMPLE.disqus.com/embed.js';

and replace EXAMPLE with your shortname.

Now you save your modified post.hbs file, replace the post.hbs file in your Ghost theme and use 7zip to compress (or, as the tool says; archive) your theme. I changed the name by adding _Disqus to it so I can tell the difference, but it isn’t necessary.

Then save the file, upload a fresh copy of your theme, and restart Ghost.

All I can say is it worked for me on August 24^th 2024. YMMV

And please leave a comment. ;-)

Post script (does anyone use ps anymore?)

I didn't like the Disqus comment box at full width so I went back to my settings, scrolled down to 'Advanced, clicked on 'Code injection', clicked 'Open' and added this CSS snippet to the 'Site header.'

I found the code on GitHub, along with an easier alternative method for installing Disqus on Ghost. I didn't try it.