Sistema de Comentarios Blogger
Sistema de Comentarios Personalizable en NichoClean v2.0: Blogger y Disqus
Una de las claves para aumentar la interacción en tu blog es contar con un sistema de comentarios atractivo y funcional. En la plantilla premium NichoClean v2.0 hemos integrado un sistema inteligente que te permite elegir entre dos opciones: el comentario nativo de Blogger, totalmente rediseñado con un estilo moderno y minimalista, o la integración directa con Disqus, una de las plataformas más usadas a nivel mundial.
¿Por qué este sistema de comentarios es diferente?
- Flexibilidad total: Cambia fácilmente entre Blogger y Disqus desde un simple marcador HTML.
- Estilo optimizado: El sistema nativo de Blogger recibe un rediseño premium con tipografía clara, avatares redondeados y diseño responsivo.
- Experiencia fluida: Todo está preparado para integrarse con el estilo visual de tu plantilla, sin scripts extra innecesarios.
- SEO on-page optimizado: Al mantener los comentarios nativos de Blogger, ayudas a mejorar la indexación del contenido generado por usuarios.
Ventajas de Blogger vs Disqus
Comentarios de Blogger (nativos)
Perfectos si deseas que tus comentarios sean rastreados por Google, lo que contribuye al SEO. Además, se almacenan directamente en tu cuenta de Blogger, sin depender de terceros.
Comentarios con Disqus
La mejor opción si quieres aprovechar una comunidad más amplia, notificaciones en tiempo real, integración con redes sociales y un sistema antispam robusto.
Instalación paso a paso
1. Agregar el marcador de comentarios en la plantilla
Para que el sistema de comentarios funcione correctamente debes insertar el marcador en el lugar exacto donde Blogger carga los comentarios. Esto se hace dentro del widget id='Blog1', en el <b:includable id='main'>.
Ubica la siguiente parte del código en tu plantilla (ejemplo exclusivo de NichoCelan V2.0):
<b:widget id='Blog1' locked='true' title='Entradas del blog' type='Blog' version='2' visible='true'>
<b:includable id='main'>
<!-- CASO CONTARIOS ES UNA ENTRADA -->
<b:elseif cond='data:view.isPost'/>
<b:loop values='data:posts' var='post'>
<b:include data='post' name='post'/><!-- Include posts -->
<!-- 🔽 Aquí debes pegar el marcador de comentarios -->
</b:loop>
</b:includable>
Justo después de la línea <b:include data='post' name='post'/>, y antes de cerrar el </b:loop>, pega este bloque:
<div id='comentarios-default'/> <!-- JS Comentario NichoClean -->
<!-- Contenedor de Blogger -->
<div id='comentarios-blogger' style='display:none;'>
<b:include data='post' name='commentPicker'/>
</div>
De esta manera, la caja de comentarios se mostrará debajo de cada entrada en la vista individual del post, que es la ubicación correcta para que Blogger cargue los comentarios o, en su defecto, el sistema Disqus.
Cómo funciona el marcador de comentarios
1. <div id='comentarios-default'/>
Es un contenedor vacío que funciona como el “espacio reservado” donde el JavaScript inyectará el sistema de comentarios según la configuración que hayas elegido (Blogger o Disqus).
Piensa en este div como una caja vacía que el script va a rellenar con el bloque de comentarios que corresponda.
2. <div id='comentarios-blogger' style='display:none;'>
Contiene el sistema de comentarios nativo de Blogger (commentPicker), pero inicialmente está oculto con display:none;.
Esto se hace porque no se debe mostrar directamente en la plantilla, sino que el JavaScript se encargará de “moverlo” y aplicarle los estilos premium.
3. <b:include data='post' name='commentPicker'/>
Es la instrucción de Blogger que inserta la caja de comentarios nativa (formulario + lista de comentarios).
En estado normal, si lo pusieras sin el JS, este código mostraría los comentarios básicos de Blogger.
Pero en este sistema, queda encapsulado dentro del div#comentarios-blogger para que el JS pueda controlarlo.
2. Agregar el gadget de configuración
En tu plantilla ubica el lugar donde quieres poner el gadget HTML para administrar los comentarios:
- Ve a Blogger → Diseño (Layout).
- Añade un gadget tipo HTML/JavaScript.
- Pega el siguiente bloque de código y guarda.
- Recomendado: ponlo en el footer o al final de la plantilla (antes de
</body>).
<div id="comentarios-config"
data-sistema="blogger"
data-disqus-shortname="TU_SHORTNAME">
</div>
<!-- Gadget HTML de configuración Cambia data-sistema a "blogger" o "disqus". Cambia data-disqus-shortname por tu shortname de Disqus. -->
Cómo funciona el Gadget de configuración
Este bloque es el centro de control de tu sistema de comentarios.
A través de sus atributos data-*, el JavaScript sabe qué sistema activar y cómo configurarlo.
1. id="comentarios-config"
El identificador único del gadget. El script lo busca en el DOM para leer sus valores y decidir qué hacer.
2. data-sistema="blogger"
Define el sistema de comentarios que se usará:
- blogger: activa los comentarios nativos de Blogger.
- disqus: carga el sistema de comentarios de Disqus.
Basta con cambiar el valor según lo que quieras usar.
3. data-disqus-shortname="TU_SHORTNAME"
Este atributo solo es relevante si usas Disqus.
El “shortname” es el identificador único de tu sitio en Disqus (por ejemplo: midominio-blog).
Si el sistema activo es Blogger, este valor simplemente se ignora.
3. Insertar el JavaScript del selector de comentarios
Este script detecta automáticamente el sistema que has configurado (Blogger o Disqus) y muestra el bloque correspondiente con estilos uniformes.
<!-- 22. Js Selector Comentarios Blogger - Disqus -->
<script>
//<![CDATA[
(function(){
const config = document.getElementById("comentarios-config");
const sistemaComentarios = config?.getAttribute("data-sistema") || "blogger";
const disqusShortname = config?.getAttribute("data-disqus-shortname") || "";
const contenedorDefault = document.getElementById("comentarios-default");
if (!contenedorDefault) return;
// =============================
// Detección de si hay comentarios permitidos
// =============================
const bloggerDiv = document.getElementById("comentarios-blogger");
const allowComments = bloggerDiv && (
bloggerDiv.querySelector(".comment-form") ||
bloggerDiv.querySelector(".comment-thread")
);
if (!allowComments) {
// Si no hay comentarios habilitados, no mostramos nada
return;
}
// =============================
// Estilos base
// =============================
const estilosBase = `
max-width:850px;
margin:0 auto;
padding:15px;
box-sizing:border-box;
background:#fff;
border:1px solid #e2e8f0;
border-radius:8px;
`;
// =============================
// Mostrar según sistema
// =============================
if (sistemaComentarios === "blogger") {
if (bloggerDiv) {
bloggerDiv.style.display = "block";
bloggerDiv.style.cssText += estilosBase;
contenedorDefault.appendChild(bloggerDiv);
}
} else if (sistemaComentarios === "disqus" && disqusShortname) {
const disqusDiv = document.createElement("div");
disqusDiv.id = "comentarios-disqus";
disqusDiv.style.cssText = estilosBase;
disqusDiv.innerHTML = "<div id='disqus_thread'></div>";
contenedorDefault.appendChild(disqusDiv);
var disqus_config = function () {
this.page.url = window.location.href;
this.page.identifier = window.location.pathname;
};
if (!window.DISQUS) {
(function() {
var d = document, s = d.createElement('script');
s.src = `https://${disqusShortname}.disqus.com/embed.js`;
s.setAttribute('data-timestamp', +new Date());
(d.head || d.body).appendChild(s);
})();
} else {
DISQUS.reset({ reload: true });
}
}
})();
//]]>
</script>
4. Activar los estilos de los comentarios
Si utilizas el sistema nativo de Blogger, añade el siguiente CSS para aplicar el estilo premium NichoClean v2.0:
<style>.comments .continue,.comments .loadmore,.item-control,.thread-chrome.thread-collapsed,.thread-count{display:none!important}.comment-thread li,.comment-thread ol,.comments-content{list-style:none;margin:0;padding:0}li.comment{display:block;margin-top:1.5rem;padding:1rem 1.2rem;border-radius:1rem;background-color:#fff;border:1px solid #cbd5e1;box-shadow:0 1px 2px rgba(0,0,0,.03);position:relative}.comment-replies li.comment{background-color:#f7f7f7;border:1px solid #e0e0e0}.avatar-image-container{width:48px;height:48px;border-radius:50%;overflow:hidden;background:#ddd;float:left;margin-right:1rem}.avatar-image-container img{width:100%;height:100%;object-fit:cover}.avatar-image-container img[src*="anon36.png"],.avatar-image-container img[src*="b36-rounded.png"]{opacity:0}.comment-block{overflow:hidden}.comment-header{font-size:.95rem;font-weight:600;color:#1f2937;margin-bottom:.3rem}.comment-header .datetime{font-size:.8rem;color:#888;margin-left:.5rem}.comment-content{font-size:1rem;line-height:1.6;color:#444;margin-top:.5rem}.comment-footer{margin-top:.8rem}.comment-reply{appearance:none;background-color:#e5e7eb;color:#4b5563;padding:.4rem .9rem;border:1px solid #d1d5db;border-radius:6px;text-decoration:none;display:inline-block;font-size:.85rem;font-weight:500;cursor:pointer;transition:.2s}#comment-post-message::before,.comments .title::after{content:"";display:block;width:100px;height:3px;background:linear-gradient(90deg,#3b82f6,#60a5fa);border-radius:2px;box-shadow:0 2px 6px rgba(59,130,246,.3)}.comment-reply:hover{background-color:#d1d5db;color:#374151;border-color:#cbd5e1}#comment-post-message,.comments .title{color:#1f2937;position:relative;text-shadow:0 1px 2px rgba(0,0,0,.05)}.comment-content a,.comment-header a{color:#4b5563;text-decoration:underline;transition:color .2s}.comment-content a:hover,.comment-header a:hover{color:#374151}.comment-replies{margin-top:1.2rem;display:flex;flex-direction:column;gap:1rem;padding-left:0}.comment-replybox-single,.comment-replybox-thread{margin-top:1rem}.comments .comments-replybox{width:100%;height:250px}.comments{max-width:960px;margin:0 auto;padding:0 1.5rem;box-sizing:border-box;width:100%}@media (max-width:600px){.avatar-image-container{float:none;margin:0 auto .5rem}.comment-block,.comment-footer{text-align:center}.comment-header{justify-content:center}.comments{padding:0}}.comments .title{display:flex;align-items:center;gap:.5rem;font-size:1.8rem;font-weight:700;margin-top:1rem;margin-bottom:1rem;padding-bottom:.5rem;letter-spacing:.03em}.comments .title::after{position:absolute;bottom:0;left:0}.comments .comment-count{font-weight:400;font-size:1.6rem;color:#4b5563;transition:color .3s}.comments .comment-count:hover{color:#3b82f6}#comment-post-message{font-size:1.4rem;font-weight:600;margin:2rem 0 .5rem;padding-top:1rem;text-align:left}#comment-post-message::before{margin-bottom:.75rem}.comments .comment-form,.comments .comments-replybox{background-color:#f9fafb;border:1px solid #e5e7eb;border-radius:8px;padding:1rem 1.5rem;box-shadow:0 2px 8px rgba(0,0,0,.05);transition:box-shadow .3s}.comments .comment-form:focus-within,.comments .comments-replybox:focus-within{box-shadow:0 4px 16px rgba(59,130,246,.3);border-color:#3b82f6}.sin-comentarios{color:#6b7280;font-style:italic;font-weight:300;padding:1.5rem;text-align:center;font-size:1.3rem}</style>Recomendaciones importantes
- Si eliges Blogger, recuerda habilitar los comentarios en la configuración de entradas de tu blog.
- Si usas Disqus, asegúrate de reemplazar
TU_SHORTNAMEpor tu identificador de Disqus. - No combines ambos sistemas a la vez: selecciona solo uno para evitar duplicados.
- En móvil, prueba siempre el diseño. NichoClean v2.0 es responsive, pero es buena práctica verificar cómo se ve en pantallas pequeñas.
Con el Sistema de Comentarios Personalizable de NichoClean v2.0 tienes el control total: puedes apostar por el SEO y la simplicidad de Blogger o por la comunidad global y las funciones avanzadas de Disqus. La integración es rápida, sin complicaciones técnicas, y con un diseño que realza la profesionalidad de tu blog.
Aún no hay comentarios, sé el primero en comentar.
Publicar un comentario