O Widget de Contagem de Comentarios e projetado para exibir a contagem de comentarios de uma unica pagina. E leve e fornece atualizacoes em tempo real se configurado.

Instalacao Basica

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

Opcoes de Configuracao

A funcao FastCommentsCommentCount aceita as seguintes opcoes de configuracao:

• tenantId (obrigatorio): Seu ID de tenant do FastComments
• urlId (opcional): O identificador da pagina. Padrao e window.location.href se nao especificado
• numberOnly (opcional): Se true, exibe apenas o numero sem texto. Padrao e false
• isLive (opcional): Se true, a contagem sera atualizada automaticamente. Padrao e false

Exemplos Avancados

URL ID Personalizado

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

Exibicao Apenas do Numero

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

Atualizacoes ao Vivo

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

Metodos do Widget

O widget retorna um objeto com os seguintes metodos:

• destroy(): Remove o widget e limpa todos os temporizadores
• update(config): Atualiza o widget com uma nova configuracao

Exemplo de Uso

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

Estilizacao

O widget renderiza HTML simples com a contagem de comentarios e vem com estilizacao minima. Voce pode personalizar a aparencia com CSS:

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

O Widget de Contagem de Comentarios em Massa e projetado para exibir eficientemente contagens de comentarios para multiplas paginas na mesma pagina. Em vez de fazer chamadas de API individuais para cada contagem de comentarios, este widget agrupa as solicitacoes para desempenho otimo.

Instalacao Basica

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

Como Funciona

O widget em massa funciona:

1. Escaneando a pagina por elementos com a classe fast-comments-count
2. Lendo o atributo data-fast-comments-url-id de cada elemento
3. Agrupando solicitacoes de API para buscar multiplas contagens de comentarios eficientemente
4. Atualizando cada elemento com a contagem de comentarios apropriada

Opcoes de Configuracao

A funcao FastCommentsCommentCountBulk aceita as seguintes opcoes de configuracao:

• tenantId (obrigatorio): Seu ID de tenant do FastComments
• apiHost (opcional): Host de API personalizado se voce estiver usando uma instancia auto-hospedada

Exemplo do Mundo Real

Aqui esta um exemplo pratico mostrando como voce pode usar o widget em massa em uma listagem de posts de blog:

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

Consideracoes de Desempenho

O widget em massa otimiza automaticamente o desempenho atraves de:

• Agrupamento de solicitacoes: Multiplas contagens de comentarios sao buscadas em uma unica chamada de API
• Limites de tamanho de solicitacao: Solicitacoes sao automaticamente divididas se a lista de URLs ficar muito grande (mais de 1.000 caracteres)
• Deduplicacao: Multiplos elementos com o mesmo data-fast-comments-url-id compartilham a mesma contagem

Multiplos Elementos com o Mesmo URL ID

Voce pode ter multiplos elementos na pagina com o mesmo data-fast-comments-url-id. Todos serao atualizados com a mesma contagem:

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

Localizacao

O widget em massa formata automaticamente contagens de comentarios com base nas suas configuracoes de idioma do FastComments. Ele fornece texto apropriado para:

• Zero comentarios
• Um comentario
• Multiplos comentarios

Quando Usar o Widget em Massa vs Individual

Use o Widget em Massa quando:

• Voce tem multiplas contagens de comentarios na mesma pagina
• Voce esta exibindo uma lista de posts/artigos com contagens de comentarios
• O desempenho e importante (reduz chamadas de API)

Use o Widget Individual quando:

• Voce precisa de apenas uma contagem de comentarios na pagina
• Voce precisa de atualizacoes ao vivo (o widget individual suporta atualizacoes em tempo real)
• Voce quer mais controle sobre o comportamento individual do widget