How to Add Facebook Comments to Ghost

Ghost doesn't come with a built-in comment system. We already made a tutorial how to add Disqus commenting system to your Ghost theme. If you prefer Facebook, you are in the right place as in this article I will show you how to setup Facebook comments in your Ghost theme.

Here are the steps to install the plugin:

Go to the Facebook comment configurator Fill out the

URL, This should be the blog url.
Width - The plugin width, either '100%' or a pixel value.
Number of Posts - The number of comments you want to show, when the plugin is first load. Press the Get Code button.

Two sections of code is generated. The first one is the JavaScript SDK, which should look like 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 = 'https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v3.0';
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

and

<div class="fb-comments" data-href="{{url absolute="true"}}" data-width="100%" data-numposts="5"></div>

Install the Plugin Code

Copy the SDK code and paste it right after the opening <body> tag, this should be found in the default.hbs file.

Then you have to copy the HTML code and place it wherever you want the plugin to appear on your page, usually that is post.hbs somewhere between the opening {{#post}} and closing {{/post}} helper.

Using the fb:comments-count value displays the number of comments on a given URL in a <span> element on your webpage. You can then use CSS to style this <span> element to match the rest of your website.

<span class="fb-comments-count" data-href="https://example.com/"></span> awesome
comments

To use the moderation tool, you either need to connect a Facebook account or a Facebook app to your comments plugin implementation.

To assign a Facebook account as admin of a comments plugin implementation, include the following meta element in the <head> section of the default.hbs file:

<meta property="fb:admins" content="{YOUR_FACEBOOK_USER_ID}" />

To add multiple moderators, add more than one element, each with one Facebook ID:

<meta property="fb:admins" content="{YOUR_FACEBOOK_USER_ID_1}" />
<meta property="fb:admins" content="{YOUR_FACEBOOK_USER_ID_2}" />

If you created the comment plugin using a Facebook App instead of adding accounts as admin you can set the following meta header.

<meta property="fb:app_id" content="{YOUR_APP_ID}" />

Restart Ghost.

Finally restart Ghost:

ghost restart

This is it, accessing a post you should see the Facebook comment section loading.

If you prefer Disqus to Facebook check out our tutorial on How to Add Disqus Comments to Ghost

推荐订阅源

Example blog

Install the Plugin Code

Restart Ghost.