JS Contador de comentarios

En este tutorial te enseñaremos cómo funciona y cómo activar el contador de comentarios en la miga del post de la plantilla NichoClean v2.0. Este pequeño script JavaScript permite mostrar automáticamente el número de comentarios de cada entrada, adaptándose tanto a Blogger como a Disqus, sin necesidad de modificar el HTML del sistema de comentarios. Ideal para quienes buscan una plantilla profesional, optimizada para SEO y con una experiencia de usuario completa.

¿Qué hace este contador de comentarios?

El contador de comentarios se encarga de detectar el sistema de comentarios activo (Blogger o Disqus) y mostrar el número de comentarios correspondiente justo en la miga de pan (breadcrumb o encabezado del post). Además, oculta automáticamente el contador del sistema que no se esté utilizando, para evitar duplicados o errores visuales.

Esto permite mantener la coherencia del diseño y mejorar la interacción visual con los lectores, mostrando datos actualizados sobre la participación del artículo sin recargar la interfaz.

Ventajas del sistema

  • Automático: Detecta si el blog usa comentarios de Blogger o Disqus.
  • Ligero: No afecta el rendimiento ni el tiempo de carga del sitio.
  • SEO Friendly: Mejora la estructura informativa al mostrar actividad en los posts.
  • Diseño integrado: Se adapta perfectamente al estilo minimalista de NichoClean v2.0.

Cómo activar el contador de comentarios

Este script ya está incluido en la plantilla NichoClean v2.0. Solo necesitas asegurarte de que tu plantilla tenga el bloque de configuración del sistema de comentarios y el contenedor visible donde aparecerá el contador.

1. Verifica la configuración del sistema de comentarios

En el HTML de tu plantilla, busca el siguiente bloque o agrégalo antes del cierre de </body> si no lo tienes: sistema de comentarios

<div id='comentarios-config' 
     data-sistema='blogger' 
     data-disqus-shortname='tusitio-disqus'></div>

👉 data-sistema puede ser “blogger” o “disqus”, según el sistema que uses. Si usas Disqus, reemplaza tusitio-disqus por el shortname de tu cuenta de Disqus.

2. Agrega el bloque de información de comentarios

En la zona donde se muestra la miga o encabezado del post (normalmente dentro del article o .post-meta), agrega este bloque HTML:

<div class='comments-info' style='display:none'>
  <a class='link-blogger' href='<data:post.url/>#comments'>
    <span class='num-comments'><data:post.numComments/></span> comentarios
  </a>
  <a class='link-disqus' href='<data:post.url/>#disqus_thread'>
    Comentarios en Disqus
  </a>
</div>

<div id='comentarios-placeholder'>Cargando comentarios...</div>

El placeholder se oculta automáticamente cuando el script termina de cargar.

3. Inserta el script del contador

Finalmente, agrega el siguiente código justo antes del cierre de </body>:

<!-- 25. Js Contador comentarios en miga post -->
<script>//<![CDATA[
document.addEventListener('DOMContentLoaded', function () {
  var cfg = document.getElementById('comentarios-config');
  var sistema = cfg ? (cfg.getAttribute('data-sistema') || '').toLowerCase() : 'blogger';
  var shortname = cfg ? (cfg.getAttribute('data-disqus-shortname') || '') : '';

  var placeholder = document.getElementById('comentarios-placeholder');
  var container = document.querySelector('.comments-info');
  var linkB = container ? container.querySelector('.link-blogger') : null;
  var linkD = container ? container.querySelector('.link-disqus') : null;

  // Oculta placeholder y muestra el bloque de comentarios
  if (placeholder) placeholder.style.display = 'none';
  if (container) container.style.display = '';

  if (sistema === 'disqus') {
    if (linkB) linkB.style.display = 'none';
    if (linkD) linkD.style.display = ''; // mostrar Disqus

    // Inyectar count.js solo si no está
    if (shortname && !document.getElementById('dsq-count-scr')) {
      var s = document.createElement('script');
      s.id = 'dsq-count-scr';
      s.async = true;
      s.src = '//' + shortname + '.disqus.com/count.js';
      document.body.appendChild(s);
    }
  } else {
    // Blogger por defecto
    if (linkD) linkD.style.display = 'none';
    if (linkB) linkB.style.display = ''; // mostrar Blogger
  }
});
//]]></script>

Recomendaciones y buenas prácticas

  • Si cambias de sistema de comentarios, recuerda actualizar data-sistema y el shortname de Disqus.
  • No dupliques el script, ya que podría causar conflictos o duplicar los contadores.
  • Este script está diseñado para trabajar con la estructura HTML original de NichoClean v2.0. Si usas una versión modificada, verifica que las clases coincidan.
  • Evita cargar Disqus innecesariamente en todas las páginas para optimizar el rendimiento.

Conclusión

El JS Contador de comentarios en la miga del post es una función ligera pero potente de NichoClean v2.0. Ofrece una presentación limpia, profesional y adaptable, mejorando la experiencia del lector y mostrando de forma visual la interacción en cada publicación. Con su detección automática entre Blogger y Disqus, mantiene tu plantilla libre de código redundante y 100% optimizada.

Consejo final: mantener un contador visible de comentarios incrementa la participación y hace que tu contenido luzca más activo y confiable ante Google y tus visitantes.