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 ID закупца
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 ID закупца
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-ова постане предугачка (преко 1.000 карактера)
Дедупликације: Више елемената са истим 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 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 видгети за број коментара пружају једноставан и ефикасан начин за приказ броја коментара широм вашег сајта.

Надамо се да вам је ова документација била корисна.

Инсталација

АПИ-ји за број коментара

Инсталација видџета за број коментара

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

Опције конфигурације

Напредни примери

Прилагођени URL ID

Приказ само броја

Ажурирања уживо

Методе виџета

Пример употребе

Стилизовање

Масовна инсталација видџета за број коментара

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

Како функционише

Опције конфигурације

Пример из стварног света

Разматрања перформанси

Више елемената са истим URL ID

Локализација

Када користити масовни наспрам појединачног виџета

АПИ-ји за број коментара

Јавни бројеви коментара

Понашање јавних крајњих тачака / Кеширање

API-ји на страни сервера / SDK

Језик 🇷🇸 Српски

Инсталација

АПИ-ји за број коментара

Инсталација видџета за број коментара

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

Опције конфигурације

Напредни примери

Прилагођени URL ID

Приказ само броја

Ажурирања уживо

Методе виџета

Пример употребе

Стилизовање

Масовна инсталација видџета за број коментара

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

Како функционише

Опције конфигурације

Пример из стварног света

Разматрања перформанси

Више елемената са истим URL ID

Локализација

Када користити масовни наспрам појединачног виџета

АПИ-ји за број коментара

Јавни бројеви коментара

Понашање јавних крајњих тачака / Кеширање

API-ји на страни сервера / SDK