Comment Count Widgets | FastComments Docs

FastComments pruža lagane, samostalne vidžete za prikaz broja komentara koji mogu prikazati broj komentara za određene stranice ili objave. Ovi vidžeti su odvojeni od glavnog vidžeta za komentare i dizajnirani su za upotrebu na mestima gde želite prikaz broja komentara bez punog interfejsa za komentare.

Postoje dve vrste vidžeta za broj komentara:

Vidžet broja komentara - Za prikaz broja komentara na jednoj stranici
Grupni vidžet broja komentara - Za efikasno prikazivanje broja komentara za više stranica na jednoj stranici

Ovaj članak pokriva VanillaJS vidžete. Naše React/Angular/etc biblioteke takođe imaju svoje vidžete.

Vidžet za brojanje komentara je dizajniran za prikaz broja komentara pojedinacne stranice. Lagan je i pruza ažuriranja u realnom vremenu ako je konfigurisan.

Osnovna instalacija

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>

Opcije konfiguracije

Funkcija FastCommentsCommentCount prihvata sledece opcije konfiguracije:

tenantId (obavezno): Vaš FastComments ID zakupca
urlId (opciono): Identifikator stranice. Podrazumevano je window.location.href ako nije navedeno
numberOnly (opciono): Ako je true, prikazuje samo broj bez teksta. Podrazumevano je false
isLive (opciono): Ako je true, broj ce se automatski ažurirati. Podrazumevano je false

Napredni primeri

Prilagodeni 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>

Prikaz samo broja

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>

Ažuriranja uživo

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>

Metode vidžeta

Vidžet vraca objekat sa sledecim metodama:

destroy(): Uklanja vidžet i cisti sve tajmere
update(config): Ažurira vidžet sa novom konfiguracijom

Primer upotrebe

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>

Stilizovanje

Vidžet prikazuje obican HTML sa brojem komentara i dolazi sa minimalnim stilizovanjem. Možete prilagoditi izgled pomocu CSS-a:

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>

Vidžet za masovno brojanje komentara je dizajniran za efikasno prikazivanje broja komentara za više stranica na istoj stranici. Umesto pojedinačnih API poziva za svaki broj komentara, ovaj vidžet grupiše zahteve za optimalne performanse.

Osnovna instalacija

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>

Kako funkcioniše

Masovni vidžet funkcioniše tako što:

Skenira stranicu za elemente sa klasom fast-comments-count
Čita atribut data-fast-comments-url-id iz svakog elementa
Grupiše API zahteve za efikasno preuzimanje više brojeva komentara
Ažurira svaki element odgovarajućim brojem komentara

Opcije konfiguracije

Funkcija FastCommentsCommentCountBulk prihvata sledeće opcije konfiguracije:

tenantId (obavezno): Vaš FastComments ID zakupca
apiHost (opciono): Prilagođeni API host ako koristite sopstvenu instancu

Primer iz stvarnog sveta

Evo praktičnog primera koji pokazuje kako možete koristiti masovni vidžet u listi blog postova:

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>

Razmatranja performansi

Masovni vidžet automatski optimizuje performanse putem:

Grupisanja zahteva: Više brojeva komentara se preuzima u jednom API pozivu
Ograničenja veličine zahteva: Zahtevi se automatski dele ako lista URL-ova postane predugačka (preko 1.000 karaktera)
Deduplikacije: Više elemenata sa istim data-fast-comments-url-id dele isti broj

Više elemenata sa istim URL ID

Možete imati više elemenata na stranici sa istim data-fast-comments-url-id. Svi će biti ažurirani istim brojem:

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>

Lokalizacija

Masovni vidžet automatski formatira brojeve komentara na osnovu vaših FastComments jezičkih podešavanja. Pruža odgovarajući tekst za:

Nula komentara
Jedan komentar
Više komentara

Kada koristiti masovni naspram pojedinačnog vidžeta

Koristite masovni vidžet kada:

