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:

Add Comments to Squarespace Blog Posts
Add Comments to All Pages
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

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

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

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

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

Open Blog Item Code Setting

You should see a blank code area like the following:

Empty Code Area

Step 2: Paste Your FastComments.com Code

Now we can copy the following code snippet:

Squarespace Comments Code

Copy

<script src="https://cdn.fastcomments.com/js/embed-v2.min.js"></script>
<div id="fastcomments-widget"></div>
<script>
FastCommentsUI(document.getElementById('fastcomments-widget'), {
    "tenantId": "demo"
});
</script>

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

Paste and Save

Success

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

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

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

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

Open Settings

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

Open Developer Tools

Now we'll go to 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

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

Step 2: Paste Your FastComments.com Code

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

<script src="https://cdn.fastcomments.com/js/embed-v2.min.js"></script>
<script>
    (function () {
        function tryLoad() {
            const pageContainer = document.querySelector('#page.container');
            if (!pageContainer) {
                console.warn('FastComments Error - Page container not found, trying again.');
                setTimeout(tryLoad, 500);
                return;
            }
            const pageSection = document.createElement('section');
            pageSection.classList.add('page-section', 'content-width-wide');
            const contentWrapper = document.createElement('div');
            contentWrapper.classList.add('content-wrapper');
            const content = document.createElement('div');
            content.classList.add('content');
            const targetDiv = document.createElement('div');
            pageContainer.appendChild(pageSection);
            pageSection.appendChild(contentWrapper);
            contentWrapper.appendChild(content);
            content.appendChild(targetDiv);
            window.FastCommentsUI(targetDiv, {
                "tenantId": "demo"
            });
        }
        tryLoad();
    })();
</script>

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

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

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

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

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

We're going to add a blank section:

Add Blank Section

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

Add Block

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

Select Code Widget

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

Position

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

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

<script src="https://cdn.fastcomments.com/js/embed-v2.min.js"></script>
<script>
    (function () {
        function tryLoad() {
            const pageContainer = document.querySelector('#page.container');
            if (!pageContainer) {
                console.warn('FastComments Error - Page container not found, trying again.');
                setTimeout(tryLoad, 500);
                return;
            }
            const pageSection = document.createElement('section');
            pageSection.classList.add('page-section', 'content-width-wide');
            const contentWrapper = document.createElement('div');
            contentWrapper.classList.add('content-wrapper');
            const content = document.createElement('div');
            content.classList.add('content');
            const targetDiv = document.createElement('div');
            pageContainer.appendChild(pageSection);
            pageSection.appendChild(contentWrapper);
            contentWrapper.appendChild(content);
            content.appendChild(targetDiv);
            window.FastCommentsUI(targetDiv, {
                "tenantId": "demo"
            });
        }
        tryLoad();
    })();
</script>

It should look like this:

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

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!

Domain Errors

You may get an authorization error, like the following:

Domain Configuration Missing

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.

Go here to add your site to your account.

Customization

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.

Add Comments to Your Blog

Add Comments to All Pages