El Widget de Conteo de Comentarios esta disenado para mostrar el conteo de comentarios de una sola pagina. Es liviano y proporciona actualizaciones en tiempo real si se configura.

Instalacion 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

Opciones de Configuracion

La funcion FastCommentsCommentCount acepta las siguientes opciones de configuracion:

• tenantId (requerido): Tu ID de tenant de FastComments
• urlId (opcional): El identificador de la pagina. Por defecto es window.location.href si no se especifica
• numberOnly (opcional): Si es true, solo muestra el numero sin texto. Por defecto es false
• isLive (opcional): Si es true, el conteo se actualizara automaticamente. Por defecto es false

Ejemplos Avanzados

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

Mostrar Solo 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

Actualizaciones en 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 del Widget

El widget devuelve un objeto con los siguientes metodos:

• destroy(): Elimina el widget y limpia todos los temporizadores
• update(config): Actualiza el widget con una nueva configuracion

Ejemplo 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

Estilos

El widget renderiza HTML simple con el conteo de comentarios y viene con estilos minimos. Puedes personalizar la apariencia con 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

El Widget de Conteo Masivo de Comentarios esta disenado para mostrar eficientemente los conteos de comentarios de multiples paginas en la misma pagina. En lugar de realizar llamadas API individuales para cada conteo de comentarios, este widget agrupa las solicitudes para un rendimiento optimo.

Instalacion 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

El widget masivo funciona mediante:

1. Escanear la pagina en busca de elementos con la clase fast-comments-count
2. Leer el atributo data-fast-comments-url-id de cada elemento
3. Agrupar solicitudes API para obtener multiples conteos de comentarios eficientemente
4. Actualizar cada elemento con el conteo de comentarios apropiado

Opciones de Configuracion

La funcion FastCommentsCommentCountBulk acepta las siguientes opciones de configuracion:

• tenantId (requerido): Tu ID de tenant de FastComments
• apiHost (opcional): Host API personalizado si estas usando una instancia auto-alojada

Ejemplo del Mundo Real

Aqui hay un ejemplo practico que muestra como podrias usar el widget masivo en un listado de publicaciones 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

Consideraciones de Rendimiento

El widget masivo optimiza automaticamente el rendimiento mediante:

• Agrupacion de solicitudes: Multiples conteos de comentarios se obtienen en una sola llamada API
• Limites de tamano de solicitud: Las solicitudes se dividen automaticamente si la lista de URLs se vuelve demasiado grande (mas de 1,000 caracteres)
• Deduplicacion: Multiples elementos con el mismo data-fast-comments-url-id comparten el mismo conteo

Multiples Elementos con el Mismo URL ID

Puedes tener multiples elementos en la pagina con el mismo data-fast-comments-url-id. Todos seran actualizados con el mismo conteo:

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

Localizacion

El widget masivo formatea automaticamente los conteos de comentarios segun tu configuracion de idioma de FastComments. Proporciona texto apropiado para:

• Cero comentarios
• Un comentario
• Multiples comentarios

Cuando Usar el Widget Masivo vs Individual

Usa el Widget Masivo cuando:

• Tienes multiples conteos de comentarios en la misma pagina
• Estas mostrando una lista de publicaciones/articulos con conteos de comentarios
• El rendimiento es importante (reduce las llamadas API)

Usa el Widget Individual cuando:

• Solo necesitas un conteo de comentarios en la pagina
• Necesitas actualizaciones en vivo (el widget individual soporta actualizaciones en tiempo real)
• Quieres mas control sobre el comportamiento individual del widget