Comment Count Widgets | FastComments Docs

FastComments biedt lichtgewicht, zelfstandige widgets die het aantal reacties voor specifieke pagina's of berichten kunnen weergeven. Deze widgets zijn losstaand van de hoofdcommentaarwidget en zijn ontworpen voor gebruik op elke plek waar je het aantal reacties wilt tonen zonder de volledige commentaarinterface.

Er zijn twee soorten widgets voor het aantal reacties beschikbaar:

Widget voor aantal reacties - Voor het weergeven van het aantal reacties van een enkele pagina
Bulk-widget voor aantal reacties - Voor het efficiënt weergeven van aantallen reacties van meerdere pagina's op dezelfde pagina

Dit artikel behandelt de VanillaJS-widgets. Onze React/Angular/etc bibliotheken hebben ook hun eigen widgets.

De Comment Count Widget is ontworpen om het aantal reacties van een enkele pagina weer te geven. Het is lichtgewicht en biedt realtime updates indien geconfigureerd.

Basis Installatie

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>

Configuratie Opties

De FastCommentsCommentCount functie accepteert de volgende configuratieopties:

tenantId (vereist): Uw FastComments tenant ID
urlId (optioneel): De pagina-identifier. Standaard is window.location.href indien niet gespecificeerd
numberOnly (optioneel): Indien true, wordt alleen het nummer zonder tekst weergegeven. Standaard is false
isLive (optioneel): Indien true, wordt de telling automatisch bijgewerkt. Standaard is false

Geavanceerde Voorbeelden

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

Alleen Nummer Weergave

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 Updates

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>

De widget retourneert een object met de volgende methodes:

destroy(): Verwijdert de widget en ruimt alle timers op
update(config): Werkt de widget bij met een nieuwe configuratie

Voorbeeld Gebruik

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>

Styling

De widget rendert gewone HTML met het aantal reacties en komt met minimale styling. U kunt het uiterlijk aanpassen met 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>

De Bulk Comment Count Widget is ontworpen voor het efficient weergeven van commentaartellingen voor meerdere pagina's op dezelfde pagina. In plaats van individuele API-aanroepen te maken voor elke commentaartelling, bundelt deze widget verzoeken voor optimale prestaties.

Basis Installatie

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>

Hoe Het Werkt

De bulk widget werkt door:

De pagina te scannen naar elementen met de klasse fast-comments-count
Het data-fast-comments-url-id attribuut van elk element te lezen
API-verzoeken te bundelen om meerdere commentaartellingen efficient op te halen
Elk element bij te werken met de juiste commentaartelling

Configuratie Opties

De FastCommentsCommentCountBulk functie accepteert de volgende configuratieopties:

tenantId (vereist): Uw FastComments tenant ID
apiHost (optioneel): Aangepaste API-host als u een zelf-gehoste instantie gebruikt

Praktijkvoorbeeld

Hier is een praktisch voorbeeld dat laat zien hoe u de bulk widget kunt gebruiken in een blogpost-overzicht:

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>

Prestatie Overwegingen

De bulk widget optimaliseert automatisch de prestaties door:

Verzoeken bundelen: Meerdere commentaartellingen worden opgehaald in een enkele API-aanroep
Verzoekgrootte limieten: Verzoeken worden automatisch opgesplitst als de URL-lijst te groot wordt (meer dan 1.000 tekens)
Deduplicatie: Meerdere elementen met dezelfde data-fast-comments-url-id delen dezelfde telling

Meerdere Elementen met Dezelfde URL ID

U kunt meerdere elementen op de pagina hebben met dezelfde data-fast-comments-url-id. Ze worden allemaal bijgewerkt met dezelfde telling:

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>

Lokalisatie

De bulk widget formatteert automatisch commentaartellingen op basis van uw FastComments taalinstellingen. Het biedt passende tekst voor:

Nul reacties
Een reactie
Meerdere reacties

Gebruik de Bulk Widget wanneer:

