Comment Count Widgets | FastComments Docs

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

Доступні два типи віджетів підрахунку коментарів:

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

Ця стаття охоплює віджети для VanillaJS. Наші бібліотеки для 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