Las entradas relacionadas tienen varios propósitos, como aumentar el tiempo de permanencia en el blog (lo que reduce la tasa de rebote) y ayudar a los motores de búsqueda a rastrear el contenido del blog. También pueden ayudar a los lectores a encontrar contenido relevante y aumentar la interacción con el blog.
En esta oportunidad, he desarrollado un script que permite mostrar entradas relacionadas de una manera más avanzada. Este script utiliza los feeds de Blogger y aprovecha características nativas de Blogger.
Características
Este sistema de entradas relacionadas fue pensado para aprovechar características nativas de Blogger, como por ejemplo las consultas a los feeds de Blogger y la personalización de la respuesta mediante parámetros de consulta. Esto permite que el sistema sea más eficiente, además:
- Fácil de usar: Solo necesitas incluir el script e iniciar una instancia.
- Personalizable: Puedes personalizar mediante plantillas HTML y opciones.
- Ligero: Huella mínima y sin dependencias.
- Carga diferida: Carga eficiente utilizando IntersectionObserver.
- Aleatorio: Genera entradas en orden aleatorio utilizando un algoritmo de mezcla.
- Integración con YouTube: Compatible con miniaturas de videos de YouTube.
- Siempre visible: Genera contenido relacionado incluso sin etiquetas.
Instalar
Para instalar las entradas relacionadas en Blogger, edita el código HTML del tema que uses y busca la etiqueta </body>, arriba de eso, pega el siguiente código:
<script src="https://cdn.jsdelivr.net/npm/blogger-related-posts@1/dist/main.min.js"></script>Si utilizas un entorno de desarrollo (por ejemplo Hamlet), instala el paquete de npm:
npm install blogger-related-postsModo de uso
Si usas CDN, crear una instancia con la variable global BloggerRelated de esta manera:
<script>//<![CDATA[
new BloggerRelated().init()
//]]></script>En cambio, si estas usando el paquete npm, puedes importarlo e instanciar de la siguiente manera:
import BloggerRelated from 'blogger-related-posts'
new BloggerRelated().init()Por último, necesitarás un contenedor HTML para mostrar las entradas relacionadas. Agrega la ID blog-related al contenedor principal en donde deseas mostrar las entradas relacionadas. Por ejemplo:
<div id="blog-related"></div>Aunque los post relacionados funcionaran solo con especificar el contenedor, puedes mejorar las coincidencias agregando al menos dos elementos de la configuración, los cuales serían las etiquetas y la id del post actual:
<div id="blog-related">
<b:attr name='data-post-id' expr:value='data:post.id'/>
<b:attr expr:value='(data:post.labels map (l => l.name)) limit 3' name='data-tags'/>
</div>Opciones
Puedes personalizar el comportamiento de las entradas relacionadas mediante un objeto de configuración. Las opciones disponibles son las siguientes:
| Opción | Tipo | Descripción | Predeterminado |
|---|---|---|---|
relatedSelector |
String | Selector para el contenedor de entradas relacionadas | #blog-related |
template |
String | Plantilla para las entradas relacionadas | Ver defaults.js |
textOnlyTemplate |
String | Plantilla para las entradas relacionadas sin imagen | null |
defaultImage |
String | Imagen predeterminada para las entradas relacionadas | '' |
directory |
String | Directorio del feed para realizar las consultas | summary |
imageParams |
String | Parámetros de imagen para las entradas relacionadas | s120-c |
maxResults |
Number | Número máximo de entradas relacionadas | 5 |
observer |
Boolean | Usar IntersectionObserver para carga diferida | true |
orderby |
String | Tipo de orden del feed para organizar resultados | relevance |
postId |
Number | ID de la entrada actual | 0 |
postTitle |
String | Titulo del post actual | document.title |
rootMargin |
String | Margen raíz para el IntersectionObserver | 200px |
shuffleLevel |
Number | Nivel de mezcla para las entradas relacionadas | 5 |
summaryLength |
Number | Longitud máxima del resumen | 120 |
tags |
Array | Etiquetas para las entradas relacionadas | [] |
ytThumbnail |
String | Tipo de miniatura de YouTube | mqdefault |
Puedes pasar las opciones al constructor de la siguiente manera:
new BloggerRelated({
relatedSelector: '#blog-related',
template: '<h2>{title}</h2>',
maxResults: 5,
}).init()Adicionalmente, el constructor también leerá atributos data-* del contenedor. Por ejemplo:
<div id="blog-related" data-max-results="5" data-root-margin="200px"></div>Plantilla
La plantilla es un string que se usará para mostrar las entradas relacionadas. Puedes usar estos elementos para acceder a los datos de Blogger, los cuales son:
| Elemento | Descripción |
|---|---|
{postId} |
ID de la entrada |
{title} |
Título de la entrada |
{published} |
Fecha de publicación de la entrada |
{summary} |
Resumen de la entrada |
{postUrl} |
URL de la entrada |
{authorImage} |
Imagen del autor de la entrada |
{authorName} |
Nombre del autor de la entrada |
{authorUrl} |
URL del autor de la entrada |
{featuredImage} |
Imagen destacada de la entrada |
Cuando se usa la plantilla, el script reemplazará las etiquetas de datos con los valores correspondientes. Por ejemplo:
<a href="{postUrl}">
<img src="{featuredImage}" alt="{title}" />
<h2>{title}</h2>
<p>{summary}</p>
<p>By {authorName}</p>
<p>Published on {published}</p>
</a>Métodos
Los métodos están disponibles a través de la instancia de BloggerRelated y son los siguientes:
| Método | Descripción | Retorna |
|---|---|---|
init() |
Inicializa las entradas relacionadas | Promise |
El método init() devuelve una promesa, por lo tanto si deseas ejecutar código JavaScript después de que se hayan inicializado las entradas relacionadas, puedes hacerlo de esta forma:
new BloggerRelated().init().then(() => {
// Se ejecuta después de que la paginación se haya inicializado
})Conclusion
Las entradas relacionadas son una herramienta poderosa para aumentar la interacción y el tiempo de permanencia en el blog. Con este script, puedes agregar esta característica de manera sencilla y eficiente a Blogger. Además, al ser un script ligero y sin dependencias, no afectará el rendimiento de tu blog.
Gracias por leer y espero que encuentres útil este script. Este proyecto es de código abierto y planeo mantenerlo activo. Si tienes alguna pregunta o sugerencia, no dudes en dejar un comentario.
