How to Add Disqus Comments to Ghost

Ghost does not have a built-in comment system yet, so in this post I will show you the steps to setup Disqus Comment System on your Ghost Theme.

Disqus is the most popular and widely used commenting platform.

Disqus Setup

Here are the steps to install Disqus for a Ghost Theme:

1. Create a Disqus account.
2. Create a new site.
3. Copy the Universal Embed Code.

The code should be similar to this:

<div id="disqus_thread"></div>
<script>
  /**
   *  RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION BELOW TO INSERT DYNAMIC VALUES FROM YOUR PLATFORM OR CMS.
   *  LEARN WHY DEFINING THESE VARIABLES IS IMPORTANT: https://disqus.com/admin/universalcode/#configuration-variables*/
  /*
var disqus_config = function () {
this.page.url = PAGE_URL;  // Replace PAGE_URL with your page's canonical URL variable
this.page.identifier = PAGE_IDENTIFIER; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
};
*/
  (function () {
    // DON'T EDIT BELOW THIS LINE
    var d = document,
      s = d.createElement('script');
    s.src = 'https://disqus_shortname.disqus.com/embed.js';
    s.setAttribute('data-timestamp', +new Date());
    (d.head || d.body).appendChild(s);
  })();
</script>
<noscript
  >Please enable JavaScript to view the
  <a href="https://disqus.com/?ref_noscript"
    >comments powered by Disqus.</a
  ></noscript
>

Edit the post.hbs file.

Open the post.hbs file from your Ghost theme. This file should be in the following location:

/path/to/ghost/content/themes/theme_name/post.hbs

• Paste the Universal Embed Code somewhere between the opening {{post}} and closing {{/post}} helper.
• Replace the disqus_shortname in the Ebed Code with your actual Disqus shortname
• Change PAGE_URL with '{{url absolute="true"}}'
• Change PAGE_IDENTIFER with 'ghost-{{comment_id}}'
• Save the post.hbs file.

Restart Ghost

To see the changes:

ghost restart

After the restart the Disqus comment section should appear.

Display Disqus comment count.

It's possible to display comment count for your posts. To achieve this you need to add the following javascript snippet in your default.hbs file before the closing </body> tag:

<script
  id="dsq-count-scr"
  src="//disqus_shortname.disqus.com/count.js"
  async
></script>

Replace disqus_shortname with your Disqus shortname.

On the post page

To display the number of comments for a post add the following code:

<a href="{{url absolute='true'}}#disqus_thread">Link</a>

On the home page

If you need to display the comment count for each post on the homepage the code is similar but with an additional element, an identifier for the post.

<a
  href="{{url absolute='true'}}#disqus_thread"
  data-disqus-identifier="ghost-{{comment_id}}"
  >Post</a
>

After saving the changes you need to restart Ghost.

If you prefer Facebook comments check out our tutorial on How to Add Facebook Comments to Ghost