Una buena experiencia de usuario garantiza que tu contenido sea leído y considerado. Por ello, ofrecer una estimación del tiempo necesario para leer un artículo podría ser una excelente idea.
Muchos servicios de blogs como medium implementan esta funcionalidad, pero en este articulo veremos cómo crearlo en Blogger, así que vamos a ello.
El Concepto
Lo primero que tenemos que analizar es ¿cómo se calcula el tiempo de lectura?. Bueno, es bastante simple: primero tenemos que calcular el total de palabras. Después de eso, sólo tenemos que dividir esa cantidad entre el ppm (palabras por minuto).
Hasta ahora, todo parece sencillo. El problema surge al calcular las palabras fuera del artículo. Aunque Blogger nos provee una etiqueta que contiene todo el post: <data:post.body/>, ésta se debe interpretar. Por lo tanto, debemos cargar todo el contenido para luego manipularlo con JavaScript.
let post = `<data:post.body/>`;
Blogger API
La segunda opción que exploré fue usar los feeds. Logré hacerlo funcionar, pero añadía complejidad extra debido a la necesidad de paginación para entradas antiguas. Además, el método era poco ortodoxo y complicado.
Finalmente, recordé que Blogger dispone de una alternativa para acceder a los datos de un blog: su API. Me dediqué a estudiarla y adaptar el código para utilizarla correctamente.
Antes de continuar, asegúrate de obtener tu clave API para usar el plugin de manera adecuada.El Algoritmo
Como mencioné al principio, no es tarea complicada estimar el tiempo que tomaría leer cierta cantidad de palabras. Así que empecemos.
Primero, definamos la función con 2 parámetros: el ID de nuestro blog y el ID del post en sí. ¿Por qué? La API de Blogger permite hacer peticiones específicas a diferentes partes de un blog, pero para guiarse necesita varios identificadores. También agregaremos nuestra clave API a la función para realizar las peticiones correctamente.
Ver codigo
function readTime(blogId, postId) {
const apiKey = 'PEGA TU KEY AQUÍ',
apiUrl = 'https://www.googleapis.com/blogger/v3/blogs/';
// Hacemos la petición al post mediante el ID
fetch(`${apiUrl}${blogId}/posts/${postId}?key=${apiKey}`)
.then(res => res.json())
.then(post => {
/**
* Reemplazamos las etiquetas HTML y
* guardamos en un array las palabras
*/
let p = post.content.replace(/<[^>]*>?/g, '').split(' ');
/**
* Dividimos las palabras entre 200
* que es el ppm promedio y redondeamos
* el resultado
*/
p = Math.round(p.length / 200);
/**
* Finalmente al elemento con el mismo ID
* del post, le agregamos el calculo
*/
document.getElementById(postId)
.textContent = p < 2 ? ' menos de 1 min' : ' ' + p + ' min';
})
.catch(err => console.log(err))
}
¡Ya está! Lo único que falta es llamar a la función. Para ello, debemos ubicarnos en la plantilla de nuestro blog.
Tenemos que situarnos justo en la parte donde se produce el bucle de las entradas de Blogger y llamar a nuestro código para que se ejecute por cada entrada que se vaya a mostrar.
Así que busca esta linea <b:loop values='data:posts' var='post'> y debajo de ella pega el siguiente código:
<span expr:id='data:post.id' class='read-time' title='Calculado con promedio de 200 palabras por minuto'>
<script>
readTime('<data:blog.blogId/>', '<data:post.id/>');
</script>
</span>
En el caso de que quieras posicionarlo encima o debajo del titulo, primero tendrías que ubicar la etiqueta correspondiente: <data:post.title/>.
Estilos
Lo último que tenemos por hacer, es que se vea bien ¿cierto?, por ello usé el atributo class en el plugin. Así que sólo es cuestión de usar un poco de CSS.
.read-time {
color: white;
background: steelblue;
padding: .2rem .5rem;
}
Puedes usar más estilos si lo prefieres o añadirle un icono personalizado. Todo queda a la creatividad.