Comment Count Widgets | FastComments Docs

FastComments предоставляет лёгкие, автономные виджеты счётчика комментариев, которые могут отображать количество комментариев для конкретных страниц или постов. Эти виджеты отделены от основного виджета комментариев и предназначены для использования в местах, где вы хотите показать количество комментариев без полноценного интерфейса комментариев.

There are two types of comment count widgets available:

Comment Count Widget - Для отображения счётчика комментариев на одной странице
Bulk Comment Count Widget - Для эффективного отображения количества комментариев для нескольких страниц на одной странице

This article covers the VanillaJS widgets. Наши библиотеки для React/Angular и т.д. также имеют собственные виджеты.

Виджет подсчета комментариев предназначен для отображения количества комментариев на отдельной странице. Он легкий и обеспечивает обновления в реальном времени, если настроен.

Базовая установка

Comment Count Widget Installation

Copy

Run

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

Параметры конфигурации

Функция FastCommentsCommentCount принимает следующие параметры конфигурации:

tenantId (обязательно): Ваш идентификатор арендатора FastComments
urlId (необязательно): Идентификатор страницы. По умолчанию window.location.href, если не указано
numberOnly (необязательно): Если true, отображает только число без текста. По умолчанию false
isLive (необязательно): Если true, счетчик будет обновляться автоматически. По умолчанию false

Расширенные примеры

Пользовательский URL ID

Comment Count with Custom URL ID

Copy

Run

<script src="https://cdn.fastcomments.com/js/widget-comment-count.min.js"></script>
<div id="comment-count-custom"></div>
<script>
    window.FastCommentsCommentCount(document.getElementById('comment-count-custom'), {
        tenantId: 'demo',
        urlId: 'my-custom-page-id'
    });
</script>

Отображение только числа

Comment Count Number Only

Copy

Run

<script src="https://cdn.fastcomments.com/js/widget-comment-count.min.js"></script>
<div id="comment-count-number"></div>
<script>
    window.FastCommentsCommentCount(document.getElementById('comment-count-number'), {
        tenantId: 'demo',
        numberOnly: true
    });
</script>

Обновления в реальном времени

Live Comment Count Updates

Copy

Run

<script src="https://cdn.fastcomments.com/js/widget-comment-count.min.js"></script>
<div id="comment-count-live"></div>
<script>
    window.FastCommentsCommentCount(document.getElementById('comment-count-live'), {
        tenantId: 'demo',
        isLive: true
    });
</script>

Методы виджета

Виджет возвращает объект со следующими методами:

destroy(): Удаляет виджет и очищает все таймеры
update(config): Обновляет виджет с новой конфигурацией

Пример использования

Widget Methods Example

Copy

Run

<script src="https://cdn.fastcomments.com/js/widget-comment-count.min.js"></script>
<div id="comment-count-methods"></div>
<script>
    const widget = window.FastCommentsCommentCount(document.getElementById('comment-count-methods'), {
        tenantId: 'demo'
    });
    // Update the widget to show a different page's count
    setTimeout(() => {
        widget.update({
            tenantId: 'demo',
            urlId: 'different-page-id'
        });
    }, 5000);
    // Destroy the widget after 10 seconds
    setTimeout(() => {
        widget.destroy();
    }, 10000);
</script>

Стилизация

Виджет рендерит простой HTML с количеством комментариев и поставляется с минимальной стилизацией. Вы можете настроить внешний вид с помощью CSS:

Custom Styling

Copy

Run

<style>
    .comment-count-styled {
        background: #f0f0f0;
        padding: 5px 10px;
        border-radius: 15px;
        font-size: 14px;
        color: #666;
        display: inline-block;
    }
</style>
<script src="https://cdn.fastcomments.com/js/widget-comment-count.min.js"></script>
<div id="comment-count-styled" class="comment-count-styled"></div>
<script>
    window.FastCommentsCommentCount(document.getElementById('comment-count-styled'), {
        tenantId: 'demo'
    });
</script>

Виджет массового подсчета комментариев предназначен для эффективного отображения количества комментариев для нескольких страниц на одной странице. Вместо того чтобы делать отдельные API-запросы для каждого подсчета комментариев, этот виджет группирует запросы для оптимальной производительности.

Базовая установка

Bulk Comment Count Widget Installation

Copy

