How to Add Disqus Comment System in Ghost

Nistor Cristian 2 -

In this post, I will be telling you about how to setup Disqus on a Ghost blog.

The whole setup is being divided into six steps:

  • Create a Disqus account.
  • Register a new site to Disqus.
  • Select the Ghost platform.
  • Inside your Ghost theme locate the post.hbs file. It should be in folder content/themes/yourtheme/.
  • Copy and paste the Universal Code between the opening {{#post}} and closing {{/post}} helper.
    Disqus Universal 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>
  • If you copied the code from above, replace disqus_shortname with your Disqus shortname.
  • Change PAGE_URL with '{{url absolute="true"}}', including quotes.
  • Change PAGE_IDENTIFER with "ghost-{{comment_id}}", including quotes.
  • Restart Ghost if you are in production mode. If you are in development mode just refresh the page.

How to display Disqus comments

Place the following code before your site's closing </body> tag:

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

Replace disqus_shortname with your Disqus shortname.

Then add the following code to show the number of comments for a post.

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

Embed Disqus comments on your blog

First, find the comment that you want to embed. Move your cursor over the Share link and a Disqus direct link should appear.


Copy the url.
Go to Disqus Embedded Comments url.
Paste the link and you should get the Embed code.
Copy the code and paste it where you want to display the comment.
The result will be similar to this: