Add Members-Only Live Commenting to ghost Sites

To add FastComments to Ghost properly, we have to edit theme files.

So let's start by downloading your existing, or desired theme.

Navigate to your site dashboard and click the gear in the bottom left:

Open Settings

Next select the Design option:

Select Design

While we're not technically changing the theme, click Change Theme in the bottom left:

Change Theme

In the top right select Advanced:

Select Advanced

...and then download your current or ideal theme:

Download Theme

Now that we've downloaded the zip file, extract it to a folder. I've downloaded the default casper.zip and extracted to Downloads\casper on Windows.

Next, you'll want to make sure you have the LTS or newer version of NodeJS installed. You can get that here: https://nodejs.org/en/download/

Once NodeJS is installed, you'll want to install a code editor.

We recommend (and use) Webstorm, which you can get here with a 30-day trial (no credit card needed): https://www.jetbrains.com/webstorm/

The next best free option would probably be Visual Studio Code: https://code.visualstudio.com/download

Once you have your editor setup, and the theme folder open in the editor, open the terminal in the IDE and run:

Install The Theme

Copy

1

2npm install

3

Successful output will look like this (you can ignore warnings):

Successful npm install output

This will set up the theme's dependencies for later commands we will run. Also, the export depends on the theme's dependencies being installed, otherwise the re-import will not work properly.

Now that we have the theme open in our editor, open package.json and change the name field to something else. In our case we just add -fastcomments onto the end:

Rename Theme

If you're using an IDE it will auto-save after you make this change.

Now we're going to open the template that is used for our blog articles. It's called post.hbs:

Open post.hbs

Next we need to identify where to add the FastComments.com widget code.

If you're using the default casper theme, you'll see a section like this at line 82:

Disabled Comment Section

If you're using other themes, you won't see this, and will need to add this code after the last </section>:

Section Example

Copy

1

2<section class="article-comments gh-canvas">

3</section>

4

You should have something like this ready:

Template Ready For Comment Code

Once ready, copy the FastComments.com widget code:

Ghost FastComments.com Comment Code Snippet

Copy

1

2<script src="https://cdn.fastcomments.com/js/embed-v2.min.js"></script>

3<div id="fastcomments-widget"></div>

4<script>

5 (function () {

6 let simpleSSO = null;

7

8 {{#if access}}

9 {{#if @member}}

10 simpleSSO = {

11 id: '{{ @member.uuid }}',

12 email: '{{@member.email}}',

13 username: '{{@member.name}}',

14 avatar: '{{ @member.avatar_image }}',

15 optedInNotifications: true,

16 optedInSubscriptionNotifications: true,

17 displayLabel: '{{@member.labels}}'

18 }

19 {{/if}}

20 {{/if}}

21

22 FastCommentsUI(document.getElementById('fastcomments-widget'), {

23 tenantId: "demo",

24 urlId: window.location.pathname,

25 allowAnon: false,

26 simpleSSO: simpleSSO

27 });

28 })();

29</script>

30

...and it should look like this:

Add FastComments.com Comment Code

Coding done. Now we just have to re-import our theme!

Now we need to package the theme files back into a zip file. To do this, use the built in features in Ghost.

Open your editor's terminal again and run npm run zip.

Export Your Theme

This will package the theme into a zip file in dist/casper-fastcomments.zip (if that is what you've named the theme in Step Three).

Back in the Ghost dashboard, let's upload our theme:

Upload Your Theme

For me, I have the zip file in the following location. Note the dist folder:

Select Zip to Upload

Remember to activate your newly uploaded theme (Ghost should ask you).

Now we should have FastComments Live Commenting enabled for our members!

Success!

Congratulations on setting up FastComments with Ghost! If you've run into a Domain Error, or would like to learn how to customize the comment area, read on!

FastComments is designed to be customized to match your site.

If you'd like to add custom styling, or tweak configuration, Checkout our Customization Documentation to learn how.