Imate više brojeva komentara na istoj stranici
Prikazujete listu postova/članaka sa brojevima komentara
Performanse su važne (smanjuje API pozive)

Koristite pojedinačni vidžet kada:

Potreban vam je samo jedan broj komentara na stranici
Potrebna su vam ažuriranja uživo (pojedinačni vidžet podržava ažuriranja u realnom vremenu)
Želite više kontrole nad ponašanjem pojedinačnog vidžeta

API-ji za broj komentara

Postoji nekoliko krajnjih tacaka za dobijanje brojeva, u zavisnosti od toga sta zelite i da li zelite da ih dobijete iz pregledaca, servera ili koristeci API SDK.

Javni brojevi komentara

Mozete dobiti javne brojeve komentara koristeci gornje vidzete ili koristeci API-je koje oni koriste. Ovi API-ji ostaju nepromenjeni od 2019. godine i nikada se nece promeniti.

Single Count Endpoint

Copy

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

Ovo ce vratiti strukturu kao:

Single Count Endpoint Response

Copy

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

Svojstvo postfix je uvek ukljuceno.

Bulk Count Endpoint

Copy

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

Ovo ce vratiti strukturu kao:

Bulk Count Endpoint Response

Copy

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

Objekat counts se popunjava samo za stranice koje imaju brojeve. Mapa translations je uvek prisutna jer se koristi za vidzet.

Ponasanje javnih krajnjih tacaka / Kesiranje

Javne krajnje tacke imaju 60-sekundni mehanizam kesiranja za rukovanje naglim povecanjem saobracaja. Interno, ovo je LRU kes po niti u memoriji servera, tako da mozete videti da se brojevi malo menjaju (rastu pa privremeno padaju) kada ljudi ostavljaju mnogo komentara.

Javne krajnje tacke uvek vracaju ukupan broj komentara, a ne broj korenskih komentara.

API-ji na strani servera / SDK

Nacin da dobijete komentare sa svog servera je da pozovete Pages API i dobijete objekat stranice, koji sadrzi ukupan broj komentara i broj korenskih komentara. Pruzamo SDK-ove koji vam omogucavaju da pozovete ovaj API bez rucnog konstruisanja API zahteva i pruzaju tipizirane povratne vrednosti.

FastComments widgeti za broj komentara pružaju jednostavan i efikasan način za prikaz broja komentara na celom sajtu.

Nadamo se da vam je ova dokumentacija bila od pomoći.

Instalacija

API-ji za broj komentara

Instalacija vidžeta za broj komentara

Osnovna instalacija

Opcije konfiguracije

Napredni primeri

Prilagodeni URL ID

Prikaz samo broja

Ažuriranja uživo

Metode vidžeta

Primer upotrebe

Stilizovanje

Masovna instalacija vidžeta za broj komentara

Osnovna instalacija

Kako funkcioniše

Opcije konfiguracije

Primer iz stvarnog sveta

Razmatranja performansi

Više elemenata sa istim URL ID

Lokalizacija

Kada koristiti masovni naspram pojedinačnog vidžeta

API-ji za broj komentara

Javni brojevi komentara

Ponasanje javnih krajnjih tacaka / Kesiranje

API-ji na strani servera / SDK

Jezik 🇷🇸 Srpski (Latinica)

Instalacija

API-ji za broj komentara

Instalacija vidžeta za broj komentara

Osnovna instalacija

Opcije konfiguracije

Napredni primeri

Prilagodeni URL ID

Prikaz samo broja

Ažuriranja uživo

Metode vidžeta

Primer upotrebe

Stilizovanje

Masovna instalacija vidžeta za broj komentara

Osnovna instalacija

Kako funkcioniše

Opcije konfiguracije

Primer iz stvarnog sveta

Razmatranja performansi

Više elemenata sa istim URL ID

Lokalizacija

Kada koristiti masovni naspram pojedinačnog vidžeta

API-ji za broj komentara

Javni brojevi komentara

Ponasanje javnih krajnjih tacaka / Kesiranje

API-ji na strani servera / SDK