Product Dev Back to Ghost

How to add Facebook commenting to Ghost

In this tutorial, we will cover how to integrate Facebook comments into your Ghost blog.

Generate the Facebook Comments code

First, you need to head on over to the Facebook Developer Comments plugin page. From there you will need to enter your blog URL (which we will change a bit in a later step), set a width for your comment box, how many posts to display and select a color scheme.

Facebook Comments

When you've finished customising your comment settings, hit the blue "Get Code" button to generate the script needed for the next steps. When the lightbox containing your plugin code appears, be sure to copy both the top and bottom sections of code displayed.

Facebook Comment Code

Note: The top part of the code is used to reference the JavaScript SDK, and the bottom portion of code is used to actually display the Facebook comments.

Open your post.hbs file

Next, you will need to open your theme's post.hbs file with an HTML editor. Find the portion of code that looks similar to this:

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

Paste in the Facebook JavaScript SDK code

Just below the {{content}} of your post.hbs file (or anywhere before the closing {{/post}}), you will want to paste in the code that Facebook gave you, starting with the top portion of code.

Paste and modify your Facebook plugin code

Next, you will need to paste in the Facebook plugin code (the bottom portion of code) and modify the data-href by adding {{url}} at the end of your blog url, so that it looks similar to this,

<div class="fb-comments" data-href="http://your-ghost-blog.com{{url}}" data-width="500px" data-numposts="5" data-colorscheme="light"></div>  

Notice how we've added {{url}} to the end of the data-href? This will ensure that each individual blog post has it's own set of unique Facebook comments, rather than displaying the same comments with every single post.

Save your post.hbs file and update your theme

Once you've added your Facebook commenting code, you will need to save your post.hbs file, and re-upload your theme to your Ghost blog. Once the theme has been updated, your visitors will now be able to comment on your blog posts using facebook.

Using Ghost(Pro)?
To upload your theme, you'll need to access your blog's settings on Ghost.org. If you need help, checkout How to upload a theme to your Ghost(Pro) blog or contact us at [email protected] for additional Ghost(Pro) support.