![Open Menu Menu Icon](/images/menu.png)
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 ![Direct Link Internal Link](images/link-internal.png)
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](/images/installation-guides/ghost-step-1-1-open-settings.png)
Next select the Design
option:
![Select Design](/images/installation-guides/ghost-step-1-2-select-design.png)
While we're not technically changing the theme, click Change Theme
in the bottom left:
![Change Theme](/images/installation-guides/ghost-step-1-3-change-theme.png)
In the top right select Advanced
:
![Select Advanced](/images/installation-guides/ghost-step-1-4-select-advanced.png)
...and then download your current or ideal theme:
![Download Theme](/images/installation-guides/ghost-step-1-5-download.png)
Step 2: Install Your Theme Locally ![Direct Link Internal Link](images/link-internal.png)
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:
![Copy Copy](/images/copy-white-24px.png)
Successful output will look like this (you can ignore warnings):
![Successful npm install output](/images/installation-guides/ghost-step-2-1-install.png)
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 ![Direct Link Internal Link](images/link-internal.png)
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](/images/installation-guides/ghost-step-3-1-name-theme.png)
If you're using an IDE it will auto-save after you make this change.
Step 4: Open The Post Template ![Direct Link Internal Link](images/link-internal.png)
Now we're going to open the template that is used for our blog articles. It's called post.hbs
:
![Open post.hbs](/images/installation-guides/ghost-step-4-1-open-post-template.png)
Step 5: Add The FastComments Code ![Direct Link Internal Link](images/link-internal.png)
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](/images/installation-guides/ghost-step-5-1-identify-section.png)
If you're using other themes, you won't see this, and will need to add this code after the last </section>
:
![Copy Copy](/images/copy-white-24px.png)
You should have something like this ready:
![Template Ready For Comment Code](/images/installation-guides/ghost-step-5-2-cleanup.png)
Once ready, copy the FastComments.com widget code:
![Copy Copy](/images/copy-white-24px.png)
...and it should look like this:
![Add FastComments.com Comment Code](/images/installation-guides/ghost-step-5-3-paste-code.png)
Coding done. Now we just have to re-import our theme!
Step 6: Export Your Theme ![Direct Link Internal Link](images/link-internal.png)
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](/images/installation-guides/ghost-step-6-1-export.png)
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 ![Direct Link Internal Link](images/link-internal.png)
Back in the Ghost dashboard, let's upload our theme:
![Upload Your Theme](/images/installation-guides/ghost-step-7-1-upload.png)
For me, I have the zip file in the following location. Note the dist
folder:
![Select Zip to Upload](/images/installation-guides/ghost-step-7-2-upload-select.png)
Remember to activate your newly uploaded theme (Ghost should ask you).
Success! ![Direct Link Internal Link](images/link-internal.png)
Now we should have FastComments Live Commenting enabled for our members!
![Success!](/images/installation-guides/ghost-success.png)
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!
Domain Errors ![Direct Link Internal Link](images/link-internal.png)
You may get an authorization error, like the following:
![Domain Configuration Missing](/images/installation-guides/installation-guide-webflow-step-5.png)
This is because FastComments doesn't know it's supposed to allow your account to be used on this domain.
In this case, the fix is simple. You just have to add your site to your FastComments.com account.
Customization ![Direct Link Internal Link](images/link-internal.png)
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.