Das Comment Count Widget ist dafuer konzipiert, die Kommentaranzahl einer einzelnen Seite anzuzeigen. Es ist leichtgewichtig und bietet Echtzeit-Updates, wenn konfiguriert.

Grundlegende Installation

Comment Count Widget Installation

Copy Run

1

2<script src="https://cdn.fastcomments.com/js/widget-comment-count.min.js"></script>

3<div id="comment-count"></div>

4<script>

5 window.FastCommentsCommentCount(document.getElementById('comment-count'), {

6 tenantId: 'demo'

7 });

8</script>

9

Konfigurationsoptionen

Die Funktion FastCommentsCommentCount akzeptiert die folgenden Konfigurationsoptionen:

• tenantId (erforderlich): Ihre FastComments Tenant-ID
• urlId (optional): Die Seitenkennung. Standardmaessig window.location.href, wenn nicht angegeben
• numberOnly (optional): Wenn true, wird nur die Zahl ohne Text angezeigt. Standard ist false
• isLive (optional): Wenn true, wird die Zaehlung automatisch aktualisiert. Standard ist false

Fortgeschrittene Beispiele

Benutzerdefinierte URL-ID

Comment Count with Custom URL ID

Copy Run

1

2<script src="https://cdn.fastcomments.com/js/widget-comment-count.min.js"></script>

3<div id="comment-count-custom"></div>

4<script>

5 window.FastCommentsCommentCount(document.getElementById('comment-count-custom'), {

6 tenantId: 'demo',

7 urlId: 'my-custom-page-id'

8 });

9</script>

10

Nur Zahlenanzeige

Comment Count Number Only

Copy Run

1

2<script src="https://cdn.fastcomments.com/js/widget-comment-count.min.js"></script>

3<div id="comment-count-number"></div>

4<script>

5 window.FastCommentsCommentCount(document.getElementById('comment-count-number'), {

6 tenantId: 'demo',

7 numberOnly: true

8 });

9</script>

10

Live-Updates

Live Comment Count Updates

Copy Run

1

2<script src="https://cdn.fastcomments.com/js/widget-comment-count.min.js"></script>

3<div id="comment-count-live"></div>

4<script>

5 window.FastCommentsCommentCount(document.getElementById('comment-count-live'), {

6 tenantId: 'demo',

7 isLive: true

8 });

9</script>

10

Widget-Methoden

Das Widget gibt ein Objekt mit den folgenden Methoden zurueck:

• destroy(): Entfernt das Widget und bereinigt alle Timer
• update(config): Aktualisiert das Widget mit einer neuen Konfiguration

Beispielverwendung

Widget Methods Example

Copy Run

1

2<script src="https://cdn.fastcomments.com/js/widget-comment-count.min.js"></script>

3<div id="comment-count-methods"></div>

4<script>

5 const widget = window.FastCommentsCommentCount(document.getElementById('comment-count-methods'), {

6 tenantId: 'demo'

7 });

8

9 // Update the widget to show a different page's count

10 setTimeout(() => {

11 widget.update({

12 tenantId: 'demo',

13 urlId: 'different-page-id'

14 });

15 }, 5000);

16

17 // Destroy the widget after 10 seconds

18 setTimeout(() => {

19 widget.destroy();

20 }, 10000);

21</script>

22

Styling

Das Widget rendert einfaches HTML mit der Kommentaranzahl und kommt mit minimalem Styling. Sie koennen das Aussehen mit CSS anpassen:

Custom Styling

Copy Run

1

2<style>

3 .comment-count-styled {

4 background: #f0f0f0;

5 padding: 5px 10px;

6 border-radius: 15px;

7 font-size: 14px;

8 color: #666;

9 display: inline-block;

10 }

11</style>

12<script src="https://cdn.fastcomments.com/js/widget-comment-count.min.js"></script>

13<div id="comment-count-styled" class="comment-count-styled"></div>

14<script>

15 window.FastCommentsCommentCount(document.getElementById('comment-count-styled'), {

16 tenantId: 'demo'

17 });

18</script>

19

Das Bulk Comment Count Widget ist dafuer konzipiert, Kommentarzaehlungen fuer mehrere Seiten effizient auf derselben Seite anzuzeigen. Anstatt individuelle API-Aufrufe fuer jede Kommentarzaehlung zu machen, buendelt dieses Widget Anfragen fuer optimale Leistung.

Grundlegende Installation

Bulk Comment Count Widget Installation

Copy Run

1

2<script src="https://cdn.fastcomments.com/js/embed-widget-comment-count-bulk.min.js"></script>

3

4<!-- Multiple elements with comment counts -->

5<div class="fast-comments-count" data-fast-comments-url-id="page-1"></div>

6<div class="fast-comments-count" data-fast-comments-url-id="page-2"></div>

7<div class="fast-comments-count" data-fast-comments-url-id="page-3"></div>

8

9<script>

10 window.FastCommentsBulkCountConfig = {

11 tenantId: 'demo'

12 };

13</script>

14

Funktionsweise

Das Bulk-Widget funktioniert durch:

