Hace unos meses, Felipe Calvo desarrolló un sistema de comentarios anidados personalizados para blogger. Es genial, porque en vez de obtenerlos vía javascript, los genera el servidor, permitiendo que sean indexados, etc. Ayer me llegó una petición via email por si podía implementar la posibilidad de cancelar la respuesta (yo lo tenía en mi blog, pero de una manera un poco truculenta). Así que me puse a escribir javascript, y aquí está. Considero que tiene algunas ventajas respecto al anterior, y son las siguientes:
  • No generamos funciones ni variables globales.
  • No usamos el DOM más de lo necesario
  • Fomentamos buenas prácticas a la hora de escribir javascript (no añadir eventos via atributos, etc)
  • Añade la posibilidad de cancelar

Cómo implementarlo:

Eliminar algo de código

Tenemos que eliminar el código cuya funcionalidad vamos a reemplazar. Entrar en edición de HTML, expandir plantillas de artilugios, buscar el código JS de Felipe, y eliminarlo. Deberíais de haberlo puesto justo debajo de <b:includable id='comments' var='post'>.
<b:if cond='data:blog.pageType == &quot;item&quot;'>
 ......................
</b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
 ...................
</b:if>
<script type='text/javascript'>
 /* Código bajo Licencia Creative Commons 3.0 (Atribución-No Comercial)
 Felipe @ http://gplus.to/iFelipeCalvo */
...........................
//]]>
</script>

Pequeño cambio en el HTML

Después de esto tenéis que hacer un pequeño cambio en el HTML (agregar un atributo data y eliminar el atributo onclick). Debería ser algo parecido a cambiar:
<a class='reply-action' expr:onclick='&quot;reply(&apos;&quot; + data:comment.id + &quot;&apos;);return false;&quot;' href='#'>Responder</a>
por
<a class='reply-link' expr:data-comment-id='data:comment.id' href='#'>Responder</a>

El Javascript

Ahora sólo hace falta agregarle la funcionalidad con Javascript. Tendremos que buscar el </b:includable> que cierra a <b:includable id='comments' var='post'>, y justo encima insertar el código de este archivo entre etiquetas <script>. Tal que así:
<script type='text/javascript'>
 // ... Contenido del archivo ...
</script>
Sólo deberíais cambiar dos cosas del script, el valor de la variable REPLY_TEXT y el de CANCEL_TEXT, que son los textos que se pondrán cuando se cancela y responde (Responder y Cancelar por defecto). El script está lleno de comentarios, en español y en inglés (el que me lo pidió lo hizo en inglés), para que se vea cómo funciona. Son prescindibles, así que si queréis una versión minificada sin comentarios (ocupa menos espacio), podéis usar este archivo.

Verlo en funcionamiento

En este post podéis verlo funcionando ahora mismo. Y en el resto también .

24 pensamientos en “Añadir la funcionalidad de cancelar a los comentarios anidados de Felipe

  1. Imagen de Rolando el dijo:

    Hola Emilio, acabo de implementar tu script pero cuando doy responder a un comentario anidado y luego cancelar, no me aparece la opción de “Agregar un comentario” al final de todos los comentarios, es decir después de “Publicar un comentario en la entrada”.. Espero puedas ayudarme. Gracias :D

    • Imagen de Emilio Cobos Álvarez el dijo:

      Es la funcionalidad esperada: Al hacer click en “cancelar”, haces el mismo efecto que al hacer click en “Publicar un comentario en la entrada” (por eso desaparece).

      Ese botón aparece sólo cuando le das a “Responder” ;)

  2. Imagen de Ximena el dijo:

    Utilicé el tutorial de Felipe, pero me aparece un error:

    Error al analizar XML, línea 1525, columna 6: The value of attribute “id” associated with an element type “null” must not contain the ‘<' character.

    Dejé un comentario allá pero nadie responde, saludos.

  3. Imagen de Adriana el dijo:

    Yo también implemente el código de Felipe y va de lujo, lo único que no he podido modificar es diferenciar los comentarios del autor del resto de comentaristas, me podrías ayudar en eso??

    • Imagen de Emilio Cobos Álvarez el dijo:

      Son los comentarios antiguos, así que se podría hacer igual que para los comentarios antiguos. Sólo haría falta aplicar el truco (aquí hay uno, pero hay muchos), en la parte del código de Felipe que pone “… aqui va todo el código actual […]”.

      No sé si me he explicado bien, si te queda alguna duda coméntala y trataré de darte más detalles. :)

  4. Imagen de XimenaXimena el dijo:

    Hola.

    Necesito ayuda con los comentarios anidados sin el nuevo código (los de Vagabundia). Quiero ponerlos en mi plantilla, pero con la opción “cancelar” que JMiur muestra, y con los estilos parecidos a los que él utiliza en su página, yo he modificado esos estilos y me quedaron así:

    Estilos: https://sites.google.com/site/archivador69/bloggers/commentsstyles.txt

    Pero el problema es que los códigos de la plantilla no los logro entender muy bien, sobretodo la parte donde dice:

    “Ese código extra es el que NicoNico muestra en su página en color azul. Acá, dejo el código completo del loop tal como lo uso en este blog, con los agregados que requiere en caso de usar scripts o las personalizaciones propias de esta plantilla.”

    ¿Cómo coloco correctamente los códigos? ¿Tengo que modificar algo? Aclaro que no uso emoticones, porque también vi que en el código que muestra Jmiur hay un script en el código para eso. Probé poner los de NicoNico y sí funcionan, pero sin la opción de “Cancelar”, además de que cuando coloco los estilos que te muestro en el enlace, no quedan bien, ya que las classes y ids de NicoNico y Vagabundia son distintos, y ahí me lío :s

    Lo que quiero es poner los comentarios anidados como los de JMiur, con los mismos estilos de él que he modificado, pero el problema es el código que es muy confuso para mí. Si me pudieras explicar paso a paso cómo colocarlos, te lo agradecería bastante.

    Y no le pregunto a JMiur porque responde como extraterrestre, jaa XD

    Espero me puedas ayudar, gracias y saludos.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Puedes usar las siguientes etiquetas y atributos HTML:<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre data-language=""> <ul> <ol> <li>
Para poner código usa <pre data-language="[lenguaje]"><code>[código]</code></pre>, y no olvides escapar el HTMl.