Entradas relacionadas para Blogger Los mejores post relacionados para Blogger

Demo en Codepen Repositorio

Los post relacionados son una excelente manera de reducir el porcentaje de rebote, sin embargo, los métodos para crear post relacionados en Blogger tienen un problema en común, ya que todos generan una consulta por etiqueta y a mayor cantidad de consultas, peor rendimiento.


Mi amigo José Gregorio Materan estuvo a cargo de desarrollar este script con la meta de lograr los mejores post relacionados para Blogger y para ello simplificamos todas las consultas en una.


Contenido


Instalar

Vamos a nuestro panel de Blogger, Temas Personalizar Opciones avanzadas Agregar CSS, aquí pegaremos el siguiente código:


/*!
 * wjs-related v2.0.6
 * Copyright 2018 zkreations
 * Daniel Abel M. (fb.com/danieI.abel)
 * Licensed under MIT (github.com/zkreations/wjs-related/blob/master/LICENSE)
 */
/*! Core (No modificar) {{*/
.relCard,
.relCard-image,
.relCard-snippet,
.relCard-title,
.relCardate {
   margin: 0;
   box-sizing: border-box;
}
.relCard {
   padding-left: .5em;
   padding-right: .5em;
   padding-bottom: 1em;
}
.relCard,
.relCard-image img {width: 100%;}
.wjs-related {
   display: -ms-flexbox;
   display: flex;
   -ms-flex-wrap: wrap;
       flex-wrap: wrap;
   margin-left: -.5em;
   margin-right: -.5em;
   font-size: 14px;
}
.relCard-image {display: block;}
.relCard-content {overflow: hidden;}
@media (min-width:376px) {.relCard {width: 50%;}}
@media (min-width:576px) {
   .relCard {width: 33.333333%}
   .wjs-related {font-size: 16px;}
}
/*}} Fin del core {{*/

/*! Personalización */
/* Cuerpo
-----------------------------------------*/
.relCard-content {
   box-shadow: 0 3px 6px -2px rgba(0, 0, 0, 0.25); /* sombra */
   border-radius: 6px; /* bordes redondeados */
}
/* Contenedor de datos
-----------------------------------------*/
.relCard-data {
   padding: 1.2em; /* relleno */
   background-color: #fff; /* color de fondo */
}
/* Titulo
-----------------------------------------*/
.relCard-title {
   font-size: 1em; /* tamaño del título */
   margin-bottom: .25em; /* separación */
   color: #464646; /* color del titulo */
}
/* Fecha
-----------------------------------------*/
.relCard-date {
   font-size: .9em; /* tamaño del texto */
   color: #BBBBBB; /* color de la fecha */
}
/* Resumen
-----------------------------------------*/
.relCard-snippet {
   margin-top: .5em; /* separación */
   color: #757575; /* color del texto */
}

Presiona el botón "Aplicar" para que los cambios surtan efecto. Ahora ve a Temas Editar HTML y busca lo siguiente:


<b:includable id='status-message'>

Arriba de eso pega el siguiente contenedor <b:includable> que genera los artículos relacionados:


