In this tutorial I am going to show you how to add Facebook comments in your Ghost theme.
The whole setup is being divided into five steps:
- Create a Facebook App.
- Add Facebook SDK and Plugin Code to your Ghost blog.
- Add Facebook Open Graph tags to Ghost head.
- Moderate comments.
- Display comments count on a post.
Let's get started.
1. Create a Facebook App
Login to your Facebook account and then visit the Facebook Apps page.
Click Add a New App button. A modal with the title Create a New App ID will appear.
Display Name: The name you want to associate with this App ID (Ex: yourappname)
Contact Email: Used for important communication about your app (Ex: youremail@example.com)
Click Create App ID button.
This will send you to App Dashboard.
We need to set your website URL to the App.
Go to Settings, from the left panel, and then click Add Platform. Choose Website.
We need to make the App public.
Go to App Review, from the left panel, and you should see Make yourappname public? Make it Yes.
2. Add Facebook SDK and Plugin Code to your Ghost blog
Visit the official Facebook Comments Plugin developer page and setup your comments settings.
- URL to comment on: Leave empty, we are going to set this in the next steps.
- Width: This can be either a pixel value or a percentage (such as 100%) for fluid width. Put what any value you want or leave the default one, 550px.
- Number of Posts: The number of post that you want to show on first load. Default 10.
Click Get Code.
A JavaScript SDK modal will show with 3 steps:
- Choose your App ID, yourappID.
- Copy JavaScript SDK code and place it ideally right after the opening
<body>tag. Thebodytag usually opens in the filedefault.hbs. The code is similar to this:<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/en_US/sdk.js#xfbml=1&version=v2.10&appId=yourappID"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script> - Copy the code from the last step, place it inside your
post.hbsfile and set thedata-hrefattribute to{{url absolute="true"}}. Your code should be similar to this:<div class="fb-comments" data-href="{{url absolute="true"}}"></div>Make sure that the data-href="" attribute is set to{{url absolute="true"}}.
The above code should be placed inpost.hbsinside the{{#post}}and{{/post}}helper.
3. Add Facebook Open Graph tags to Ghost head
If you want to moderate your blog's Facebook comments you either need to connect a Facebook account or a Facebook app to your comments implementation.
I'm only going to cover the Facebook App method because this is the preferred one. For more details you can check the Moderation Setup.
Simply copy the code below and paste it between <head></head> tags:
<meta property="fb:app_id" content="yourappID" />
Make sure that you replace yourappID with your actually APP ID. <head></head> tags are usually inside default.hbs or /partials/theme_head.hbs if you are using one of our premium Ghost themes.
4. Moderate comments
To view the comments for this app go to this url:
https://developers.facebook.com/tools/comments/yourappID/
Replace yourappID with your actually APP ID.
Here you will find some tabs that will help you moderate your comments.
You can read more information on Comments Moderation.
5. Display comments count on a post
To show the number of comments in your Ghost theme you can copy and paste the following code in your post.hbs file, between {{#post}} {{/post}}.
<span class="fb-comments-count" data-href="{{url absolute="true"}}"></span> awesome comments
That is all. Hope this tutorial was useful for you.
If you don't like Facebook comments or want an alternative you can try Disqus comments system.
