Adding Disqus to Ghost

Since publishing this post, Ghost and Disqus have both changed a lot. I've written an updated post on my company's blog. Please read that instead!


In this article, I will show you how to integrate Disqus into your Ghost blogging platform

Ghost is an open source publishing platform that runs on Node and is very easy to use. You simply install, run it, and add new posts using your browser. This is similar to Wordpress, but purely focuses on blogging.

Disqus is a blog comment hosting service, users have a Disqus account and can use that to comment on sites where it is enabled, such as this one.

Disqus

First, you must sign up for a Disqus account.

Register for Disqus

Next, create a new site.

Create a new site

Everything on Disqus is set up. Now we must configure Ghost.

Ghost

Adding Disqus to Ghost is a customization, and customizations should go inside themes.

We want a discussion under every post we make, so navigate to content/themes/[THEME-NAME] and you'll find a post.hbs Handlebars template file.

Now, paste the following code between </main> and {{/post}}.

<div id="disqus_thread"></div>
<script type="text/javascript">
    var disqus_shortname = 'example';
    var disqus_identifier = '{{post.id}}';

    /* * * DON'T EDIT BELOW THIS LINE * * */
    (function() {
        var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
        dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
        (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
    })();
</script>
<noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
<a href="http://disqus.com" class="dsq-brlink">comments powered by <span class="logo-disqus">Disqus</span></a>

Replace example with the 'Site name' you entered in the previous step. In my case, it's d4nyll.

var disqus_shortname = 'example';

to

var disqus_shortname = 'd4nyll';

Styling

Now you should be able to see Disqus beneath every post. If not, try restarting Ghost.

But the Disqus div spans across the entire width of the page, and it looks quite ugly. This is when you'd need to create your own theme and modify it there.

Disqus block spans the entire width of the page

However, I have a quick trick. Open up content/themes/[THEME-NAME]/assets/css/screen.css and at around line 907, you'll see

.post {
    ...
}

Simple add the selector #disqus_thread to the block


.post, #disqus_thread {
    ...
}

In the end, it'll look like this:

Disqus block is centered

This is of course a quick fix and you should add more custom styles later.

comments powered by Disqus