Mejores entradas relacionadas para Blogger

Entradas relacionadas para Blogger Los mejores post relacionados para Blogger

Demo en Codepen Repositorio Star

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 y miembro del staff 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 las consultas a solo una.


Instalar

Nos vamos a dirigir a en nuestro panel de administración, Temas > Personalizar > Opciones avanzadas > CSS Personalizado y una vez aquí, pegaremos el siguiente código:


/* Plugin: wjs-related v2.0.4 */
/* by zkreations */
.wjs-rel__card,.wjs-rel__image,.wjs-rel__snippet,.wjs-rel__title,.wjs-relate{background:0 0;padding:0;margin:0;border:0;outline:0;box-shadow:0 0 transparent;font:inherit;box-sizing:border-box}.wjs-rel__card{width:100%;padding-left:.5em;padding-right:.5em;padding-bottom:1em}.wjs-related{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-left:-.5em;margin-right:-.5em;font-size:14px;line-height:1.8}.wjs-rel__image{display:block;position:relative;overflow:hidden}.wjs-rel__image img{width:100%}.wjs-rel__snippet{padding-top:.5em}@media (min-width:376px){.wjs-rel__card{width:50%}}@media (min-width:576px){.wjs-rel__card{width:33.333333%}.wjs-related{font-size:16px}}
/*
=> Personalizar
*/
/* Cuerpo
 *------------------------ */
.wjs-rel__card-content {
  box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.1), 0 2px 2px -1px rgba(0, 0, 0, 0.2);  /* sombra */
}

/* Contenedor de datos
 *------------------------ */
.wjs-rel__data {
  padding: 1.2em; /* relleno */
  color: #565656; /* color de fuente */
  background-color: #fff; /* color de fondo*/
}

/* Titulo
 *------------------------ */
.wjs-rel__title {
  font-weight: 700; /* grosor texto titulo */
  font-size: 1em; /* tamaño de fuente */
}

/* Fecha
 *------------------------ */
.wjs-rel__date {
  font-size: 12px; /* tamaño de fuente */
  text-transform: uppercase; /* transformacion */
  opacity: 0.5; /* opacidad */
}

Presionamos el botón "Aplicar" para que los cambios surtan efecto y ahora regresamos al panel de administración, pero esta vez nos vamos a Temas > Editar html y buscamos lo siguiente:


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

Arriba de eso, haz un espacio y pega la siguiente etiqueta b:includable:


<b:includable id='post-related' data='post'>
   <div id='wjs-related' class='wjs-related'/>
   <script>
   /*!
    * wjs-related v2.0.3
    * 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';
   var defaults = {
      id: '<data:post.id/>',
      homepage: window.location.protocol + '//' + window.location.hostname,
      image: 'source/img/no-img-blogger.png',
      length: 5,
      snippet: 100,
      imgSize: 's256-c',
      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 snippet = ( content ? content.$t : summary.$t).replace(/<[^>]*>?/g,'').substring( 0, defaults.snippet ) + '...';var img=data.media$thumbnail;var tempHtml=document.createElement("div");tempHtml.innerHTML=content.$t;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("es-ES",{year:"numeric",month:"long",day:"numeric"});return'<div class="wjs-rel__card">'+'<div class="wjs-rel__card-content">'+'<a href="'+url+'" class="wjs-rel__image">'+'<img src="'+image+'" alt="'+title+'" />'+"</a>"+'<div class="wjs-rel__data">'+'<h3 class="wjs-rel__title">'+title+"</h3>"+'<div class="wjs-rel__date">'+
published+"</div>"+'<p class="wjs-rel__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 listo. Ahora solo necesitas llamar el includable en donde quieras mostrar las entradas relacionadas, siempre y cuando sea dentro del widget Blog, 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 buscando <data:post.body/> y pegas la etiqueta include justo debajo de eso.


Opciones

Dentro de la variable defaults se encuentran distintas opciones que puedes modificar. En la siguiente tabla están explicadas:


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
snippet [number] Cantidad de texto para el resumen
imgSize [string] Parámetros para el tamaño de las imágenes
container [var] Id del Contenedor
tags [Object] Etiquetas de la entrada separadas por comas. Debe corresponder al id del post

También puedes encontrar el código javascript de ejemplo entre otros recursos dentro del repositorio en github.


Algunas aclaraciones

Las plantillas de zkreations que cuentan con post relacionados utilizan la versión inicial de este script. Escribí este articulo ya que hemos actualizado a la versión 2, la cual se construyó gracias a el feedback enviado por ustedes de la versión 1. Puedes leer un registro de los cambios desde changelod.md en github.


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

Quizás te interese