Product Dev Back to Ghost

Adding Disqus to your Ghost blog

In this tutorial we will cover how to add Disqus, a popular commenting system, to your Ghost blog.

Note: For the purpose of this tutorial, we will assume you are using the default Ghost theme, Casper, which you will need to download and open in an HTML editor.

Create your Disqus account

First, you will need to signup for a Disqus account.

Once you've created your account, you'll need to add your site to Disqus by clicking on the settings cog, and selecting, Add Disqus To Site.

On the next page, click Install in the top right corner.

Next, you'll need to setup a unique Disqus URL.

Grabbing the Universal Code from Disqus

After you've added your site to Disqus, you will be asked to choose a platform. Select Universal Code from the list of options.

select universal code

Once you've selected Universal Code, the next screen will present you with a Disqus script that you will need to copy to your Ghost blog. The code should look like this:

<div id="disqus_thread"></div>  
<script>  
/*
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 = '//disqus-shortname.disqus.com/embed.js';

s.setAttribute('data-timestamp', +new Date());  
(d.head || d.body).appendChild(s);
})();
</script>  

Add the Disqus script to your "post.hbs" file

Now that you have your Universal code copied, you'll need to locate and open the Casper theme's post.hbs file in your HTML editor.

When you have it open, paste the Disqus script anywhere between the opening {{#post}} and closing {{/post}} - where you'd like the Disqus comments to load.

Configure the Disqus code

Next, you need to set up the this.page.url and this.page.identifier variables within your Disqus code.

To do this, go to the section of the Disqus code that looks like this,

/*
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  
};
*/

Remove the /* and the */ bits of code.

Replace this.page.url = PAGE_URL;, with this.page.url = '{{url absolute="true"}}'.

Then, replace this.page.identifier = PAGE_IDENTIFIER; with this.page.identifier = 'ghost-{{id}}';

Now that you've configured your Disqus code, save your post.hbs file.

If you've configured your Disqus code correctly, when you open a post on your Ghost blog, you should now have a Disqus comment box.