Widget za brojanje komentara dizajniran je za prikaz broja komentara pojedinacne stranice. Lagan je i pruza azuriranja u stvarnom vremenu ako je konfigurirano.

Osnovna instalacija

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

Opcije konfiguracije

Funkcija FastCommentsCommentCount prihvaca sljedece opcije konfiguracije:

• tenantId (obavezno): Vas FastComments tenant ID
• urlId (opcijski): Identifikator stranice. Zadana vrijednost je window.location.href ako nije navedeno
• numberOnly (opcijski): Ako je true, prikazuje samo broj bez teksta. Zadano je false
• isLive (opcijski): Ako je true, broj ce se automatski azurirati. Zadano je false

Napredni primjeri

Prilagodeni 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

Prikaz samo broja

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

Azuriranja uzivo

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

Metode widgeta

Widget vraca objekt sa sljedecim metodama:

• destroy(): Uklanja widget i cisti sve timere
• update(config): Azurira widget s novom konfiguracijom

Primjer uporabe

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

Stiliziranje

Widget prikazuje obican HTML s brojem komentara i dolazi s minimalnim stiliziranjem. Mozete prilagoditi izgled pomocu CSS-a:

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

Widget za masovno brojanje komentara dizajniran je za ucinkovito prikazivanje brojeva komentara za vise stranica na istoj stranici. Umjesto pojedinacnih API poziva za svaki broj komentara, ovaj widget grupira zahtjeve za optimalnu izvedbu.

Osnovna instalacija

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

Kako funkcionira

Masovni widget funkcionira tako da:

1. Skenira stranicu za elemente s klasom fast-comments-count
2. Cita atribut data-fast-comments-url-id iz svakog elementa
3. Grupira API zahtjeve za ucinkovito dohvacanje vise brojeva komentara
4. Azurira svaki element s odgovarajucim brojem komentara

Opcije konfiguracije

Funkcija FastCommentsCommentCountBulk prihvaca sljedece opcije konfiguracije:

• tenantId (obavezno): Vas FastComments tenant ID
• apiHost (opcijski): Prilagodeni API host ako koristite vlastitu instancu

Primjer iz stvarnog svijeta

Evo prakticnog primjera koji pokazuje kako mozete koristiti masovni widget u popisu blog postova:

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

Razmatranja o izvedbi

Masovni widget automatski optimizira izvedbu pomocu:

• Grupiranja zahtjeva: Vise brojeva komentara dohvaca se u jednom API pozivu
• Ogranicenja velicine zahtjeva: Zahtjevi se automatski dijele ako popis URL-ova postane prevelik (preko 1.000 znakova)
• Deduplikacije: Vise elemenata s istim data-fast-comments-url-id dijeli isti broj

Vise elemenata s istim URL ID-om

Mozete imati vise elemenata na stranici s istim data-fast-comments-url-id. Svi ce biti azurirani s istim brojem:

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

Lokalizacija

Masovni widget automatski formatira brojeve komentara na temelju vasih FastComments jezicnih postavki. Pruza odgovarajuci tekst za:

• Nula komentara
• Jedan komentar
• Vise komentara

Kada koristiti masovni widget naspram pojedinacnog

Koristite masovni widget kada:

• Imate vise brojeva komentara na istoj stranici
• Prikazujete popis postova/clanaka s brojevima komentara
• Izvedba je vazna (smanjuje API pozive)

Koristite pojedinacni widget kada:

• Trebate samo jedan broj komentara na stranici
• Trebate azuriranja uzivo (pojedinacni widget podrzava azuriranja u stvarnom vremenu)
• Zelite vise kontrole nad ponasanjem pojedinacnog widgeta