Insertar entradas relacionadas en Blogger de manera fácil

 

Blogger es un CMS (Content Management Sistem o sistema de gestión de contenidos) muy popular. Otros CMS son WordPress o Prestashop. Lo trabajamos menos porque permite menos personalizaciones que WordPress.org, sin embargo, al ser totalmente gratuito, y propiedad de Google, siempre hay clientes interesados en que su página web se construya con Blogger.

Un factor muy importante para rebajar el rebote de la web (la gente que se va viendo solo una página en la web) a la vez que aumenta el número de páginas vistas es añadir un apartado que nos muestre entradas relacionadas. Esto además tiene una gran eficacia para el posicionamiento web, pues Google y el resto de buscadores cada vez tienen más en cuenta lo que hacen los usuarios en las páginas. Aquellas páginas con una buena interacción de los usuarios tienen más posibilidades de aparecer arriba en los resultados de búsqueda, pues Google entenderá que son más relevantes para los usuarios (Ojo, hemos dicho «tienen más posibilidades», no que sea una relación causa-efecto, Google hace lo que quiere con su algoritmo y su buscador).

Esto de añadir un widget o plugin  que nos muestre las páginas relacionadas se soluciona de manera muy fácil en wordpress, tenemos decenas o cientos de plugins  que hacen esa función, en Blogger, sin embargo, como casi siempre, no tenemos nada.

Hay opciones externas, como el widget de LinkWithin, que nos muestra unas entradas relacionadas (más o menos) con la entrada que estamos leyendo. Vamos a LinkWithtin, le decimos lo que queremos poner, nos manda a Blogger e instalamos el widget.

Pero también existen posibilidades de hacer esto al margen de widget externos. Podemos insertar un código en la plantilla para que nos haga la misma función, e incluso mejor, pues estas entradas que muestra sí están relacionadas. Este código lo hemos visto por primera vez en esta web, al César lo que es del César.

Bien, para instalar este código tenemos que:

-hacer una copia de seguridad de la plantilla, esto siempre y antes de hacer cualquier cambio.

-buscamos la etiqueta </body>. En el texto de la plantilla la buscamos pulsando Control F (ctrl+f) y escribiendo ese texto en el cuadro de búsqueda.

-una vez localizada, pegamos el siguiente código justo encima de </body>

<!– BEGIN CODE IT PRETTY RELATED POSTS GALLERY CODE –>
<b:if cond=’data:blog.pageType == «item»‘>
 
<style>
.related-posts {
  width: 100%;
  margin: 2em 0;
  float: left;
}
 
.related-posts ul li {
  list-style: none;
  margin: 0 5px;
  float: left;
  text-align: center;
  border: none;
}
</style>
 
 
<script src=»//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js»></script>
<script>
 
//<![CDATA[
$(document).ready(function() {
 
 
 
  //CODE OPTIONS
 
  var maxSearched = 500;
  var minimum = 3;
  var maximum = 5;
  var imageSize = 150;
  var roundImages = false;
  var relatedTitle = true;
  var labelInTitle = true;
  var relatedTitleText = «Más artículos relacionados con «;
  var defaultImage = «»;
  var campaignTracking = false;
  var campaignSource = «»;
  var campaignMedium = «»;
  var campaignName = «»;
  var postLabels = $(‘.post-labels a’);
  var insertBefore = $(‘.post-footer’);
 
 
  //END CODE OPTIONS – DO NOT EDIT BELOW THIS LINE
 
  var labels=[];var label;var alternateLabel;var minposts=minimum-1;if(postLabels.length===1){label=postLabels.text().trim()}else if(postLabels.length>1){$(postLabels).each(function(){labels.push($(this).text().trim())});label=labels[Math.floor(labels.length*Math.random())];var labelLocation=labels.indexOf(label);if(labelLocation===labels.length-1){alternateLabel=labels[labelLocation-1]}else{alternateLabel=labels[labelLocation+1]}}if(label!==undefined){var title=$(«.entry-title»).text().trim();var labelCount=0;var alternateLabelCount=0;var matches=[];var url=$(‘link[rel=»alternate»][title*=»Atom»]’).eq(0).attr(«href»);$.ajax({url:url,data:{«max-results»:maxSearched,alt:»json-in-script»},dataType:»jsonp»,success:function(e){$.each(e.feed.entry,function(t,n){if(e.feed.entry[t].category!==undefined){var r=[];for(var i=0;i<e.feed.entry[t].category.length;i++){r.push(e.feed.entry[t].category[i].term)}if($.inArray(label,r)!==-1){labelCount++}if($.inArray(alternateLabel,r)!==-1){alternateLabelCount++}}});if(labelCount<=minposts&&alternateLabelCount>=minposts){label=alternateLabel}$.each(e.feed.entry,function(t,n){if(e.feed.entry[t].category!==undefined){var r=[];for(var i=0;i<e.feed.entry[t].category.length;i++){r.push(e.feed.entry[t].category[i].term)}if($.inArray(label,r)!==-1){var s=e.feed.entry[t].title.$t.trim();if(s!==title){var o;for(var u=0;u<e.feed.entry[t].link.length;u++){if(e.feed.entry[t].link[u].rel===»alternate»){o=e.feed.entry[t].link[u].href}}var a;if(e.feed.entry[t].media$thumbnail!==undefined){a=e.feed.entry[t].media$thumbnail.url.split(/s72-c/).join(«s»+imageSize+»-c»)}else{a=defaultImage}if(matches.length<maxSearched&&campaignTracking===false){matches.push(‘<li><a href=»‘+o+'»><img src=»‘+a+'» alt=»‘+s+'» nopin=»nopin»>’+s+»</a></li>»)}else if(matches.length<maxSearched&&campaignTracking===true){matches.push(‘<li><a href=»‘+o+»?utm_source=»+campaignSource+»&utm_medium=»+campaignMedium+»&utm_campaign=»+campaignName+'»><img src=»‘+a+'» alt=»‘+s+'» nopin=»nopin»>’+s+»</a></li>»)}}}}});if(matches.length>=minimum){if(relatedTitle===true&&labelInTitle===true){insertBefore.before(‘<div class=»related-posts»><h5>’+relatedTitleText+’ <span class=»related-term»>’+label+»</span></h5><ul></ul></div>»)}else if(relatedTitle===true&&labelInTitle===false){insertBefore.before(‘<div class=»related-posts»><h5>’+relatedTitleText+»</h5><ul></ul></div>»)}else{insertBefore.before(‘<div class=»related-posts»><ul></ul></div>’)}matches.sort(function(){return.5-Math.random()});for(var t=0;t<maximum;t++){$(«.related-posts ul»).append(matches[t])}}insertBefore.css(«clear»,»both»);$(«.related-posts ul li»).css({«max-width»:imageSize,»border»:»none»,»padding»:»0″});if(roundImages===true){$(«.related-posts ul li img»).css({«width»:imageSize,»height»:imageSize,»border-radius»:»50%»})}else{$(«.related-posts ul li img»).css({«max-width»:imageSize,»height»:»auto»});}}})}
});
//]]>
</script>
 
