miércoles, 22 de enero de 2014

Gadget de comentarios recientes para blogspot

Hace unos días me daba cuenta de que en mi blog de blogspot, de nuevo se volvía a 'estropear' el gadget de comentarios recientes. Como en ocasiones anteriores, el motivo de que se haya estropeado el plugin es que para funcionar necesitaba archivos externos y al retirar alguno de ellos el código que genera los comentarios recientes deja de funcionar, pero ya hay solución.


Una rápida búsqueda en google me llevó aqui a una rápida solución. En esta ocasión, dado que la solución que nos dan lo que hace es formatear directamente la feed de comentarios de nuestro propio blog, la he modificado un poco para tener todo el código en un sólo bloque, retirando las referencias a archivos externos.

A partir de aquí, me limito a traducir las instrucciones del enlace original para que podáis incluir los comentarios recientes en vuestro blog de blogspot:

Paso 1: Entra e identifícate en tu blog. Desde la administración del mismo pincha en

Paso 2: En la ventana emergente elige

Paso 3: En la siguiente ventana, en la parte de contenido pega el siguiente código, recuerda que donde pone "TUBLOGAQUI.blogspot.com" debes sustituirlo por la dirección de tu propio blog:

<script style=text/javascript>

  function showrecentcomments(json) {

    for (var i = 0; i < a_rc; i++) {

      var b_rc = json.feed.entry[i];

      var c_rc;

      if (i == json.feed.entry.length) break;

      for (var k = 0; k < b_rc.link.length; k++) {

        if (b_rc.link[k].rel == 'alternate') {

          c_rc = b_rc.link[k].href;

          break;

        }

      }

      c_rc = c_rc.replace("#", "#");

      var d_rc = c_rc.split("#");

      d_rc = d_rc[0];

      var e_rc = d_rc.split("/");

      e_rc = e_rc[5];

      e_rc = e_rc.split(".html");

      e_rc = e_rc[0];

      var f_rc = e_rc.replace(/-/g, " ");

      f_rc = f_rc.link(d_rc);

      var g_rc = b_rc.published.$t;

      var h_rc = g_rc.substring(0, 4);

      var i_rc = g_rc.substring(5, 7);

      var j_rc = g_rc.substring(8, 10);

      var k_rc = new Array();

      k_rc[1] = "Jan";

      k_rc[2] = "Feb";

      k_rc[3] = "Mar";

      k_rc[4] = "Apr";

      k_rc[5] = "May";

      k_rc[6] = "Jun";

      k_rc[7] = "Jul";

      k_rc[8] = "Aug";

      k_rc[9] = "Sep";

      k_rc[10] = "Oct";

      k_rc[11] = "Nov";

      k_rc[12] = "Dec";

      if ("content" in b_rc) {

        var l_rc = b_rc.content.$t;

      } else if ("summary" in b_rc) {

        var l_rc = b_rc.summary.$t;

      } else var l_rc = "";

      var re = /<\S[^>]*>/g;

      l_rc = l_rc.replace(re, "");

      document.write('<div class="rcw-comments">');

      if (m_rc == true) document.write('On ' + k_rc[parseInt(i_rc, 10)] + ' ' + j_rc + ' ');

      document.write('<span class="author-rc"><a href="' + c_rc + '">' + b_rc.author[0].name.$t + '</a></span> escribió');

      if (n_rc == true) document.write(' en ' + f_rc);

      if (o_rc == 0) {

        document.write('</div>');

      } else {

        document.write(': ');

        if (l_rc.length < o_rc) {

          document.write('<i>&#8220;');

          document.write(l_rc);

          document.write('&#8221;</i></div>');

        } else {

          document.write('<i>&#8220;');

          l_rc = l_rc.substring(0, o_rc);

          var p_rc = l_rc.lastIndexOf(" ");

          l_rc = l_rc.substring(0, p_rc);

          document.write(l_rc + '&hellip;&#8221;</i></div>');

          document.write('');

        }

      }

    }

  }

</script>

<script style=text/javascript>


  var a_rc = 3;

  var m_rc = false;

  var n_rc = true;

  var o_rc = 100;


</script>

<script src=http://TUBLOGAQUI.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments></script>

<span id=rcw-cr></span> 

<style type=text/css>

  .rcw-comments a {

    text-transform: capitalize;

  }

  .rcw-comments {

    border-bottom: 1px dotted;

    padding-top: 7px!important;

    padding-bottom: 7px!important;

  }

  #rcw-cr {

    font-family: Arial, Tahoma;

    font-size: 9px;

    padding-top: 7px;

    display: block;

  }

</style>

Paso 4: Hay algunas variables que te permiten personalizar un poco el gadget que son:
- a_rc=5, cambia el 5 por el número de comentarios que quieras mostrar.
- m_rc=false, cambia false por true si quieres que se incluya la fecha de los comentarios en las citas del gadget.
- n_rc=true, cambia true por false si quieres ocultar los títulos del artículo en el que se hizo el comentario en cada cita.
- o_rc=100, cambia el 100 por el número de caracteres que quieras que se muestren en cada cita.

Paso 5: Pon un título, haz click en salvar y ya has terminado.

16 comentarios:

  1. Jejeje genial. Es como un meta-post de un meta-blogs sobre blogs. XD

    ResponderEliminar
  2. ¡No se me había ocurrido! Con tanta meta-información ahora me recuerda un poco a PL :P

    ResponderEliminar
  3. Ummm, el formateo del script es cojonudo. Lo dota de una legibilidad sin parangón... :PPP

    ResponderEliminar
  4. Hmmm a la hora del formateo hay que seprar bloques de html, javascript y css y queda un poco feo. A ver si me pongo y encuentro otra forma mejor.

    ResponderEliminar
  5. Hola mozos, lo he retocado un poco. Aunque juntándolo todo se ve peor, ganamos un poco en usabilidad para que el código sea fácilmente copy-pasteable.

    Por cierto lo he puesto aqui también porque hace días que en lugar de los comentarios recientes sale 'Se ha producido un error en este gadget.' :P

    ResponderEliminar
  6. Hombre, hombre, mucho más bonito, dónde va a parar... :D

    Gracias por arreglarlo aquí. Pensé en hacerlo esta mañana en algún rato libre, pero no ha habido "rato libre".

    ResponderEliminar
  7. Aún puedes practicar con tu blog :P que hace mucho que no vemos los comentarios a la dcha :D

    ResponderEliminar
  8. Mezcla de HTML y Javascript arreglado. Queda el CSS pero creo que para eso habria que hacer un fork del Syntaxhighlighter y programarselo uno mismo.
    Aqui dejo el link por si alguno esta interesado:

    https://github.com/alexgorbatchev/syntaxhighlighter

    ResponderEliminar
  9. Tienes razón Gandalf, tengo que arreglar lo de los últimos comentarios en "Sup3ia".
    Lo haré..., uno de estos días ¬__¬U

    Por cierto mucho más bonito el código ahora. Gracias por vuestros esfuerzos :)

    ResponderEliminar
  10. Muchas gracias por el aporte, me sirvió, saludos.

    ResponderEliminar
  11. Muchas gracias. Me ha funcionado.

    ResponderEliminar
  12. Hola intente ponerlo pero solo me salen 3 comentarios tal como lo tienes en tu Blog,a pesar de que le coloque 5, 7, 12... Ningun comentario mas alla de tres (3) me salio Muy bueno el codigo, sencillo y útil para el Blog pero no se por que este detalle...

    ResponderEliminar