How To Add Comments To Ghost

I assume you finished installing Ghost guide and picked a beautiful theme. So now it is right time to add some more functionality to your blog.
Ghost in default installation does not have comments, but in few very simple steps you'll be able to add this important functionality to your blog.
Firstly, you must decide which comments system you want. With multiple available options like Google+, Disqus, Livefyre and Facebook it's hard to pick one, but we'll test them all.

In all cases you'll have to play also with css to adjust width and position.

And if you are using DigitalOcean, you must know few commands to edit this files using ssh (or install ftp server on DO and use FileZilla + code editor).

1. To connect use ssh username@serveripaddress and then type password
2. To get into Ghost directory type cd /var/www/ghost/content/themes/casper - it will take you directly into Casper theme directory.
3. To edit files use sudo nano filename. So to edit post.hbs you must enter sudo nano post.hbs
4. The last command is sudo service ghost restart to restart Ghost after code edits.

Ok, now it's time to check four different systems.

Google+

This is the easiest way to add comments into your Ghost blog.
Simply navigate to /content/themes/casper/post.hbs and paste this code before {{/post}} tag.

 <section>
<div data-href="{{@blog.url}}{{url}}" data-first_party_property="BLOGGER" data-view_type="FILTERED_POSTMOD">Loading Google+ Comments ...</div>
<script async type="text/javascript" src="//apis.google.com/js/plusone.js?callback=gpcb"></script>
<noscript>Please enable JavaScript to view the <a href="https://plus.google.com/">comments powered by Google+.</a></noscript>
</section>

That's all! Fast and simple.
googlepluscomment

 

Disqus

To accomplish this you'll need to do two steps.

1. Sign up to Disqus Do it using this link http://disqus.com/websites/. After successful registration, fill the form like in the example below using your website data. Disqus1 Then select the Universal Code and copy it to clipboard.

2. Add Disqus to your blog

Firstly navigate to your theme folder and open post.hbs. The best place to put comments, is after main content, so find {{content}} template tag and paste Disqus code from step one below it. For default theme it looks like this:

<section>
    {{content}}
</section>

<div id="disqus_thread"></div>
...

Here's the result:
disquss-comments

Facebook

This is not the perfect solution, but works. Firstly, you need a Facebook AppID. You can get one by going to Facebook Developers/apps and creating one. Then paste it where the bold letters are.


<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/pl_PL/all.js#xfbml=1&appId=place your app id here";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div data-href="{{@blog.url}}{{url}}" data-width="470"></div>

To get it working, copy the code and paste given code into post.hbs files after {{content}} or {{/post}} tag.
You may need to adjust width.
Here is the result.

Welcome-to-Ghost

Livefyre

Installing Livefyre is similar to Disqus.

1. Register with Livefyre
Go to http://www.livefyre.com/install/ and fill form like that:
Livefyre
You must select 'custom' and proceed to step 2.

2. Enable comments
Copy the code and paste given code into post.hbs files after {{content}} or {{/post}} tag like in previous systems.

And here is the result:

livefyre

 

I hope you found this article useful 🙂

Divi 2.0 WordPress Theme

Like what you read here in this blog post? If yes, please sign up and get latest articles delivered to your email account for FREE! You’ll be also subscribed to newsletter, where I share a exclusive content and offers.

About Kris Hoja

Hi! I'm Kris. For a while I was blogging about WordPress, now I'm owner of HogStudio - Creative Agency focused on website development.
Add me on Google+ and don't forget to follow me on Twitter :)

Comments

  1. youeye says:

    Thank you for sharing this great site to everyone. Please check this one out.. get soundcloud comments

  2. Thanks a ton! The Google+ comments were not good, but Disqus works great!

    Check it out 😀 (Dropped a link to your post http://captaincake.ghost.io/comments/ )

  3. cesarfalcao says:

    Good article, blogging without commenting is strange....

  4. Abhijeet says:

    Hey there,
    I'm using the Magnum theme and I'm trying to use Google +
    All I see is "Loading Google+ Comments"
    any ideas as to what I might be missing?

    On a related note I really like the comment widget you are using here.Would be neat to have this in Ghost, enabling logging in via FB,or google+ or simply entering your contact details.

    • Hi Abhijeet,
      I'll check that and will send you email.
      And about my comments - they are powered by Jetpack.

    • Did you ever found out what your problem was? I just copied that snipped from google+ into my post.hbs and i get the exact same result. I see it fetch the oneplus.js file (in my network inspector) and it prints out a div containing "Loading Google+ Comments..."

Leave a Reply