FastComments.com

FastComments provides lightweight, standalone comment count widgets that can display the number of comments for specific pages or posts. These widgets are separate from the main commenting widget and are designed for use in places anywhere you want to show comment counts without the full commenting interface.

There are two types of comment count widgets available:

  1. Comment Count Widget - For displaying the comment count of a single page
  2. Bulk Comment Count Widget - For efficiently displaying comment counts across multiple pages on the same page

This article covers the VanillaJS widgets. Our React/Angular/etc libraries also have their own widgets.

Comment Count Widget Installation Internal Link

The Comment Count Widget is designed for displaying the comment count of a single page. It's lightweight and provides real-time updates if configured.

Basic Installation

Comment Count Widget Installation
Copy CopyRun External Link
1
2<script src="https://cdn.fastcomments.com/js/embed-comment-count.min.js"></script>
3<div id="comment-count"></div>
4<script>
5 window.FastCommentsCommentCount(document.getElementById('comment-count'), {
6 tenantId: 'demo'
7 });
8</script>
9

Configuration Options

The FastCommentsCommentCount function accepts the following configuration options:

  • tenantId (required): Your FastComments tenant ID
  • urlId (optional): The page identifier. Defaults to window.location.href if not specified
  • numberOnly (optional): If true, only renders the number without any text. Default is false
  • isLive (optional): If true, the count will update automatically. Default is false

Advanced Examples

Custom URL ID

Comment Count with Custom URL ID
Copy CopyRun External Link
1
2<script src="https://cdn.fastcomments.com/js/embed-comment-count.min.js"></script>
3<div id="comment-count-custom"></div>
4<script>
5 window.FastCommentsCommentCount(document.getElementById('comment-count-custom'), {
6 tenantId: 'demo',
7 urlId: 'my-custom-page-id'
8 });
9</script>
10

Number Only Display

Comment Count Number Only
Copy CopyRun External Link
1
2<script src="https://cdn.fastcomments.com/js/embed-comment-count.min.js"></script>
3<div id="comment-count-number"></div>
4<script>
5 window.FastCommentsCommentCount(document.getElementById('comment-count-number'), {
6 tenantId: 'demo',
7 numberOnly: true
8 });
9</script>
10

Live Updates

Live Comment Count Updates
Copy CopyRun External Link
1
2<script src="https://cdn.fastcomments.com/js/embed-comment-count.min.js"></script>
3<div id="comment-count-live"></div>
4<script>
5 window.FastCommentsCommentCount(document.getElementById('comment-count-live'), {
6 tenantId: 'demo',
7 isLive: true
8 });
9</script>
10

Widget Methods

The widget returns an object with the following methods:

  • destroy(): Removes the widget and cleans up any timers
  • update(config): Updates the widget with a new configuration

Example Usage

Widget Methods Example
Copy CopyRun External Link
1
2<script src="https://cdn.fastcomments.com/js/embed-comment-count.min.js"></script>
3<div id="comment-count-methods"></div>
4<script>
5 const widget = window.FastCommentsCommentCount(document.getElementById('comment-count-methods'), {
6 tenantId: 'demo'
7 });
8
9 // Update the widget to show a different page's count
10 setTimeout(() => {
11 widget.update({
12 tenantId: 'demo',
13 urlId: 'different-page-id'
14 });
15 }, 5000);
16
17 // Destroy the widget after 10 seconds
18 setTimeout(() => {
19 widget.destroy();
20 }, 10000);
21</script>
22

Styling

The widget renders plain HTML with the comment count and comes with minimal styling. You can customize the appearance with CSS:

Custom Styling
Copy CopyRun External Link
1
2<style>
3 .comment-count-styled {
4 background: #f0f0f0;
5 padding: 5px 10px;
6 border-radius: 15px;
7 font-size: 14px;
8 color: #666;
9 display: inline-block;
10 }
11</style>
12<script src="https://cdn.fastcomments.com/js/embed-comment-count.min.js"></script>
13<div id="comment-count-styled" class="comment-count-styled"></div>
14<script>
15 window.FastCommentsCommentCount(document.getElementById('comment-count-styled'), {
16 tenantId: 'demo'
17 });
18</script>
19

Bulk Comment Count Widget Installation Internal Link

The Bulk Comment Count Widget is designed for efficiently displaying comment counts for multiple pages on the same page. Instead of making individual API calls for each comment count, this widget batches requests for optimal performance.

Basic Installation

Bulk Comment Count Widget Installation
Copy CopyRun External Link
1
2<script src="https://cdn.fastcomments.com/js/embed-comment-count-bulk.min.js"></script>
3
4<!-- Multiple elements with comment counts -->
5<div class="fast-comments-count" data-fast-comments-url-id="page-1"></div>
6<div class="fast-comments-count" data-fast-comments-url-id="page-2"></div>
7<div class="fast-comments-count" data-fast-comments-url-id="page-3"></div>
8
9<script>
10 window.FastCommentsCommentCountBulk({
11 tenantId: 'demo'
12 });
13</script>
14