<b:includable id='postRelated' data='post'>
   <div id='wjs-related' class='wjs-related'/>
   <script>
   /*!
    * wjs-related v2.0.6
    * Copyright 2018 zkreations
    * Developed by José Gregorio (fb.com/JGMateran)
    * Licensed under MIT (github.com/zkreations/wjs-related/blob/master/LICENSE)
    */
   var related = (function(){
   'use strict';
   
   //Configuracion
   var defaults = {
      id: '<data:post.id/>',
      homepage: window.location.protocol + '//' + window.location.hostname,
      image: 'src/imgdefault.jpg', //Imagen por defecto
      length: 6, //Cantidad de entradas
      localeDate: 'es-ES', //Idioma
      snippet: 50, //Cantidad de texto
      imgSize: 's256', //Recorte de la imagen
      container: document.getElementById('wjs-related'),
      tags: [<b:loop values='data:post.labels' var='label'>'<data:label.name/>',</b:loop>]
   };
   
   //<![CDATA[
   var tags$length = defaults.tags.length;
   var script = document.createElement( 'script' );
   var src = defaults.homepage + '/feeds/posts/default' +
      '?alt=json-in-script' +
      '&callback=related' +
      '&max-results=' + ( defaults.length + 1 ) +
      '&q=';
   for ( var n = 0; n < tags$length; n++ ){
      src += 'label:"' + defaults.tags[ n ] + '"' + ( n === tags$length - 1 ? '' : '|' );
   }
   script.src = src;
   document.body.appendChild( script );
   function render( data ){
      var title = data.title.$t;
      var content = data.content;
      var summary = data.summary;
      var body = content ? content.$t : summary.$t;
      var snippet = (body).replace(/<[^>]*>?/g,'').substring( 0, defaults.snippet ) + '...';
      var img = data.media$thumbnail;
      var tempHtml = document.createElement('div');
      tempHtml.innerHTML = body;
      var imgHtml = tempHtml.querySelector('img');
      var image = ( img ? img.url : (imgHtml ? imgHtml.src : defaults.image)).replace( /s\B\d{2,4}-c/, defaults.imgSize); 
      var url = (function(){
         for ( var i = 0; i < data.link.length; i++ ){
            var link = data.link[i];
            if ( link.rel === 'alternate' ){
               return link.href;
            }
         }
      })();
      var published = new Date( data.published.$t ).toLocaleDateString(
         defaults.localeDate,
         {year:'numeric', month:'long', day: 'numeric'}
      );
      return (
         '<div class="relCard">'+
            '<div class="relCard-content">'+
               '<a href="' + url + '" class="relCard-image">'+
                  '<img src="' + image + '" alt="' + title + '" />'+
               '</a>'+
               '<div class="relCard-data">'+
                  '<h3 class="relCard-title">' + title + '</h3>'+
                  '<div class="relCard-date">' + published + '</div>'+
                  '<p class="relCard-snippet">' + snippet + '</p>'+
               '</div>'+
            '</div>'+
         '</div>'
      );
   }
   function related( json ){
      var i = 0;
      var post;
      var length = defaults.length;
      for ( ; i < length && ( post = json.feed.entry[ i ] ); i++ ){
         if ( defaults.id !== post.id.$t.split( '.post-' )[ 1 ] ){
            defaults.container.innerHTML += render( post );
         } else {
            length++;
         }
      }
   }
   return related;
   })();
//]]></script>
</b:includable>

Guarda los cambios y ahora solo necesitas llamar el includable en donde quieras mostrar entradas relacionadas, para ello utiliza la siguiente etiqueta:


<b:include cond='data:view.isPost and data:post.labels' name='post-related'/>

Si no sabes dónde ubicarla, puedes intentar debajo de <data:post.body/>, ya que esta etiqueta contiene el cuerpo de los articulos.


Opciones

Dentro de la variable defaults se encuentran distintas opciones que puedes modificar, también puedes encontrar el código javascript de ejemplo en el repositorio. La siguiente tabla explica las opciones:


Opción Tipo Descripcion
id string Código único de una entrada publicada en el blog
homepage string Enlace de la página principal. Debe corresponder al id del post
image image Url de la imagen por defecto. Se usa cuando no existen imágenes en el post
length number Cantidad de entradas relacionadas a mostrar
localeDate string Idioma y localidad
snippet number Cantidad de texto para el resumen
imgSize string Parámetros para el tamaño de las imágenes
container string Id del Contenedor
tags object Etiquetas de la entrada. Debe corresponder al id del post

Conclusion

Espero que este aporte les haya sido de utilidad. No olvides compartir este articulo en tus redes sociales, eso siempre me ayuda y lo agradezco el doble. Muchas gracias por pasar.