FastComments.com

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 Internal Link

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

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

Open Blog Settings
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
Disable The Default System

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

Step 2: Add The FastComments.com Code Internal Link

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 Copy
1
2<style>
3 #comments {
4 display: none;
5 }
6 #commentArea:not(.loaded) {
7 display: none;
8 }
9 #commentArea.loaded {
10 display: block !important;
11 }
12</style>
13

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

Open Post Header Code
Open Post Header Code

You should see a text box open like this:

Post Header Code Open
Post Header Code Open

Now let's paste in our code snippet:

Header Code Snippet Pasted
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
Open Post Footer Code

Copy this code snippet which is designed specifically for Weebly:

FastComments Footer 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 loaded = false;
7 let interval = null;
8 function attemptLoad() {
9 if (loaded) {
10 clearInterval(interval);
11 return;
12 }
13 const comments = document.getElementById('comments');
14 if (comments) { // remove show comments button
15 comments.remove();
16 }
17 const commentArea = document.getElementById('commentArea');
18 if (!commentArea) {
19 return;
20 }
21 commentArea.innerHTML = '';
22 commentArea.classList.add('loaded');
23 FastCommentsUI(commentArea, {
24 tenantId: "demo",
25 urlId: window.location.pathname
26 });
27 loaded = true;
28 clearInterval(interval);
29 }
30 attemptLoad();
31 interval = setInterval(attemptLoad, 300);
32 })();
33</script>
34

Now let's paste in our footer code:

Post Footer Code Added
Post Footer Code Added

That's it!

Step 3: Publish! Internal Link

Now we just have to save our changes and publish our site!

Save and Publish
Save and Publish

Success Internal Link

Success! If you view your site, you should now have FastComments Live Commenting enabled:

Success
Success

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.