How It Works

The bulk widget works by:

  1. Scanning the page for elements with the class fast-comments-count
  2. Reading the data-fast-comments-url-id attribute from each element
  3. Batching API requests to fetch multiple comment counts efficiently
  4. Updating each element with the appropriate comment count

Configuration Options

The FastCommentsCommentCountBulk function accepts the following configuration options:

  • tenantId (required): Your FastComments tenant ID
  • apiHost (optional): Custom API host if you're using a self-hosted instance

Real-World Example

Here's a practical example showing how you might use the bulk widget in a blog post listing:

Blog Post Listing with Comment Counts
Copy CopyRun External Link
1
2<script src="https://cdn.fastcomments.com/js/embed-comment-count-bulk.min.js"></script>
3
4<style>
5 .blog-post {
6 border: 1px solid #ddd;
7 margin: 10px 0;
8 padding: 15px;
9 border-radius: 5px;
10 }
11 .post-meta {
12 color: #666;
13 font-size: 14px;
14 margin-top: 10px;
15 }
16 .comment-count {
17 background: #e7f3ff;
18 padding: 2px 8px;
19 border-radius: 12px;
20 font-size: 12px;
21 display: inline-block;
22 }
23</style>
24
25<div class="blog-post">
26 <h3>How to Install FastComments</h3>
27 <p>Learn how to add FastComments to your website in just a few minutes...</p>
28 <div class="post-meta">
29 Published: March 15, 2024 |
30 <span class="fast-comments-count comment-count" data-fast-comments-url-id="how-to-install-fastcomments"></span>
31 </div>
32</div>
33
34<div class="blog-post">
35 <h3>Advanced FastComments Configuration</h3>
36 <p>Dive deep into the advanced configuration options for FastComments...</p>
37 <div class="post-meta">
38 Published: March 10, 2024 |
39 <span class="fast-comments-count comment-count" data-fast-comments-url-id="advanced-fastcomments-config"></span>
40 </div>
41</div>
42
43<div class="blog-post">
44 <h3>FastComments vs Other Solutions</h3>
45 <p>See how FastComments compares to other commenting solutions...</p>
46 <div class="post-meta">
47 Published: March 5, 2024 |
48 <span class="fast-comments-count comment-count" data-fast-comments-url-id="fastcomments-comparison"></span>
49 </div>
50</div>
51
52<script>
53 window.FastCommentsCommentCountBulk({
54 tenantId: 'demo'
55 });
56</script>
57

Performance Considerations

The bulk widget automatically optimizes performance by:

  • Batching requests: Multiple comment counts are fetched in a single API call
  • Request size limits: Requests are automatically split if the URL list becomes too large (over 1,000 characters)
  • Deduplication: Multiple elements with the same data-fast-comments-url-id share the same count

Multiple Elements with Same URL ID

You can have multiple elements on the page with the same data-fast-comments-url-id. They will all be updated with the same count:

Multiple Elements Same URL ID
Copy CopyRun External Link
1
2<script src="https://cdn.fastcomments.com/js/embed-comment-count-bulk.min.js"></script>
3
4<style>
5 .count-example {
6 margin: 10px 0;
7 padding: 10px;
8 background: #f9f9f9;
9 border-radius: 5px;
10 }
11</style>
12
13<div class="count-example">
14 Header Count: <span class="fast-comments-count" data-fast-comments-url-id="shared-article"></span>
15</div>
16
17<div class="count-example">
18 Sidebar Count: <span class="fast-comments-count" data-fast-comments-url-id="shared-article"></span>
19</div>
20
21<div class="count-example">
22 Footer Count: <span class="fast-comments-count" data-fast-comments-url-id="shared-article"></span>
23</div>
24
25<script>
26 window.FastCommentsCommentCountBulk({
27 tenantId: 'demo'
28 });
29</script>
30

Localization

The bulk widget automatically formats comment counts based on your FastComments language settings. It provides appropriate text for:

  • Zero comments
  • One comment
  • Multiple comments

When to Use Bulk vs Single Widget

Use the Bulk Widget when:

  • You have multiple comment counts on the same page
  • You're displaying a list of posts/articles with comment counts
  • Performance is important (reduces API calls)

Use the Single Widget when:

  • You only need one comment count on the page
  • You need live updates (the single widget supports real-time updates)
  • You want more control over individual widget behavior

The FastComments comment count widgets provide a simple and efficient way to display comment counts across your site.

We hope you found this documentation helpful.