miércoles, 1 de septiembre de 2010

Incluir entradas relacionadas de manera automática

Me estaba resistiendo, pero tenía la entrada medio preparada y he decidido que hoy toca entrada coñazo para personalizar un poco nuestro Blog. ¡yujuu!

En este caso voy a explicar cómo añadir un par de funcionalidades para mostrar de manera automática entradas relacionadas al pie de una entrada. A mi parecer es algo bastante práctico, porque permite al usuario acceder a entradas similares a las que está viendo y que es posible que no haya tenido la oportunidad de leer por ser un usuario nuevo, a la vez que le damos algo mas de vidilla a esas entradas antiguas que ya muchas veces nadie lee.

Voy a mostrar dos maneras de hacerlo. Una de ellas es mediante un gadget preparado para ello, y mediante el cual podemos mostrar de tres a cinco enlaces relacionados junto con sus imágenes correspondientes bajo cada una de las entradas en la página principal y en la página correspondiente a cada post. Es rápido, fácil y queda bonito, no podemos pedir mas.

La otra manera es modificando el código fuente de nuestro blog. En este caso podremos mostrar el número de entradas relacionadas que nos venga en gana, y se mostrará como un simple enlace, sin imágenes ni nada de nada, y lo hará únicamente en la página individual de cada entrada.
Requiere algo mas de paciencia para incluirlo, pero siguiendo bien las instrucciones no debería haber ningún problema, a lo mucho que te cargues la plantilla completa de tu blog... ejem.

Mostrar entradas relacionadas con imagen con LinkWithIn:

Se trata de gadget muy fácil de incluir en nuestro blog. El gadget en cuestión es proporcionado por LinkWithin.

Accede a la página principal de LinkWithIn: http://www.linkwithin.com/learn y en el cuadro de la derecha introduce un email (creo que da igual si te lo inventas, me parece que no sirve para nada), la plataforma en la que tienes alojada tu blog, su url y el número de entradas relacionadas que quieres que se muestre (a elegir entre 3, 4 o 5).



Si tu blog tiene el fondo de color oscuro y las letras en claro, marca la opción "My blog has light text on a dark background" para que no destaque demasiado sobre el fondo. ¿Que quieres que destaque? Pues tu mismo.

Ahora pulsa "Get gadget". Se te cargará una nueva ventana en la que te explica las instrucciones para incluir el gadget en tu blog. Si no has accedido todavía a tu gestor de blogs, accede ahora.

En el primer punto te dice que pulses sobre el enlace Install Widget para instalar el gadget; hazlo y se te cargará una nueva página de instalación. En esa pantalla haz lo siguiete:

  • Selecciona en el desplegable el blog en el que quieres instalar la aplicación. Si solo tienes uno no tendrás que hacer nada.
  • Escoge el título del gadget que te aparecerá en el diseño del Blog. Por defecto te coloca LinkWithin, déjalo si quieres así, porque la descripción que te va a incluir invariablemente en el blog va a ser "Quizás también le interese:" con independencia de lo que aquí escribas.
  • Pulsa el botón Añadir artilugio y se te cargará automáticamente la página del diseño del blog. El gadget te aparecerá en un lugar aleatorio del Blog, colocalo si quieres en otro lado, pero es indiferente, porque te colocará el gadget bajo cada entrada de manera automática al visualizar el blog.
Si todo ha ido bien bajo tus entradas aparecerá algo parecido a esto:



Desventajas:
  • El gadget no permite personalizar el título
  • Bajo los enlaces a las entradas te aparece un enlace con publicidad del producto. No resulta demasiado grande ni molesto, pero ahi está.
  • Como todo gadget, es posible que ralentize un poco la carga del blog

Mostrar enlaces de entradas relacionadas solo en páginas individuales:

