Comment Count Widgets | FastComments Docs

FastComments leverer letvægtige, selvstændige widgete til kommentarantal, som kan vise antallet af kommentarer for specifikke sider eller indlæg. Disse widgets er separate fra den primære kommenterings-widget og er designet til brug alle steder, hvor du ønsker at vise kommentarantal uden hele kommenteringsgrænsefladen.

Der findes to typer af kommentarantal-widgete:

Comment Count Widget - Til visning af kommentarantallet for en enkelt side
Bulk Comment Count Widget - Til effektiv visning af kommentarantal på tværs af flere sider på samme side

Denne artikel omhandler VanillaJS-widgete. Vores React/Angular/etc biblioteker har også deres egne widgets.

Comment Count Widget er designet til at vise kommentartaellingen for en enkelt side. Den er letvaegtsmessig og giver realtidsopdateringer, hvis konfigureret.

Grundlaeggende installation

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>

Konfigurationsmuligheder

Funktionen FastCommentsCommentCount accepterer foelgende konfigurationsmuligheder:

tenantId (pakraevet): Dit FastComments tenant-ID
urlId (valgfrit): Sideidentifikatoren. Standardvaerdien er window.location.href, hvis ikke angivet
numberOnly (valgfrit): Hvis true, vises kun tallet uden tekst. Standard er false
isLive (valgfrit): Hvis true, opdateres taellingen automatisk. Standard er false

Avancerede eksempler

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

Kun talvisning

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

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>

Widgetten returnerer et objekt med foelgende metoder:

destroy(): Fjerner widgetten og rydder op i alle timere
update(config): Opdaterer widgetten med en ny konfiguration

Eksempel paa brug

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

Widgetten renderer almindelig HTML med kommentartaellingen og kommer med minimal styling. Du kan tilpasse udseendet med 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>

Bulk Comment Count Widget er designet til effektivt at vise kommentartællinger for flere sider på samme side. I stedet for at foretage individuelle API-kald for hver kommentartælling, samler denne widget anmodninger for optimal ydeevne.

Grundlæggende installation

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>

Sådan virker det

Bulk-widgetten fungerer ved at:

Scanne siden for elementer med klassen fast-comments-count
Læse data-fast-comments-url-id attributten fra hvert element
Samle API-anmodninger for effektivt at hente flere kommentartællinger
Opdatere hvert element med den relevante kommentartælling

Konfigurationsmuligheder

Funktionen FastCommentsCommentCountBulk accepterer følgende konfigurationsmuligheder:

tenantId (påkrævet): Dit FastComments tenant-ID
apiHost (valgfrit): Brugerdefineret API-vært, hvis du bruger en selv-hostet instans

Eksempel fra den virkelige verden

Her er et praktisk eksempel, der viser, hvordan du kan bruge bulk-widgetten i en blogindlægsliste:

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>

Ydeevneovervejelser

Bulk-widgetten optimerer automatisk ydeevnen ved at:

Samle anmodninger: Flere kommentartællinger hentes i et enkelt API-kald
Anmodningsstørrelsesbegrænsninger: Anmodninger opdeles automatisk, hvis URL-listen bliver for stor (over 1.000 tegn)
Deduplikering: Flere elementer med samme data-fast-comments-url-id deler samme tælling

Flere elementer med samme URL-ID

Du kan have flere elementer på siden med samme data-fast-comments-url-id. De vil alle blive opdateret med samme tælling:

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>

Lokalisering

Bulk-widgetten formaterer automatisk kommentartællinger baseret på dine FastComments sprogindstillinger. Den giver passende tekst til:

Nul kommentarer
En kommentar
Flere kommentarer

Brug Bulk Widget når:

Du har flere kommentartællinger på samme side
Du viser en liste over indlæg/artikler med kommentartællinger
Ydeevne er vigtig (reducerer API-kald)

Brug Single Widget når:

Du kun har brug for en kommentartælling på siden
Du har brug for live-opdateringer (single-widgetten understøtter realtidsopdateringer)
Du ønsker mere kontrol over individuel widget-adfærd

API'er til kommentartælling

Der er nogle forskellige endpoints til at hente taelingerne, afhaengigt af hvad du oensker, og om du vil hente dem fra en browser, server eller ved hjaelp af API SDK'en.

Offentlige kommentartaellinger

Du kan hente de offentlige kommentartaellinger ved hjaelp af widgets ovenfor eller ved hjaelp af de API'er, de bruger. Disse API'er er forblevet uaendrede siden 2019 og vil aldrig aendre sig.

Single Count Endpoint

Copy

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

Dette vil returnere en struktur som:

Single Count Endpoint Response

Copy

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

Egenskaben postfix er altid inkluderet.

Bulk Count Endpoint

Copy

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

Dette vil returnere en struktur som:

Bulk Count Endpoint Response

Copy

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

Objektet counts udfyldes kun for sider, der har taellinger. Kortet translations er altid til stede, da det bruges til widgetten.

Offentlig endpoint-adfaerd / Caching

De offentlige endpoints har en 60-sekunders caching-mekanisme til at haandtere trafikspidsbelastninger. Internt er dette en per-traad LRU-cache i hukommelsen paa serveren, saa du kan se taellinger aendre sig lidt (gaa op og derefter midlertidigt ned), naar folk efterlader mange kommentarer.

De offentlige endpoints returnerer altid det totale antal kommentarer, ikke rodkommentarantallet.

Server-side API'er / SDK

Maaden at hente kommentarer fra din server er at kalde Pages API og hente sideobjektet, som indeholder det totale antal kommentarer og rodkommentarantallet. Vi leverer SDK'er, der giver dig mulighed for at kalde denne API uden at konstruere API-anmodningen manuelt og giver typede returvaerdier.

FastComments' widgets til kommentartælling giver en enkel og effektiv måde at vise antallet af kommentarer på tværs af dit websted.

Vi håber, du fandt denne dokumentation nyttig.

Installation

API'er til kommentartælling

Installation af widget til kommentartælling

Grundlaeggende installation

Konfigurationsmuligheder

Avancerede eksempler

Brugerdefineret URL-ID

Kun talvisning

Live-opdateringer

Widget-metoder

Eksempel paa brug

Styling

Installation af flere widgets til kommentartælling

Grundlæggende installation

Sådan virker det

Konfigurationsmuligheder

Eksempel fra den virkelige verden

Ydeevneovervejelser

Flere elementer med samme URL-ID

Lokalisering

Hvornår skal man bruge Bulk vs Single Widget

API'er til kommentartælling

Offentlige kommentartaellinger

Offentlig endpoint-adfaerd / Caching

Server-side API'er / SDK

Sprog 🇩🇰 Dansk

Installation

API'er til kommentartælling

Installation af widget til kommentartælling

Grundlaeggende installation

Konfigurationsmuligheder

Avancerede eksempler

Brugerdefineret URL-ID

Kun talvisning

Live-opdateringer

Widget-metoder

Eksempel paa brug

Styling

Installation af flere widgets til kommentartælling

Grundlæggende installation

Sådan virker det

Konfigurationsmuligheder

Eksempel fra den virkelige verden

Ydeevneovervejelser

Flere elementer med samme URL-ID

Lokalisering

Hvornår skal man bruge Bulk vs Single Widget

API'er til kommentartælling

Offentlige kommentartaellinger

Offentlig endpoint-adfaerd / Caching

Server-side API'er / SDK