</b:if>
<!– END CODE IT PRETTY RELATED POSTS GALLERY CODE –>

 

Para copiar solamente el código, sin más código extra de esta página, lo podéis pegar en un bloc de notas, y luego lo copias otra vez directamente del bloc de notas, si lo pegáis directamente de aquí puede que añadáis más código del necesario.

 

El resultado es algo parecido a esto:

entradas relacionadas blogger

 

 Opciones y errores

 

Si no muestra ninguna entrada relacionada seguramente sea porque el post en el que estamos no tiene suficientes etiquetas. El código funciona porque relaciona etiquetas, si no hay ninguna, o no hay suficientes, no puede funcionar.

Por otra parte, hay una parte del código que se puede modificar, es esta:

 

//CODE OPTIONS
 
  var maxSearched = 500;
  var minimum = 3;
  var maximum = 5;
  var imageSize = 150;
  var roundImages = false;
  var relatedTitle = true;
  var labelInTitle = true;
  var relatedTitleText = «Más artículos relacionados con «;
  var defaultImage = «»;
  var campaignTracking = false;
  var campaignSource = «»;
  var campaignMedium = «»;
  var campaignName = «»;
  var postLabels = $(‘.post-labels a’);
  var insertBefore = $(‘.post-footer’);

 

Lo que podéis modificar sobre todo es lo marcado en rojo. El número máximo de búsquedas es 500..algo un poco alto, con 5 o 6 puede valer…El número mínimo de etiquetas para que funcione son 3, y el máximo que relaciona, 5. La anchura de la imagen es de 150 px, y el texto que yo he puesto es «Más artículos relacionados con»

 

En el blog de Miss Lavanda vimos otro código similar, pero no conseguimos que funcionase, así que no lo publicamos.

 


2 comentarios

KARMELA · julio 4, 2016 a las 4:49 pm

Hola, pues lo siento pero este código (copiado directamente desde la web que dás) tampoco funciona, lo mismo que le ocurre al de Miss Lavanda, que tampoco funciona. Este funciona una vez, según lo implementas en la plantilla, pero luego según le da… Una pena porque es el único que en principio funcionaba. He tenido que quitar también el de Linkwithin, porque al cambiar el protocolo https muchos de los gadgets que tenía me han dejado de funcionar. Ya ni el oficial de Linkwithin funciona con el nuevo protocolo… Una locura esto de tener tanta seguridad. ¿Sabéis porque este código funciona unas veces si y otras no??? Me estoy volviendo loca para volver a colocar las entradas relacionadas otra vez como las he tenido siempre en los 6 años que tengo blogs¡¡ Gracias y espero haber que me dices… 😉 Saludos¡¡

    Mario Blanco · julio 5, 2016 a las 7:18 am

    Pues la verdad que no sé. Ahora mismo ya no utilizo blogger para nada, así que estoy falto de entrenamiento en estos asuntos técnicos. A mí sí me funcionaba cuando lo puse, pero si Google ha cambiado algo de Blogger puede que ya no marche bien. Siempre puedes probar a pasarte a WordPress, en donde tienes muchos más recursos en los que prácticamente no hay que hacer nada, simplemente instalar el plugin.
    http://marioblancov.es/migrar-blogger-a-wordpress/
    Ya lo siento.

Los comentarios están cerrados.