Run

<script src="https://cdn.fastcomments.com/js/embed-widget-comment-count-bulk.min.js"></script>
<!-- Multiple elements with comment counts -->
<div class="fast-comments-count" data-fast-comments-url-id="page-1"></div>
<div class="fast-comments-count" data-fast-comments-url-id="page-2"></div>
<div class="fast-comments-count" data-fast-comments-url-id="page-3"></div>
<script>
    window.FastCommentsBulkCountConfig = {
        tenantId: 'demo'
    };
</script>

Как это работает

Массовый виджет работает следующим образом:

Сканирует страницу на наличие элементов с классом fast-comments-count
Считывает атрибут data-fast-comments-url-id из каждого элемента
Группирует API-запросы для эффективного получения нескольких подсчетов комментариев
Обновляет каждый элемент соответствующим количеством комментариев

Параметры конфигурации

Функция FastCommentsCommentCountBulk принимает следующие параметры конфигурации:

tenantId (обязательно): Ваш идентификатор арендатора FastComments
apiHost (необязательно): Пользовательский API-хост, если вы используете самостоятельно размещенный экземпляр

Пример из реальной жизни

Вот практический пример, показывающий, как вы можете использовать массовый виджет в списке постов блога:

Blog Post Listing with Comment Counts

Copy

Run

<script src="https://cdn.fastcomments.com/js/embed-widget-comment-count-bulk.min.js"></script>
<style>
    .blog-post {
        border: 1px solid #ddd;
        margin: 10px 0;
        padding: 15px;
        border-radius: 5px;
    }
    .post-meta {
        color: #666;
        font-size: 14px;
        margin-top: 10px;
    }
    .comment-count {
        background: #e7f3ff;
        padding: 2px 8px;
        border-radius: 12px;
        font-size: 12px;
        display: inline-block;
    }
</style>
<div class="blog-post">
    <h3>How to Install FastComments</h3>
    <p>Learn how to add FastComments to your website in just a few minutes...</p>
    <div class="post-meta">
        Published: March 15, 2024 |
        <span class="fast-comments-count comment-count" data-fast-comments-url-id="how-to-install-fastcomments"></span>
    </div>
</div>
<div class="blog-post">
    <h3>Advanced FastComments Configuration</h3>
    <p>Dive deep into the advanced configuration options for FastComments...</p>
    <div class="post-meta">
        Published: March 10, 2024 |
        <span class="fast-comments-count comment-count" data-fast-comments-url-id="advanced-fastcomments-config"></span>
    </div>
</div>
<div class="blog-post">
    <h3>FastComments vs Other Solutions</h3>
    <p>See how FastComments compares to other commenting solutions...</p>
    <div class="post-meta">
        Published: March 5, 2024 |
        <span class="fast-comments-count comment-count" data-fast-comments-url-id="fastcomments-comparison"></span>
    </div>
</div>
<script>
    window.FastCommentsBulkCountConfig = {
        tenantId: 'demo'
    };
</script>

Соображения по производительности

Массовый виджет автоматически оптимизирует производительность с помощью:

Группировки запросов: Несколько подсчетов комментариев извлекаются за один API-вызов
Ограничения размера запроса: Запросы автоматически разделяются, если список URL становится слишком большим (более 1000 символов)
Дедупликации: Несколько элементов с одинаковым data-fast-comments-url-id используют один и тот же подсчет

Несколько элементов с одинаковым URL ID

Вы можете иметь несколько элементов на странице с одинаковым data-fast-comments-url-id. Все они будут обновлены одинаковым количеством:

Multiple Elements Same URL ID

Copy

Run

<script src="https://cdn.fastcomments.com/js/embed-widget-comment-count-bulk.min.js"></script>
<style>
    .count-example {
        margin: 10px 0;
        padding: 10px;
        background: #f9f9f9;
        border-radius: 5px;
    }
</style>
<div class="count-example">
    Header Count: <span class="fast-comments-count" data-fast-comments-url-id="shared-article"></span>
</div>
<div class="count-example">
    Sidebar Count: <span class="fast-comments-count" data-fast-comments-url-id="shared-article"></span>
</div>
<div class="count-example">
    Footer Count: <span class="fast-comments-count" data-fast-comments-url-id="shared-article"></span>