1. Scannen der Seite nach Elementen mit der Klasse fast-comments-count
2. Lesen des data-fast-comments-url-id Attributs von jedem Element
3. Buendeln von API-Anfragen, um mehrere Kommentarzaehlungen effizient abzurufen
4. Aktualisieren jedes Elements mit der entsprechenden Kommentarzaehlung

Konfigurationsoptionen

Die Funktion FastCommentsCommentCountBulk akzeptiert die folgenden Konfigurationsoptionen:

• tenantId (erforderlich): Ihre FastComments Tenant-ID
• apiHost (optional): Benutzerdefinierter API-Host, wenn Sie eine selbst gehostete Instanz verwenden

Praxisbeispiel

Hier ist ein praktisches Beispiel, das zeigt, wie Sie das Bulk-Widget in einer Blog-Beitragsliste verwenden koennten:

Blog Post Listing with Comment Counts

Copy Run

1

2<script src="https://cdn.fastcomments.com/js/embed-widget-comment-count-bulk.min.js"></script>

3

4<style>

5 .blog-post {

6 border: 1px solid #ddd;

7 margin: 10px 0;

8 padding: 15px;

9 border-radius: 5px;

10 }

11 .post-meta {

12 color: #666;

13 font-size: 14px;

14 margin-top: 10px;

15 }

16 .comment-count {

17 background: #e7f3ff;

18 padding: 2px 8px;

19 border-radius: 12px;

20 font-size: 12px;

21 display: inline-block;

22 }

23</style>

24

25<div class="blog-post">

26 <h3>How to Install FastComments</h3>

27 <p>Learn how to add FastComments to your website in just a few minutes...</p>

28 <div class="post-meta">

29 Published: March 15, 2024 |

30 <span class="fast-comments-count comment-count" data-fast-comments-url-id="how-to-install-fastcomments"></span>

31 </div>

32</div>

33

34<div class="blog-post">

35 <h3>Advanced FastComments Configuration</h3>

36 <p>Dive deep into the advanced configuration options for FastComments...</p>

37 <div class="post-meta">

38 Published: March 10, 2024 |

39 <span class="fast-comments-count comment-count" data-fast-comments-url-id="advanced-fastcomments-config"></span>

40 </div>

41</div>

42

43<div class="blog-post">

44 <h3>FastComments vs Other Solutions</h3>

45 <p>See how FastComments compares to other commenting solutions...</p>

46 <div class="post-meta">

47 Published: March 5, 2024 |

48 <span class="fast-comments-count comment-count" data-fast-comments-url-id="fastcomments-comparison"></span>

49 </div>

50</div>

51

52<script>

53 window.FastCommentsBulkCountConfig = {

54 tenantId: 'demo'

55 };

56</script>

57

Leistungsueberlegungen

Das Bulk-Widget optimiert automatisch die Leistung durch:

• Buendelung von Anfragen: Mehrere Kommentarzaehlungen werden in einem einzigen API-Aufruf abgerufen
• Anforderungsgroessenbeschraenkungen: Anfragen werden automatisch aufgeteilt, wenn die URL-Liste zu gross wird (ueber 1.000 Zeichen)
• Deduplizierung: Mehrere Elemente mit derselben data-fast-comments-url-id teilen dieselbe Zaehlung

Mehrere Elemente mit derselben URL-ID

Sie koennen mehrere Elemente auf der Seite mit derselben data-fast-comments-url-id haben. Sie werden alle mit derselben Zaehlung aktualisiert:

Multiple Elements Same URL ID

Copy Run

1

2<script src="https://cdn.fastcomments.com/js/embed-widget-comment-count-bulk.min.js"></script>

3

4<style>

5 .count-example {

6 margin: 10px 0;

7 padding: 10px;

8 background: #f9f9f9;

9 border-radius: 5px;

10 }

11</style>

12

13<div class="count-example">

14 Header Count: <span class="fast-comments-count" data-fast-comments-url-id="shared-article"></span>

15</div>

16

17<div class="count-example">

18 Sidebar Count: <span class="fast-comments-count" data-fast-comments-url-id="shared-article"></span>

19</div>

20

21<div class="count-example">

22 Footer Count: <span class="fast-comments-count" data-fast-comments-url-id="shared-article"></span>

23</div>

24

25<script>

26 window.FastCommentsBulkCountConfig = {

27 tenantId: 'demo'

28 };

29</script>

30

Lokalisierung

Das Bulk-Widget formatiert Kommentarzaehlungen automatisch basierend auf Ihren FastComments-Spracheinstellungen. Es bietet passenden Text fuer:

• Null Kommentare
• Einen Kommentar
• Mehrere Kommentare

Wann Bulk vs Single Widget verwenden

Verwenden Sie das Bulk Widget wenn:

• Sie mehrere Kommentarzaehlungen auf derselben Seite haben
• Sie eine Liste von Beitraegen/Artikeln mit Kommentarzaehlungen anzeigen
• Leistung wichtig ist (reduziert API-Aufrufe)

Verwenden Sie das Single Widget wenn:

• Sie nur eine Kommentarzaehlung auf der Seite benoetigen
• Sie Live-Updates benoetigen (das Single-Widget unterstuetzt Echtzeit-Updates)
• Sie mehr Kontrolle ueber das individuelle Widget-Verhalten wuenschen