Comment Count Widgets | FastComments Docs

FastComments предоставя леки, самостоятелни джаджи за брой коментари, които могат да показват броя коментари за конкретни страници или публикации. Тези джаджи са отделни от основната джаджа за коментиране и са проектирани за използване навсякъде, където искате да показвате брой коментари без пълния интерфейс за коментиране.

Има два типа джаджи за брой коментари:

Comment Count Widget - За показване на броя коментари за една страница
Bulk Comment Count Widget - За ефективно показване на броя коментари за множество страници върху една страница

Тази статия обхваща VanillaJS джаджите. Нашите библиотеки за React/Angular/etc също имат свои джаджи.

Уиджетът за броене на коментари е проектиран за показване на броя коментари на една страница. Той е лек и осигурява актуализации в реално време, ако е конфигуриран.

Основна инсталация

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