JS Acordeón automático en Blogger
Acordeón automático con JSON-LD
En la plantilla NichoClean v2.0 hemos incorporado una nueva función avanzada para mostrar entradas de forma dinámica, elegante y optimizada para SEO: el acordeón automático desde el feed de Blogger con JSON-LD @graph. Esta característica permite cargar contenido de una etiqueta específica del blog y convertirlo en un bloque interactivo tipo acordeón, totalmente integrado con los datos estructurados de Google.
¿Qué es el acordeón automático del feed?
Este script inteligente lee el feed de Blogger (en formato JSON) y genera automáticamente una lista de entradas en formato acordeón desplegable. Cada ítem muestra el título, un resumen limpio del contenido, un enlace directo al post y metadatos estructurados que mejoran el posicionamiento SEO y la visibilidad en los resultados de búsqueda.
Además, este acordeón incorpora un bloque de JSON-LD @graph que se inserta automáticamente en el <head> del documento. Esto significa que cada entrada mostrada también se representa en el esquema de datos de tu sitio, optimizando el SEO on-page sin requerir configuración adicional.
Ventajas principales
- Automatización total: carga las entradas directamente desde el feed sin tocar código.
- Optimización SEO: genera automáticamente datos estructurados válidos (Schema.org / BlogPosting).
- Diseño minimalista: totalmente integrado con el estilo limpio de la plantilla NichoClean v2.0.
- Responsive y ligero: funciona perfectamente en móvil y escritorio sin librerías externas.
- Opcionalidad: puedes elegir etiqueta, cantidad de entradas e incluso activar modo aleatorio.
Cómo usar el acordeón automático
1. Agrega el shortcode HTML
En el lugar donde quieras mostrar el acordeón (por ejemplo, dentro de una entrada o gadget HTML/JavaScript), inserta este bloque:
<div class="acordeon-feed" data-etiqueta="demo" data-cantidad="6" data-aleatorio="true"></div>📌 Parámetros configurables:
data-etiqueta: el nombre exacto de la etiqueta (category) del feed que quieres mostrar.data-cantidad: número máximo de entradas a mostrar.data-aleatorio: si se establece entrue, mezcla aleatoriamente las entradas.
2. Agrega el script del acordeón
Coloca el siguiente código justo antes de la etiqueta </body> o dentro del gadget de scripts generales de tu plantilla NichoClean:
<!-- 26. JS Acordeón automático desde el feed de Blogger con JSON-LD @graph -->
<script>
//<![CDATA[
(function() {
const acordeones = document.querySelectorAll('.acordeon-feed');
if (!acordeones.length) return;
// Obtener nombre del blog dinámico desde meta og:site_name
const blogMeta = document.querySelector("meta[property='og:site_name']");
const blogName = blogMeta ? blogMeta.content : "Nombre del blog";
// Obtener logo automáticamente desde favicon
const faviconEl = document.querySelector("link[rel*='icon']");
const logoUrl = faviconEl ? faviconEl.href : "";
acordeones.forEach(container => {
const etiqueta = container.dataset.etiqueta || '';
const cantidad = parseInt(container.dataset.cantidad) || 5;
const aleatorio = container.dataset.aleatorio === "true";
const feedUrl = `/feeds/posts/default/-/${etiqueta}?alt=json&max-results=50`;
fetchWithCacheManager(feedUrl).then(data => {
let entries = data.feed.entry || [];
if (!entries.length) {
container.innerHTML = `<p>No hay entradas con la etiqueta "${etiqueta}".</p>`;
return;
}
// Mezclar aleatoriamente si se indica
if (aleatorio) entries = entries.sort(() => Math.random() - 0.5);
entries = entries.slice(0, cantidad);
const accordion = document.createElement('div');
accordion.className = 'accordion';
// JSON-LD @graph
const jsonLD = {
"@context": "https://schema.org",
"@graph": []
};
entries.forEach(entry => {
const title = entry.title.$t;
const link = entry.link.find(l => l.rel === 'alternate').href;
const content = entry.content?.$t || entry.summary?.$t || '';
// Obtener primer párrafo limpio con DOMParser
const parser = new DOMParser();
const doc = parser.parseFromString(content, 'text/html');
const primerParrafo = doc.querySelector('p')?.textContent || '';
const authorName = entry.author?.[0]?.name?.$t || "Autor desconocido";
const authorUrl = entry.author?.[0]?.uri?.$t || "";
const publishedDate = entry.published?.$t || "";
const updatedDate = entry.updated?.$t || "";
// Imagen: primera imagen del contenido o logo como fallback
const imgMatch = content.match(/<img[^>]+src="([^">]+)"/);
const imageUrl = imgMatch ? imgMatch[1] : logoUrl;
// Crear item acordeón
const item = document.createElement('div');
item.className = 'accordion-item';
item.innerHTML = `
<div class="accordion-header">${title}</div>
<div class="accordion-content">
<p>${primerParrafo} <a href="${link}" target="_blank" rel="noopener">Leer más</a></p>
</div>
`;
accordion.appendChild(item);
// Añadir entrada al JSON-LD @graph
jsonLD["@graph"].push({
"@type": "BlogPosting",
"headline": title,
"description": primerParrafo,
"url": link,
"datePublished": publishedDate,
"dateModified": updatedDate,
"author": {
"@type": "Person",
"name": authorName,
"url": authorUrl
},
"publisher": {
"@type": "Organization",
"name": blogName,
"logo": {
"@type": "ImageObject",
"url": logoUrl
}
},
"image": imageUrl,
"mainEntityOfPage": link
});
});
container.appendChild(accordion);
// Insertar JSON-LD en un solo <script>
const scriptLD = document.createElement('script');
scriptLD.type = 'application/ld+json';
scriptLD.textContent = JSON.stringify(jsonLD, null, 2);
document.head.appendChild(scriptLD);
// Comportamiento acordeón clásico
accordion.querySelectorAll('.accordion-header').forEach(header => {
header.addEventListener('click', () => {
const isActive = header.classList.contains('is-active');
accordion.querySelectorAll('.accordion-header').forEach(h => {
h.classList.remove('is-active');
h.nextElementSibling.style.maxHeight = null;
});
if (!isActive) {
header.classList.add('is-active');
const content = header.nextElementSibling;
content.style.maxHeight = content.scrollHeight + 'px';
}
});
});
}).catch(err => {
console.error("Error al cargar feed con cache:", err);
container.innerHTML = `<p>Error al cargar entradas.</p>`;
});
});
})();
//]]>
</script>💡 Este script requiere la función fetchWithCacheManager() incluida por defecto en la plantilla NichoClean v2.0. Si tu versión no la tiene, asegúrate de actualizar o añadir el módulo de gestión de caché de feed.
Personalización del estilo (CSS)
El diseño del acordeón se adapta automáticamente a la estética de NichoClean v2.0. Sin embargo, si deseas personalizar los colores o animaciones, puedes añadir este bloque CSS opcional:
<style>
.accordion { border-top: 1px solid #e5e7eb; }
.accordion-item { border-bottom: 1px solid #e5e7eb; }
.accordion-header { cursor: pointer; padding: 1rem; font-weight: 600; background: #fff; transition: background 0.3s; }
.accordion-header:hover { background: #f9fafb; }
.accordion-header.is-active { background: #f3f4f6; }
.accordion-content { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; padding: 0 1rem; }
.accordion-content p { margin: 0.8rem 0; color: #4b5563; }
.accordion-content a { color: #2563eb; text-decoration: none; }
</style>
De esta forma, tu bloque de acordeón mantendrá la misma coherencia visual que el resto de tu plantilla sin perder el estilo minimalista.
Ejemplo del Acordeón automático en Blogger
Consejos y buenas prácticas
- Evita usar etiquetas con demasiadas entradas; limita a 50 como máximo para mejorar rendimiento.
- Usa nombres de etiqueta simples y sin espacios innecesarios.
- Verifica que tus entradas tengan imágenes y descripciones para un mejor SEO.
- Si cambias de favicon o nombre de blog, el script lo detectará automáticamente sin tocar el código.
Conclusión
El acordeón automático con JSON-LD @graph es una de las mejoras más potentes de NichoClean v2.0. Combina interactividad, automatización y SEO avanzado en un solo bloque. Ideal para mostrar listas de tutoriales, FAQs, artículos recientes o secciones destacadas sin duplicar contenido ni usar gadgets externos.
Si aún no has actualizado tu plantilla a la última versión, este es el momento. Cada línea de código en NichoClean v2.0 está diseñada para mejorar la velocidad, indexación y experiencia del lector.
Aún no hay comentarios, sé el primero en comentar.
Publicar un comentario