FastComments.com

Add Members-Only Live Commenting to ghost Sites

With FastComments we can easily add live, members-only commenting to any site built with Ghost.

We will be able to automatically import your members usernames, avatars, and have comment reply notifications setup.

Note that this tutorial requires a FastComments account. It's recommended that you sign up first and then come back here. You can create an account here.

In this tutorial we'll be targeting a blog built with Ghost, but with a little know-how the same instructions apply to any type of site.

This tutorial starts from the perspective of a user who is very new to Ghost. Users experienced in editing their themes can skip to Step 4.

If you're having trouble, feel free to send your exported theme template to your support representative (still requires steps 1 - 5).

Step 1: Download Your Theme Internal Link

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
Open Settings

Next select the Design option:

Select Design
Select Design

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

Change Theme
Change Theme

In the top right select Advanced:

Select Advanced
Select Advanced

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

Download Theme
Download Theme

Step 2: Install Your Theme Locally Internal Link

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 Copy
1
2npm install
3

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

Successful npm install output
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.

Step 3: Name The New Theme Internal Link

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
Rename Theme

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

Step 4: Open The Post Template Internal Link

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

Open post.hbs
Open post.hbs

Step 5: Add The FastComments Code Internal Link

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
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 Copy
1
2<section class="article-comments gh-canvas">
3</section>
4

You should have something like this ready:

Template Ready For Comment Code
Template Ready For Comment Code

Once ready, copy the FastComments.com widget code:

Ghost FastComments.com Comment Code Snippet
Copy 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 email: '{{@member.email}}',
12 username: '{{@member.firstname}}',
13 optedInNotifications: true,
14 displayLabel: '{{@member.labels}}'
15 }
16 {{/if}}
17 {{/if}}
18
19 FastCommentsUI(document.getElementById('fastcomments-widget'), {
20 tenantId: "demo",
21 urlId: window.location.pathname,
22 allowAnon: false,
23 simpleSSO: simpleSSO
24 });
25 })();
26</script>
27

...and it should look like this:

Add FastComments.com Comment Code
Add FastComments.com Comment Code

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

Step 6: Export Your Theme Internal Link

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
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).

Step 7: Upload The Theme to Ghost Internal Link

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

Upload Your Theme
Upload Your Theme

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

Select Zip to Upload
Select Zip to Upload

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

Success! Internal Link

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

Success!
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!

Customization Internal Link

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.