Assuming you are using Ghost as blog software and you want to create the possibility for your viewers to comment on your posts. So now it is the right time to add this functionality to your blog. Ghost by default does not have comments, but in few simple steps you'll be able to add this functionality to your own blog. Firstly, you must decide which comments system you want. With multiple available options like Google+, Facebook Disqus, Livefyre, Vicomi and IntenseDebate it's hard to pick one. I have made the choice to use Disqus and will guide you to implement this system to your Ghost blog.

The main reasons I had to choose for Disqus;

  1. Great admin controls, and with that control
    I really don't like spam. With Disqus, I can easily moderate and control what comments get published from my Disqus dashboard or by replying to emails. This makes it simple to maintain my comment section when I check my email.
  2. Real-Time commenting.
    Disqus tracks comments in real-time so users see the most recent comments first. In addition, Disqus provides user analytics, has a discovery feature to help increase traffic and again has great spam control features.
  3. Fluid setup especially related to Ghost
    Adding Disqus is really simple and I will show you how to do it.
  4. Integration with Social media
    Not be bounded to Facebook or Google, but just using the benefits of easy integration with them.

Prerequisites

Implementing Disqus could require knowledge about CSS[1] to adjust the width and position. But if you are just using the default casper team, everything works out of the box. If you're hosting your blog on a VPS[1:1], you must know a few commands to work with SSH[1:2] and the Linux environment.

Sign up to Disqus

If you don't have a Disqus account you first need to create one at the Disqus signup url. After successful registration, go to the Disqus create url and fill in the form like in the example below using your website data.

Installation:

Today (post day), My Ghost blog v7.1 is running on Nodejs v4.2.2 on Ubuntu 14.04.3 LTS. The installation is based on this setup.
Yup I know it's not possible to run Ghost on Nodejs v4 according Ghost specs, but I made some changes to the codebase. I expect this will be made possible soon by the Ghost team, as Nodejs v4 being a LTS[1:3] version.

Setting up a connection to your hosted VPS:

$ ssh username@serveripaddress

After making a successful connection I always check for updates on the system. A VPS is your own responsibility so act like it. With great Powers, comes greater responsibility :wink:

sudo aptitude safe-upgrade

The system is up-to-date again.

The 3 step instruction

The guide is based on the Ghost default casper theme. This means we must get into the theme folder of the Ghost installation to add the piece of code delivered by Disqus.
The piece of code is the "Universal Code" and copy it to clipboard.

cd /usr/share/nodejs/mynameisvolkert/httpdocs/content/themes/casper

The casper theme contains the following files;

Picture of the Ghost theme folder content

Step 1:

To get the Disqus comment system available after every post, we need to add the piece of Disqus code to the post.hbs[1:4] template.

Picture of the Disqus script to add to the post.hbs

There are multiple ways of editing a file on the VPS. For example edit the file on your local system and then sftp'ed to your VPS or you can edit the file directly on the the server in the terminal with the help of nano editor. At the end this is your preference but the guide focuses on just pasting the script with the help of nano.

Open the post.hbs with nano;

nano post.hbs

Paste the Disqus piece of code after the <section class="post-content"> HTML[1:5] section.

<section class="post-content">
    {{content}}
</section>

This how it should look like;

Picture of the pasted Disqus code block

Step 2:

Now we've edited the post.hbs we need to add the script that loads the Disqus commenting system in the Blog footer.
In the Ghost admin section open de code injection tab and add the following script;

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

Picture of code that's needed to let Disqus run

Step 3:

Before we can enjoy Disqus we need to restart the service that's keeping Ghost running as deamon.

This blog is using forever for this.

$ cd /usr/share/nodejs/mynameisvolkert/httpdocs/
$ forever restart index.js

If everything is successful then you can browse to a current existing post and this should show now Disqus at the end of your post.


  1. HTML = HyperText Markup Language ↩︎ ↩︎ ↩︎ ↩︎ ↩︎ ↩︎