How to Setup Disqus Comments on Ghost

After getting the core of my Ghost blog setup I realized that it was time to add the ability to comment on posts. As I add posts on various topics, I'd like to be able to get feedback on posts without requiring people to send me an email. Additionally depending on the discussion that is initiated by a comment other visitors to my site may gain additional insights.

In this post you'll find instructions on how to add Disqus comments to the Casper theme of Ghost.

Step 1: Navigate to and Complete "Add Disqus To Site" Form

After you've logged into your account on Disqus, you'll need to navigate to the "Add Disqus To Site" form.

Disqus Logged in Landing Page

To Navigate to the form click on the gear icon and then on "Add Disqus To Site".

Disqus Settings DropDown

Once you've made it to the form below, fill it out and click "Finish registration"

Add Disqus to your site form

Step 2: Obtain Disqus Universal Code and Add to Ghost Theme

After you've completed the site profile, you'll be asked to choose your platform, where you'll want to select "Universal Code".

Disqus Choose your platform

Copy the code snippet under step number 1 from this page. This is the JavaScript code that is going to add Disqus comments to your blog.

Disqus Setup Instructions for Universal Code

Now you're going to need to edit the post.hbs file within the Casper theme, which is located at /pathtoghost/content/themes/casper/post.hbs and add the copied JavaScript code snippet. Open the file in your preferred text editor and then scroll down through the file, until you see the following code snippet:

  </footer>

</article>  

You can put the code snippet from Disqus after between the closing footer and article tags. This way it will come after your post footer, but will still be within the article tag, which will prevent the comment section from expanding to the full width of the page.

Step 3: Enjoy Disqus Comments on Your Ghost Posts!

Now that you've finished adding in the required code from Disqus into your Ghost theme, restart your Ghost server and you should see the comment section at the bottom of your posts similar to what's seen below!

Disqus Comment Added to Ghost Blog Post