</div>
<script>
    window.FastCommentsBulkCountConfig = {
        tenantId: 'demo'
    };
</script>

Локализация

Массовый виджет автоматически форматирует подсчеты комментариев на основе ваших языковых настроек FastComments. Он предоставляет соответствующий текст для:

Нуля комментариев
Одного комментария
Нескольких комментариев

Когда использовать массовый виджет против одиночного

Используйте массовый виджет когда:

У вас есть несколько подсчетов комментариев на одной странице
Вы отображаете список постов/статей с количеством комментариев
Производительность важна (уменьшает количество API-вызовов)

Используйте одиночный виджет когда:

Вам нужен только один подсчет комментариев на странице
Вам нужны обновления в реальном времени (одиночный виджет поддерживает обновления в реальном времени)
Вам нужен больший контроль над поведением отдельного виджета

API подсчёта комментариев

Существует несколько конечных точек для получения подсчетов, в зависимости от того, что вам нужно и хотите ли вы получить их из браузера, сервера или с помощью API SDK.

Публичные подсчеты комментариев

Вы можете получить публичные подсчеты комментариев, используя виджеты выше или используя API, которые они используют. Эти API остаются неизменными с 2019 года и никогда не изменятся.

Single Count Endpoint

Copy

https://fastcomments.com/widgets/comment-count/:tenantId?urlId=page_id_or_url

Это вернет структуру вида:

Single Count Endpoint Response

Copy

{"count":0,"postfix":"comments"}

Свойство postfix всегда включено.

Bulk Count Endpoint

Copy

https://fastcomments.com/widgets/comment-count-bulk/:tenantId?urlIds=x,y,z

Это вернет структуру вида:

Bulk Count Endpoint Response

Copy

{
    "status": "success",
    "translations": {
        "t174": "0 Comments",
        "t175": "1 Comment",
        "t176": "[count] Comments"
    },
    "counts": {
        "x": 10
    }
}

Объект counts заполняется только для страниц, которые имеют подсчеты. Карта translations всегда присутствует, так как используется для виджета.

Поведение публичных конечных точек / Кэширование

Публичные конечные точки имеют 60-секундный механизм кэширования для обработки всплесков трафика. Внутренне это LRU-кэш на поток в памяти сервера, поэтому вы можете видеть, что подсчеты немного меняются (растут, а затем временно падают), когда люди оставляют много комментариев.

Публичные конечные точки всегда возвращают общее количество комментариев, а не количество корневых комментариев.

Серверные API / SDK

Способ получить комментарии с вашего сервера - вызвать Pages API и получить объект страницы, который содержит общее количество комментариев и количество корневых комментариев. Мы предоставляем SDK, которые позволяют вызывать этот API без ручного построения API-запроса и предоставляют типизированные возвращаемые значения.

Виджеты счётчика комментариев FastComments предоставляют простой и эффективный способ отображать количество комментариев на всём вашем сайте.

Надеемся, что вы нашли эту документацию полезной.

Установка

API подсчёта комментариев

Установка виджета подсчёта комментариев

Базовая установка

Параметры конфигурации

Расширенные примеры

Пользовательский URL ID

Отображение только числа

Обновления в реальном времени

Методы виджета

Пример использования

Стилизация

Массовая установка виджетов подсчёта комментариев

Базовая установка

Как это работает

Параметры конфигурации

Пример из реальной жизни

Соображения по производительности

Несколько элементов с одинаковым URL ID

Локализация

Когда использовать массовый виджет против одиночного

API подсчёта комментариев

Публичные подсчеты комментариев

Поведение публичных конечных точек / Кэширование

Серверные API / SDK

Язык 🇺🇦 Русский (Украина)

Установка

API подсчёта комментариев

Установка виджета подсчёта комментариев

Базовая установка

Параметры конфигурации

Расширенные примеры

Пользовательский URL ID

Отображение только числа

Обновления в реальном времени

Методы виджета

Пример использования

Стилизация

Массовая установка виджетов подсчёта комментариев

Базовая установка

Как это работает

Параметры конфигурации

Пример из реальной жизни

Соображения по производительности

Несколько элементов с одинаковым URL ID

Локализация

Когда использовать массовый виджет против одиночного

API подсчёта комментариев

Публичные подсчеты комментариев

Поведение публичных конечных точек / Кэширование

Серверные API / SDK