Este es el método que yo tengo incluido para mostrar enlaces relacionados. Busca similitudes en función de las etiquetas y el título de la entrada.
No lo he programado yo, solo he modificado alguna cosilla, así que si quieres incluirlo solo sigue los pasos que te indico y no tendrás ningún problema.

  • Accede a la sección de "Edición de HTML" de tu blog de Blogger.
  • Si todavía no te has guardado una copia de tu plantilla de diseño, este es el momento. Solo tienes que pulsar "Descargar plantilla completa" y se descargará en el lugar que elijas. Así podrás modificar mas libremente el código sin miedo. ¿que la cagas? no pasa nada, cargamos la plantilla antigua y no ha pasado nada.
  • Selecciona la opción "Expandir plantillas de artilugios".
  • Busca en el código el texto ]]></b:skin> y justo detrás pega el siguiente código, de esta manera ejecutaremos este código antes que cualquier otro

    <!-- Muestra las entradas relacionadas -->
    <script type=\'text/javascript\'>
      //<![CDATA[

      var relatedTitles = new Array();
      var relatedTitlesNum = 0;
      var relatedUrls = new Array();

      function related_results_labels(json) {
        for (var i = 0; i < json.feed.entry.length; i++) {
          var entry = json.feed.entry[i];
          relatedTitles[relatedTitlesNum] = entry.title.$t;
          for (var k = 0; k < entry.link.length; k++) {
            if (entry.link[k].rel == \'alternate\') {
              relatedUrls[relatedTitlesNum] = entry.link[k].href;
              relatedTitlesNum++;
              break;
            }
          }
        }
      }

    function removeRelatedDuplicates() {
      var tmp = new Array(0);
      var tmp2 = new Array(0);
      for(var i = 0; i < relatedUrls.length; i++) {
        if(!contains(tmp, relatedUrls[i])) {
          tmp.length += 1;
          tmp[tmp.length - 1] = relatedUrls[i];
          tmp2.length += 1;
          tmp2[tmp2.length - 1] = relatedTitles[i];
        }
      }
      relatedTitles = tmp2;
      relatedUrls = tmp;
    }

    function contains(a, e) {
      for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
      return false;
    }

    function printRelatedLabels() {
      var cuantosPosts = 0;
      var r = Math.floor((relatedTitles.length - 1) * Math.random());
      var i = 0;
      var dirURL = document.URL;
      document.write(\'<ul>\');
      while (i < relatedTitles.length && i < 20) {
        if (relatedUrls[r] != dirURL) {
          document.write(\'<li><a href="\' + relatedUrls[r] + \'" title="Post relacionado: \' + relatedTitles[r] + \'">\' + relatedTitles[r] + \'</a></li>\');
        }
        if (r < relatedTitles.length - 1) {
          r++;
        } else {
          r = 0;
        }
      i++;
      cuantosPosts++;
      if (cuantosPosts == 5) {
        break;
      }
    }
    document.write(\'</ul>\');
    }

    //]]>
    </script>

    En el código que hemos incluido, donde dice cuantosPosts == 5 el número 5 está indicando el número de entradas relacionadas que se van a mostrar. Podemos cambiarlo a nuestro antojo, pero es recomendable no poner un valor excesivo para evitar el retardo en la carga de la página

  • Busca ahora el código el siguiente texto e incluye lo marcado en negrita

    <b:if cond=\'data:post.labels\'>
      <data:postLabelsLabel/>
      <b:loop values=\'data:post.labels\' var=\'label\'>
      <a expr:href=\'data:label.url\' rel=\'tag\'>
        <data:label.name/>
      </a>
    <b:if cond=\'data:label.isLast != "true"\'>,</b:if>
    <b:if cond=\'data:blog.pageType == "item"\'>
      <script expr:src=\'"/feeds/posts/default/-/" + data:label.name +
    "?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=10"\' type=\'text/javascript\'/>
    </b:if>

    </b:loop>
    </b:if>

  • Buscamos de nuevo en el código el texto <div class=\'post-footer-line post-footer-line-3\'> o <div class=\'post-footer-line post-footer-line-3\'> y a continuación escribimos el siguiente fragmento de código:

    <!-- Muestra las entradas relacionadas -->
    <b:if cond=\'data:blog.pageType == "item"\'>
      <div class=\'post-footer-line post-footer-line-4\'>
      <h3 style=\'margin-bottom:6px\'>Entradas relacionadas: </h3>
      <script type=\'text/javascript\'>
        removeRelatedDuplicates();
        printRelatedLabels();
      </script>
    </div>
    </b:if>

Esta modificación del código no se visualiza en la vista previa ya que aparece en las páginas individuales de cada post, por lo que para ver si ha ido todo bien tendremos que pulsar guardar y Ver blog.

Desventajas
  • Al igual que el otro método, es posible que ralentize un poco la carga del blog, sobre todo si indicamos un número de enlaces demasiado alto

10 comentarios:

  1. Si lo sé, es un coñazo todo esto, pero no os creais que lo mio me ha costado explicarlo y escribirlo todo! otro día escribo algo de verdad.

    ResponderEliminar
  2. Hola! pues yo lo primero lo he visto en algunos blogs y la verdad que alguna vez pensé en ponerlo pero es que a mí me saca de quicio cuando un blog tarda en cargar, pero una cosa, yo no tengo que hacer nada más que poner eso?? el programa elige él sólo los post que va a enlazar? te hablo de la primera opición que explicas. Besitos :**

    ResponderEliminar
  3. Hola Vir, pues en ninguno de los dos casos tienes que poner nada, en base a etiquetas y contenido busca solas las relaciones.

    A mi me parece que esto no puede hacer que la carga tarde mucho mas, si no es tan fácil como probarlo. Ponlo, y mira a ver si tarda mas en cargar o no, que tarda mas? pues no cuesta nada quitarlo.

    ResponderEliminar
  4. Cuando tenga un rato de relax lo voy a probar, si es así de sencillo voy a ver qué tal, porque además mogollón de veces hablo de cosas relacionadas con otras anteriores que muchas veces si no has leido las primeras dificilmente se entenderán las segundas, me viene genial sinceramente!, un besito :*

    ResponderEliminar
  5. Sólo vengo para reconocerte el esfuerzo.
    Mi blog es un desastre, pero no me quiero liar más. Andaba interesado en esta cosa de los artículos relacionados y creí que era más sencillo aún, pero no encontraba yo el sitio de blogger al que había que pinchar para que saliera.
    Quizá lo haga algún día, pero es que...
    Bueno que muchas gracias por las sugerencias y por el trabajo.

    ResponderEliminar
  6. Amando te recomiendo que lo hagas porque yo lo he hecho esta mañana en menos de un minuto y por lo que estoy viendo se están leyendo entradas antiguas que si no fuera por esos enlaces nadie entraría, un saludo.
    Gracias Nekooo muas!!

    ResponderEliminar
  7. Muchas gracias a los dos.
    La verdad es que siempre me da un poco la impresión de perder un poco el tiempo con estas entradas, porque es algo tan poco personal que realmente no aporta nada, pero son cosas que me gusta compartir.

    Amando, si estás interesado en los enlaces relacionados utiliza la primera de las formas que te doy, verás que es muy rápido, mucho mas hacerlo que escribirlo.

    Vir, de verdad ya has conseguido que la gente acceda a entradas antiguas?? genial! me das envidia!! jajaja igual lo acabo cambiando y poniendo el de imágenes que parece que es mas vistoso... di que tu tienes muchos lectores y muchas entradas interesantes.

    ResponderEliminar
  8. Por cierto que si alguien quiere que le eche una mano con el diseño del blog toquiñando el código, que me pase el xml de la plantilla y lo hago encantada.

    ResponderEliminar
  9. sííí según lo que veo, a través de esos enlaces han entrado en la Revolución francesa y Numancia, es que a mi me viene muy bien la cosa ésta.
    A mi me gustaría tener una plantilla con motivos históricos pero a la vez estoy tan acostumbrada a ésta y le tengo tanto cariño a la rata!

    ResponderEliminar
  10. Wohh wohh wohhh!! Otra cosa que tengo pendiente para poner en mi blog!

    Gracias Neko como te lo curras! :D

    ResponderEliminar

Si aún respiras... demuestramelo