U meerdere commentaartellingen op dezelfde pagina heeft
U een lijst van berichten/artikelen met commentaartellingen weergeeft
Prestaties belangrijk zijn (vermindert API-aanroepen)

Gebruik de Single Widget wanneer:

U slechts een commentaartelling op de pagina nodig heeft
U live updates nodig heeft (de single widget ondersteunt realtime updates)
U meer controle wilt over het gedrag van individuele widgets

API's voor reactietelling

Er zijn een paar endpoints om de tellingen te krijgen, afhankelijk van wat u wilt en of u ze wilt ophalen vanuit een browser, server of met behulp van de API SDK.

Openbare Commentaartellingen

U kunt de openbare commentaartellingen krijgen met behulp van de bovenstaande widgets of met behulp van de API's die ze gebruiken. Deze API's zijn onveranderd gebleven sinds 2019 en zullen nooit veranderen.

Single Count Endpoint

Copy

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

Dit zal een structuur retourneren zoals:

Single Count Endpoint Response

Copy

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

De postfix eigenschap is altijd opgenomen.

Bulk Count Endpoint

Copy

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

Dit zal een structuur retourneren zoals:

Bulk Count Endpoint Response

Copy

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

Het counts object wordt alleen gevuld voor pagina's die tellingen hebben. De translations map is altijd aanwezig omdat deze wordt gebruikt voor de widget.

Gedrag van Openbare Endpoints / Caching

De openbare endpoints hebben een 60-seconden caching-mechanisme om pieken in verkeer aan te kunnen. Intern is dit een per-thread LRU-cache in het geheugen op de server, dus u kunt zien dat tellingen iets veranderen (omhoog gaan en dan tijdelijk weer omlaag) wanneer mensen veel reacties achterlaten.

De openbare endpoints retourneren altijd het totale aantal reacties, niet het aantal root-reacties.

Server-Side API's / SDK

De manier om reacties van uw server te krijgen is door de Pages API aan te roepen en het pagina-object te krijgen, dat het totale aantal reacties en het aantal root-reacties bevat. We bieden SDK's die u in staat stellen deze API aan te roepen zonder het API-verzoek handmatig te construeren en die getypeerde retourwaarden bieden.

De FastComments-widgets voor reactietellingen bieden een eenvoudige en efficiënte manier om het aantal reacties op uw site weer te geven.

We hopen dat u deze documentatie nuttig vond.

Installatie

API's voor reactietelling

Installatie van de widget voor reactietelling

Basis Installatie

Configuratie Opties

Geavanceerde Voorbeelden

Aangepaste URL ID

Alleen Nummer Weergave

Live Updates

Widget Methodes

Voorbeeld Gebruik

Styling

Bulkinstallatie van widgets voor reactietelling

Basis Installatie

Hoe Het Werkt

Configuratie Opties

Praktijkvoorbeeld

Prestatie Overwegingen

Meerdere Elementen met Dezelfde URL ID

Lokalisatie

Wanneer Bulk vs Single Widget Gebruiken

API's voor reactietelling

Openbare Commentaartellingen

Gedrag van Openbare Endpoints / Caching

Server-Side API's / SDK

Taal 🇳🇱 Nederlands

Installatie

API's voor reactietelling

Installatie van de widget voor reactietelling

Basis Installatie

Configuratie Opties

Geavanceerde Voorbeelden

Aangepaste URL ID

Alleen Nummer Weergave

Live Updates

Widget Methodes

Voorbeeld Gebruik

Styling

Bulkinstallatie van widgets voor reactietelling

Basis Installatie

Hoe Het Werkt

Configuratie Opties

Praktijkvoorbeeld

Prestatie Overwegingen

Meerdere Elementen met Dezelfde URL ID

Lokalisatie

Wanneer Bulk vs Single Widget Gebruiken

API's voor reactietelling

Openbare Commentaartellingen

Gedrag van Openbare Endpoints / Caching

Server-Side API's / SDK