Add Comments to Weebly Sites

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

The instructions below are for a blog built on Weebly. For other site types, we are happy to help, just reach out to our support staff.

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.

Step 1: Open Blog Settings

First, make sure you have some blog posts added to your site to see the results of this tutorial.

Once ready, we can go ahead and open the Weebly editor, and click Settings at the top.

Open Settings

Now let's open the settings for our blog by going to Blog on the left:

Open Blog Settings

Now what we need to do is disable the default Weebly comment system, which we will replace.

Note if you'd like to migrate over existing comments from your Weebly site to FastComments, your support representative can assist with this migration.

Now let's set the Commenting system to Default and Comment Default to Closed:

Disable The Default System

Next we just have to add the FastComments.com widget code!

Step 2: Add The FastComments.com Code

To make the Weebly and FastComments integration work nicely, we have to add two small pieces of code.

The first snippet is to hide the Weebly "Comments are Closed" message, and the second is to actually load FastComments.

First, copy this small code snippet:

FastComments Header Code Snippet

Copy

<style>
    #comments {
        display: none;
    }
    #commentArea:not(.loaded) {
        display: none;
    }
    #commentArea.loaded {
        display: block !important;
    }
</style>

Then, on the same settings page from Step One, click the + next to Post header code.

Open Post Header Code

You should see a text box open like this:

Post Header Code Open

Now let's paste in our code snippet:

Header Code Snippet Pasted

Next up is the footer code to enable FastComments. Click the plus sign next to Post footer code:

Open Post Footer Code

Copy this code snippet which is designed specifically for Weebly:

FastComments Footer Code Snippet

Copy

<script src="https://cdn.fastcomments.com/js/embed-v2.min.js"></script>
<div id="fastcomments-widget"></div>
<script>
    (function () {
        let loaded = false;
        let interval = null;
        function attemptLoad() {
            if (loaded) {
                clearInterval(interval);
                return;
            }
            const comments = document.getElementById('comments');
            if (comments) { // remove show comments button
                comments.remove();
            }
            const commentArea = document.getElementById('commentArea');
            if (!commentArea) {
                return;
            }
            commentArea.innerHTML = '';
            commentArea.classList.add('loaded');
            FastCommentsUI(commentArea, {
                tenantId: "demo",
                urlId: window.location.pathname
            });
            loaded = true;
            clearInterval(interval);
        }
        attemptLoad();
        interval = setInterval(attemptLoad, 300);
    })();
</script>