Cómo mostrar los Últimos Comentarios en Blogger
Plugin Últimos Comentarios: Cómo mostrar los comentarios recientes en Blogger
El Plugin Últimos Comentarios de NichoClean v2.0 permite mostrar en tu blog los comentarios más recientes publicados tanto en el sistema nativo de Blogger como en Disqus. Esta función es ideal para aumentar la interacción, mejorar la visibilidad del contenido y ofrecer a los lectores un acceso rápido a las últimas conversaciones de tu sitio.
¿Qué hace el plugin de comentarios recientes?
Este widget dinámico recoge los últimos comentarios publicados en tu blog y los presenta en un listado optimizado, con avatar, autor, fragmento del comentario, fecha y enlace directo a la entrada correspondiente. Todo con un diseño minimalista, responsive y perfectamente integrado en el estilo de la plantilla NichoClean.
Ventajas de usar este sistema
- Compatible con Blogger, Disqus o ambos sistemas a la vez.
- Diseño responsive adaptado a móviles, tablets y escritorio.
- Opción para truncar el contenido y mantener un estilo limpio.
- Botón Cargar más para mostrar comentarios adicionales.
- Optimizado para SEO gracias al contenido dinámico y actualizado.
Cómo implementar el plugin en NichoClean v2.0
Para instalar el Plugin Últimos Comentarios en tu blog con NichoClean v2.0, sigue estos pasos:
1. Inserta el HTML de configuración en un Gadget HTML de tu blog
<!-- Gadget fijo: configuración Últimos comentarios -->
<div id="config-recent-comments"
data-blogger-limit="5"
data-disqus-limit="5"
data-disqus-shortname="tu-shortname-disqus"
data-disqus-api-key="XXXXXXXXXX"
data-title="Últimos comentarios"
data-sistema="both"
data-truncate="80"
data-cache="600000"
hidden>
</div>
<!-- Gadget para mostrar los últimos comentarios
Atributos importantes:
- data-blogger-limit / data-disqus-limit → # de comentarios a mostrar
- data-disqus-shortname / data-disqus-api-key → para comentarios Disqus
- data-title → título de la sección
- data-sistema → "blogger", "disqus" o "both"
- data-truncate → longitud máxima de comentario
- data-cache → tiempo de caché en ms
El gadget se mantiene hidden y se activa vía JS del plugin. -->
Aquí puedes personalizar los atributos data-* para ajustar el número de comentarios,
el título del widget, el sistema de comentarios a usar (Blogger, Disqus o ambos) y la longitud del texto mostrado.
2. Configuración del Plugin de Últimos Comentarios
El plugin de Últimos Comentarios en NichoClean v2.0 funciona a través de atributos data-* que puedes personalizar directamente en el bloque HTML. A continuación te explicamos cada uno:
1. data-blogger-limit="5"
Define el número máximo de comentarios que se mostrarán si usas el sistema de comentarios de Blogger.
Ejemplo: data-blogger-limit="5" mostrará los 5 comentarios más recientes.
2. data-disqus-limit="5"
Indica la cantidad de comentarios a recuperar desde Disqus.
Ejemplo: data-disqus-limit="5" traerá los 5 últimos comentarios de tu comunidad en Disqus.
3. data-disqus-shortname="tu-shortname"
Es el identificador único de tu sitio en Disqus. Lo obtienes al registrar tu blog en Disqus.
Ejemplo: data-disqus-shortname="midominio".
4. data-disqus-api-key="XXXX"
Corresponde a tu API Key personal de Disqus. Esta clave es necesaria para que el plugin pueda consultar los últimos comentarios directamente desde la API de Disqus.
¿Cómo obtener tu API Key de Disqus?
- Accede a la página oficial de Disqus API Applications.
- Inicia sesión con tu cuenta de Disqus (la misma con la que administras tu comunidad).
- Haz clic en "Register a new application" para crear una aplicación nueva.
- Asigna un nombre a tu aplicación (ejemplo:
UltimosComentariosBlog). - En el campo Website, coloca la URL de tu blog.
- Guarda los cambios y entra al panel de tu aplicación recién creada.
- Dentro verás la sección API Key, copia el valor de Public Key (no necesitas la Secret Key).
- Pega ese valor en tu shortcode como:
data-disqus-api-key="abcd1234".
Con esta clave, el widget podrá conectarse a tu cuenta de Disqus y mostrar los comentarios más recientes en tu blog.
5. data-title="Últimos comentarios"
Es el título visible que aparecerá en la parte superior del widget. Puedes cambiarlo por cualquier texto.
Ejemplo: data-title="Comentarios recientes".
6. data-sistema="both" Define qué sistema de comentarios se usará. Tiene tres opciones:
blogger: solo muestra comentarios de Blogger.disqus: solo muestra comentarios de Disqus.both: combina comentarios de ambos sistemas en un mismo bloque.
7. data-truncate="80"
Establece el máximo de caracteres a mostrar del texto de cada comentario antes de truncarlo.
Ejemplo: data-truncate="80" mostrará hasta 80 caracteres y añadirá puntos suspensivos si el comentario es más largo.
8. data-cache="600000" Define el tiempo de duración de la cache en milisegundos para los comentarios recientes antes de que se haga una nueva petición al feed o a la API de Disqus.
- Ejemplo:
data-cache="600000"→ 600.000 ms (10 minutos).
Cómo funciona:
- Durante este lapso, el plugin reutiliza los datos almacenados en
localStorage, evitando hacer nuevas llamadas y reduciendo la carga del blog y de las APIs externas. - Una vez pasado este tiempo, la cache se considera vencida, y en la siguiente carga de la página se realizará un fetch real para actualizar los comentarios.
Valores recomendados:
600000→ 10 minutos (valor por defecto).1200000→ 20 minutos (más relajado, útil si tu blog no recibe comentarios muy seguido).1800000→ 30 minutos.- Puedes usar cualquier número en milisegundos según tus necesidades.
Nota: El valor se toma dinámicamente del gadget al cargar la página, por lo que basta con cambiar el atributo en el HTML para modificar la duración de la cache sin tocar el JavaScript.
Con esta configuración, puedes adaptar el plugin a tu preferencia: número de comentarios, fuente de datos, API y hasta la longitud de los textos mostrados.
Resultado del Plugin.
3. Agrega el Marcador o Shortcode
Copia y pega este marcador donde quieras que se muestren los últimos comentarios, ya sea un gadget HTML, en una entrada, página estatica e inclusive en el mismo HTML de la plantilla:
<!-- Marcador: aquí se insertará el widget de comentarios -->
<div class="recent-comments-marker"></div>4. Agrega el script JavaScript
Copia este código al final de tu plantilla o dentro de un gadget HTML/JavaScript para que el widget funcione:
<!-- 24. Js Últimos comentarios -->
<script>
//<![CDATA[
const fetchRecentCommentsCache = (() => {
let CACHE_DURATION_MS = 10 * 60 * 1000;
return {
setDuration(ms){ CACHE_DURATION_MS = ms; },
async fetch(url){
const cacheKey = 'recent_comments_' + url;
try{
const cached = localStorage.getItem(cacheKey);
if(cached){
const obj = JSON.parse(cached);
if(Date.now() - obj.timestamp < CACHE_DURATION_MS) return obj.data;
}
} catch(e){ console.warn("Cache parse error", e); }
const res = await fetch(url);
const data = await res.json();
try{
localStorage.setItem(cacheKey, JSON.stringify({timestamp:Date.now(),data}));
} catch(e){ console.warn("Cache save error", e); }
return data;
}
};
})();
(async function(){
const config = document.getElementById("config-recent-comments");
if(!config) return;
const bloggerLimit = parseInt(config.dataset.bloggerLimit) || 5;
const disqusLimit = parseInt(config.dataset.disqusLimit) || 5;
const disqusShort = config.dataset.disqusShortname;
const disqusKey = config.dataset.disqusApiKey;
const title = config.dataset.title || 'Comentarios recientes';
const system = config.dataset.sistema || 'both';
const truncateLen = parseInt(config.dataset.truncate) || 80;
const cacheMs = parseInt(config.dataset.cache) || 600000;
fetchRecentCommentsCache.setDuration(cacheMs);
const css = `
.recent-comments-widget { font-family: system-ui,sans-serif; max-width:850px;width:95%;margin:auto; }
.recent-comments-widget h3 { font-size:18px;margin:0 0 10px;border-bottom:1px solid #ddd;padding-bottom:5px; }
.recent-comments-list { list-style:none;margin:0;padding:0; }
.recent-comments-list li { display:flex;gap:10px;padding:10px 0;border-bottom:1px solid #eee; }
.recent-comments-list img { width:40px;height:40px;border-radius:50%;object-fit:cover; }
.recent-comments-list div { flex:1; }
.recent-comments-list p {
margin:4px 0 0;font-size:14px;color:#444;line-height:1.4;
display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
overflow:hidden;text-overflow:ellipsis;word-wrap:break-word;
}
.recent-comments-list small { color:#999;font-size:12px;display:block; }
.load-more-comments { display:block;text-align:center;margin:10px auto;font-size:14px;color:#0073aa;text-decoration:none; cursor:pointer; }
.load-more-comments:hover { text-decoration:underline; }
.no-comments, .error-comments { text-align:center;color:#666;padding:10px 0; }
`;
if(!document.getElementById("recent-comments-style")){
const styleTag = document.createElement('style');
styleTag.id = "recent-comments-style";
styleTag.textContent = css;
document.head.appendChild(styleTag);
}
function formatDate(dateStr){
const d = new Date(dateStr);
return new Intl.DateTimeFormat('es-ES',{
day:'2-digit', month:'2-digit', year:'numeric',
hour:'2-digit', minute:'2-digit'
}).format(d);
}
function renderComments(container, comments){
if(comments.length===0 && container.children.length===0){
container.innerHTML = '<div class="no-comments">No hay comentarios todavía.</div>';
return;
}
comments.forEach(c=>{
const li = document.createElement('li');
const img = document.createElement('img');
img.src = c.avatar;
img.alt = `Avatar de ${c.author}`;
img.loading = "lazy";
const div = document.createElement('div');
const a = document.createElement('a');
a.href = c.postLink;
a.target = "_blank";
a.title = `Ver comentario de ${c.author}`;
a.style.fontWeight = 'bold';
a.style.textDecoration = 'none';
a.style.color = '#333';
a.innerHTML = `${c.author} <span style="font-size:12px;color:#999;">[${c.source}]</span>`;
const p = document.createElement('p');
p.textContent = c.content.length > truncateLen ? c.content.substring(0, truncateLen) + '…' : c.content;
const small = document.createElement('small');
small.textContent = c.date;
div.appendChild(a);
div.appendChild(p);
div.appendChild(small);
li.appendChild(img);
li.appendChild(div);
container.appendChild(li);
});
}
async function fetchBlogger(startIndex){
const url = `${location.protocol}//${location.hostname}/feeds/comments/default?alt=json&start-index=${startIndex}&max-results=${bloggerLimit}`;
try{
const json = await fetchRecentCommentsCache.fetch(url);
const entries = json.feed.entry || [];
return entries.map(entry=>{
const author = entry.author[0].name.$t;
const avatar = entry.author[0].gd$image ? entry.author[0].gd$image.src : 'https://via.placeholder.com/40';
const content = (entry.content ? entry.content.$t : '').replace(/<[^>]+>/g,'');
let postLink = '/';
const alt = entry.link ? entry.link.find(l=>l.rel==='alternate') : null;
if(alt && alt.href) postLink = alt.href;
const dateISO = entry.published.$t;
return {author, avatar, content, postLink, date: formatDate(dateISO), dateISO, source:'blogger'};
});
} catch(e){
console.error("Error Blogger:", e);
return [];
}
}
async function fetchDisqus(cursor){
if(!disqusShort || !disqusKey) return {comments:[], nextCursor:null};
let url = `https://disqus.com/api/3.0/forums/listPosts.json?forum=${disqusShort}&related=thread&limit=${disqusLimit}&api_key=${disqusKey}`;
if(cursor) url += `&cursor=${encodeURIComponent(cursor)}`;
try{
const data = await fetchRecentCommentsCache.fetch(url);
if(!data.response || !data.response.length) return {comments:[], nextCursor:null};
const comments = data.response.map(c=>{
const dateISO = c.createdAt;
return {
author: c.author.name,
avatar: (c.author.avatar && c.author.avatar.cache) || 'https://via.placeholder.com/40',
content: c.message.replace(/<[^>]+>/g,''),
postLink: c.thread.link,
date: formatDate(dateISO),
dateISO,
source:'disqus'
};
});
const nextCursor = data.cursor?.next || null;
return {comments, nextCursor};
} catch(e){
console.error("Error Disqus:", e);
return {error:true, comments:[], nextCursor:null, message:'No se pudo conectar a Disqus'};
}
}
function createWidget(marker){
const widget = document.createElement('div');
widget.className = "recent-comments-widget";
const h3 = document.createElement('h3');
h3.textContent = title;
const list = document.createElement('ul');
list.className = "recent-comments-list";
const more = document.createElement('a');
more.href = "#";
more.className = "load-more-comments";
more.textContent = "Cargar más";
widget.appendChild(h3);
widget.appendChild(list);
widget.appendChild(more);
marker.appendChild(widget);
return {list, more};
}
document.querySelectorAll(".recent-comments-marker").forEach(marker=>{
const {list, more} = createWidget(marker);
let bloggerIndex = 1;
let disqusCursor = null;
let loaded = [];
let shown = 0;
async function loadComments(){
let blogger = [];
let disqus = [];
// Traer comentarios Blogger
if(system!=='disqus'){
blogger = await fetchBlogger(bloggerIndex);
bloggerIndex += blogger.length;
}
// Traer comentarios Disqus
if(system!=='blogger'){
const result = await fetchDisqus(disqusCursor);
if(result.error){
if(!document.querySelector('.error-comments')){
const errDiv = document.createElement('div');
errDiv.className = 'error-comments';
errDiv.textContent = result.message;
list.appendChild(errDiv);
}
} else {
disqus = result.comments;
disqusCursor = result.nextCursor;
}
}
const newFetched = [...blogger, ...disqus];
const unique = newFetched.filter(c=>!loaded.some(x=>x.author===c.author && x.dateISO===c.dateISO && x.postLink===c.postLink));
loaded.push(...unique);
// Ordenar todos por fecha
loaded.sort((a,b)=>new Date(b.dateISO)-new Date(a.dateISO));
// Mostrar siguiente batch
const batch = loaded.slice(shown, shown + bloggerLimit + disqusLimit);
renderComments(list, batch);
shown += batch.length;
// Mostrar/ocultar botón
if((system!=='disqus' && blogger.length>0) || (system!=='blogger' && disqusCursor) || shown < loaded.length){
more.style.display = 'block';
} else {
more.style.display = 'none';
}
}
loadComments();
more.addEventListener('click', e=>{
e.preventDefault();
loadComments();
});
});
})();
//]]></script>
Personalización del plugin
El plugin incluye estilos CSS integrados por defecto, por lo que no necesitas añadir código adicional. Sin embargo, si deseas adaptarlo más al diseño de tu blog, puedes modificar los colores, el tamaño del avatar o la tipografía. Gracias a NichoClean v2.0, la integración se mantiene siempre ligera y rápida.
El Plugin Últimos Comentarios para Blogger es una herramienta esencial para quienes buscan aumentar la participación de los usuarios, destacar la actividad reciente y mantener su blog más dinámico. Con NichoClean v2.0, la implementación es muy sencilla, flexible y compatible con diferentes sistemas de comentarios.
El Plugin Últimos Comentarios para Blogger es una herramienta esencial para quienes buscan aumentar la participación de los usuarios, destacar la actividad reciente y mantener su blog más dinámico.
ResponderEliminar