How to Add Comments to Ghost

Ghost does not have comments built in by default. Many themes add them in for you, but if your theme does not, we will show you how. There are a number of options, but by far Disqus is the most popular. Here is a list of how to install on Disqus and a few other platforms:

• Disqus
• Facebook
• NodeBB
• Livefyre

Disqus

1. Head over to Disqus and signup for an account.

2. You will be taken to a Disqus welcome page and you will need to click on the Cog Icon in the upper right

   

3. Click on the "Add Disqus to Site" link and then click on "Start Using Engage"

4. Fill out the Site profile details and click Finish registration

   

5. On the "Choose your platform" page click Universal Code

   

6. On this page you will need to copy the Javascript code in the first. This Javascript code is going to be added to your Ghost theme to display your comments.

   

7. The file you are going to edit is post.hbs and is located at:

   /path/to/ghost/content/themes/casper/post.hbs
   

8. Open up this file with a text editor

9. If you scroll down a little bit, you will see this code (assuming your using the Casper theme, may be different if you are using another theme):

   {{content}}

10. Paste the code you copied from Disqus right below that section. Then save and exit.

![Ghost Disqus Comments](/content/images/2014/May/Migrating-Comments-From-WordPress-To-Ghost-Dis.jpg)

12. If you have Ghost running, stop and start it. Now when you navigate to a post, you will see a comment section like the following screen shot!

![Ghost Disqus Comments](/content/images/2014/May/Ghost-with-Disqus-Comments.png)

Facebook

1. Go to the FaceBook Developer Comments Plugin

2. Add in your URL and select whatever color scheme or other options that you want and then hit "Get Code"

3. This will pop up a box with 2 sections of code in it. Like this:
   

4. The file you are going to edit is located in:

    /path/to/ghost/content/themes/casper/post.hbs
   

5. Open up this file either with a text editor

6. Usually near the end of this file, somewhere after {{content}}, you should paste in both the top and the bottom sections of code that Facebook gives you

7. Save and exit.

8. If you have Ghost running, stop and start it.

9. Now when you navigate to a post, you will see a comment section like the following screen shot!

NodeBB

If you currently have a NodeBB forum and would like to use them as your comment system for your Ghost blog, or you are looking for a way to host your comments yourself, this guide will show you how to integrate NodeBB.

If you do not have NodeBB already setup, check out their guide here. Once you have it setup, here is what you need to do to get it installed with your Ghost blog:

1. SSH into your NodeBB server and cd to the directory where it is living:

    cd /path/to/NodeBB
   

2. Install the NodeBB Comments widget:

    npm install nodebb-plugin-blog-comments
   

3. Log into the Admin Control Panel of your NodeBB forum

4. Click on the Reload button at the bottom of the main Admin page

5. Refresh the page and open up Extended -> Plugins and activate nodebb-plugin-blog-comments

   

6. Go back to General -> Dashboard and Reload NodeBB

7. Refresh the Page

8. Go to Installed Plugins -> Blog Comments

9. Fill in the information and save

   

10. Switch over to your Ghost theme files now

11. Open and add the following after your {{content}} in your post.hbs file. Also, change the nbb.url to be the web address where your NodeBB forum is located:

12. Restart Ghost so your theme changes take effect

13. Go to one of your posts and you will see it is ready to publish on NodeBB. Click on "Publish this article" to put this post onto your forum.

    

14. Now all comments on the forum or on the post will be shown!

    

    

Note: There is a lot more styling you can do and settings you can change. For more information on the plugin itself visit https://github.com/psychobunny/nodebb-plugin-blog-comments

Livefyre

1. Head to http://web.livefyre.com/comments/ and press "Get Started"
2. Sign up or sign in if you have an account
3. Put in your site url, and click on the cog image
   
4. This will take you to a page with some code on it. Open up your post.hbs file in your theme so you can put it in.
   
5. This could change depending on your theme, but copy and paste the code they give you below the post content. In the default Casper theme, this is line 32.
6. Save your changes and restart Ghost.
7. Refresh your page and you should see the livefyre comment system up and running.