Adding Disqus comments to your Ghost blog with code injection

When I first switched my blog over to use Ghost I wrote a post about how to add comments to it. That post involved creating your own theme, or modifying an existing one. Either way, you had to get your hands dirty with some code.

More recent versions of Ghost now have a nice feature in the admin that allows for code injection, so you can customize the look and functionality of your blog without having to create your own custom theme.

I've tried my hand at creating a custom theme...and I may give it a go again sometime, but my creative skills are pretty limited, and I was never able to come up with anything that I was really satisfied with. Fortunately, the default Casper theme is pretty well done, so I decided to just go ahead and use it. Unfortunately though, it doesn't provide any out-of-the-box mechanism for comments, so I needed to figure out a way to wire some in using the new code injection feature.

Below is a Gist that I wrote that includes an embedded script tag that can be added to your Ghost blog by adding it to your "Blog Footer" code injection block in the admin section. Feel free to use it as you wish if you find it helpful. It only supports Disqus comments, and requires minimal configuration to get working. It won't load any Disqus comments out of the box, as it requires a couple of key pieces of information. Notice the userConfig object at the top of the script. That is the part that requires your attention. You should provide it a globalModuleName attribute value (this is optional, it will default to GhostBlogCodeInjection of you don't provide a value). At bare minimum, you need to also provide it a value for the disqusSiteKey, which is the value it needs to initialize Disqus comments for your site (this value is unique to your site).

var userConfig = {  
  globalModuleName: "SomeValueUniqueToYourWebSiteHere",
  disqusSiteKey: "your-unique-disqus-site-key-goes-here"
};

If you wish, there is also two other pieces of information you can configure as well. By default, this script looks for classes that get applied to the body tag of your site to determine if the current page is an individual post page or not. It will only render comments on individual post pages by default. If there are some pages on which you wish to not have comments rendered, you can add CSS classes that the script will look for to the excludeCommentsFromPageClasses array, and any page on which it finds any classes included in this array, it will not render comments on that page. By default, a commentPageClasses array is populated with a single class that it looks for: post-template. This is the class that Ghost applies to the body tag of individual post pages, and is the one that this script looks for by default to determine when to render comments on the page. If you wish to add others, this would be the array you would want to override in the userConfig object. So, a fully configured/customized userConfig that takes advantage of all of the above would look something like this:

var userConfig = {  
  globalModuleName: "SomeValueUniqueToYourWebSiteHere",
  disqusSiteKey: "your-unique-disqus-site-key-goes-here",
  commentPageClasses: ["post-template", "page"],
  excludeCommentsFromPageClasses: ["tag-soapbox"]
};

Hopefully this is clear and helpful. It worked well for me. If you decided to try to use it and run into any problems or have any questions, add a comment and I'll see what I can do (no promises or guarantees...use this at your own risk).