FastComments.com

Add Comments to Squarespace Sites

With FastComments we can easily add live commenting to any Squarespace site.

The instructions below are divided into three sections, depending on what you want to do:

  1. Add Comments to Squarespace Blog Posts
  2. Add Comments to All Pages
  3. Add Comments to a Specific Page

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.

Adding Live Commenting to Your Blog Internal Link

In this section we'll learn how to add live commenting to your Squarespace blog.

You will only have to add the code once and the widget will automatically be added to any existing blog posts, and any blog posts you create in the future.

The comment threads will be unique to each blog post.

Step 1: Open Blog Settings Internal Link

We'll start by opening Pages in the left, in the Editor:

Open Pages
Open Pages

In the bottom you should see Blog with a gear on the right. Click the gear to open the blog settings:

Open Blog Settings
Open Blog Settings

Now we'll go to Advanced and then Post Blog Item Code Injection:

Open Blog Item Code Setting
Open Blog Item Code Setting

You should see a blank code area like the following:

Empty Code Area
Empty Code Area

Step 2: Paste Your FastComments.com Code Internal Link

Now we can copy the following code snippet:

Squarespace Comments Code
Copy Copy
1
2<script src="https://cdn.fastcomments.com/js/embed-v2.min.js"></script>
3<div id="fastcomments-widget"></div>
4<script>
5FastCommentsUI(document.getElementById('fastcomments-widget'), {
6 "tenantId": "demo"
7});
8</script>
9

...then paste in the code area and click save:

Paste and Save
Paste and Save

Success Internal Link

Success! You should now see the FastComments Comment Widget on all of your blog posts.

Success!
Success!

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

Add Live Commenting to All Pages Internal Link

In this section we'll learn how to add live commenting to all pages in your Squarespace site.

You will only have to add the code once and the widget will automatically be added to any existing pages, and any pages you create in the future.

The comment threads will be unique to each page.

Step 1: Open Developer Tools Internal Link

We'll start by opening Settings in the left, in the Editor:

Open Settings
Open Settings

In the bottom you should see Developer Tools. Click on this:

Open Developer Tools
Open Developer Tools

Now we'll go to Code Injection:

Open Code Injection
Open Code Injection

Now you should see two areas where we can add code, one labeled HEADER and one labelled FOOTER. We'll be adding our code to the FOOTER area:

Empty Footer Area
Empty Footer Area

In the next step we'll copy our code and add it.

Step 2: Paste Your FastComments.com Code Internal Link

Now we can copy the following code snippet. Use the copy button that appears in the top right of the snippet.

Squarespace All Pages Comments Code
Copy Copy
1
2<script src="https://cdn.fastcomments.com/js/embed-v2.min.js"></script>
3<script>
4 (function () {
5 function tryLoad() {
6 const pageContainer = document.querySelector('#page.container');
7 if (!pageContainer) {
8 console.warn('FastComments Error - Page container not found, trying again.');
9 setTimeout(tryLoad, 500);
10 return;
11 }
12 const pageSection = document.createElement('section');
13 pageSection.classList.add('page-section', 'content-width-wide');
14 const contentWrapper = document.createElement('div');
15 contentWrapper.classList.add('content-wrapper');
16 const content = document.createElement('div');
17 content.classList.add('content');
18 const targetDiv = document.createElement('div');
19 pageContainer.appendChild(pageSection);
20 pageSection.appendChild(contentWrapper);
21 contentWrapper.appendChild(content);
22 content.appendChild(targetDiv);
23 window.FastCommentsUI(targetDiv, {
24 "tenantId": "demo"
25 });
26 }
27 tryLoad();
28 })();
29</script>
30
31

...then paste in the code area and click save. It should look like this, with the code in the FOOTER block:

Paste and Save
Paste and Save

If you're having issues, make sure near the bottom it doesn't say "tenantId": "demo". It should show your tenant id if you are logged in. If not, reach out to support.

Success Internal Link

Success! You should now see the FastComments Comment Widget on all of your pages.

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

Add Live Comment to Specific Page Internal Link

In this section we'll learn how to add live commenting to a specific page of your Squarespace site.

With this approach you will have to add the code to each page you want to add the comment widget to.

The comment threads will be unique to each page.

Step 1: Add Code Block Internal Link

When adding the comment widget to a specific page, we have a bit more control.

We can add the widget exactly where we want to, which is what we will do in this tutorial, by adding a custom code block.

First, open the page you want to add comments to, and click edit in the top left.

In this example we're going to add a section specifically for comments, but you could add them to an existing section on the page.

Let's add our section:

Add Section
Add Section

We're going to add a blank section:

Add Blank Section
Add Blank Section

You'll see a big blank area added. Click ADD BLOCK in the top left:

Add Block
Add Block

Scroll down until you find the Code option and click it:

Select Code Widget
Select Code Widget

Position your code block like how you would want the comments widget to be positioned:

Position
Position

Edit the code block:

Edit The Code Block
Edit The Code Block

In the next step we'll copy our code and add it.

Step 2: Paste Your FastComments.com Code Internal Link

Now we can copy the following code snippet. Use the copy button that appears in the top right of the snippet.

Squarespace Single Page Code
Copy Copy
1
2<script src="https://cdn.fastcomments.com/js/embed-v2.min.js"></script>
3<script>
4 (function () {
5 function tryLoad() {
6 const pageContainer = document.querySelector('#page.container');
7 if (!pageContainer) {
8 console.warn('FastComments Error - Page container not found, trying again.');
9 setTimeout(tryLoad, 500);
10 return;
11 }
12 const pageSection = document.createElement('section');
13 pageSection.classList.add('page-section', 'content-width-wide');
14 const contentWrapper = document.createElement('div');
15 contentWrapper.classList.add('content-wrapper');
16 const content = document.createElement('div');
17 content.classList.add('content');
18 const targetDiv = document.createElement('div');
19 pageContainer.appendChild(pageSection);
20 pageSection.appendChild(contentWrapper);
21 contentWrapper.appendChild(content);
22 content.appendChild(targetDiv);
23 window.FastCommentsUI(targetDiv, {
24 "tenantId": "demo"
25 });
26 }
27 tryLoad();
28 })();
29</script>
30
31

It should look like this:

Paste and Save
Paste and Save

Now click save in the top right.

Note that the Preview in Safe Mode option will not work, but the widget will appear when you visit your site.

If you're having issues, make sure near the bottom it doesn't say "tenantId": "demo". It should show your tenant id if you are logged in. If not, reach out to support.

Success Internal Link

Success! You should now see the FastComments Comment Widget on your page.

Congratulations on setting up FastComments with Squarespace! 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.