Comentarios a través de Lytebox

Llevaba tiempo que quería hacer esto, pero ha sido una de las entradas más recientes de Vagabundia la que me ha dado el empujoncito definitivo: se trata de la visualización del formulario incrustado de comentarios a través de una ventana modal.

Pero a diferencia de JMiur, que lo hace con la aparatosa, aunque elegante LightWindow, yo lo he hecho con la más ligera y sencilla ventana modal Lytebox. Sistema que llevo utilizando hace tiempo en este mismo blog, que aprendí gracias a Gem@.

Para empezar, nos descargaremos los archivos necesarios para hacerlo funcionar desde la web oficial de Lytebox, o desde este enlace directamente. El paquete contiene un script (lytebox.js), una hoja de estilos (litebox.css) y una carpeta (images) con las imágenes necesarias para los botones de navegación.

Lo primero que hay que hacer es alojar las imágenes. Yo las subí en un directorio aparte que me he hice en Google Sites, pero imagino que también funcionaría alojando las imágenes en Picasa, por ejemplo, aunque a mi me ha resultado más cómodo en Google Sites. En el siguiente párrafo entenderéis por qué.

Después conviene editar el archivo css, antes de subirlo, con las nuevas rutas completas de las imágenes que acabamos de alojar, pues si no, no se verán luego los botones de navegación al abrirse la ventana modal. Es tan sencillo como buscar los nombres de las imágenes, por ejemplo, close_grey.png, y cambiar lo que hay en el archivo css original, que es images/close_grey.png por la ruta completa correspondiente. Y así con todas las imágenes.

Si utilizáis Google Sites es más sencillo: bastaría con crear un subdirectorio en un nivel superior de donde vayáis a alojar los archivos de Lytebox llamado images, subir ahí los botones y ya está. No sería necesario modificar nada en el archivo css.

Una vez hechos (o no) los cambios en la hoja de estilos, el siguiente paso es añadir la llamada a ambos archivos en la plantilla:

<script language='javascript' src='RUTA_COMPLETA_DEL_ARCHIVO_lytebox_source.js' type='text/javascript'/>

<link href='RUTA_COMPLETA_DEL_ARCHIVO_lytebox.css' media='screen' rel='stylesheet' type='text/css'/>


Se trata de cambiar completamente la partes...

RUTA_COMPLETA_DEL_ARCHIVO_lytebox_source.js
RUTA_COMPLETA_DEL_ARCHIVO_lytebox.css

...por las rutas correspondientes que obtengáis de vuestro servicio de alojamiento.

Seguidos todos los pasos hasta ahora, ya tenemos una elegante y ligera ventana modal multiuso. Gem@ explica mucho mejor que yo cómo utilizarla en estas entradas: 1|2|3. Yo me voy a ceñir a su utilidad para abrir el formulario de comentarios, tal como decía al inicio de esta entrada.

Hice un intento parecido hace tiempo, pero con el formulario clásico mostrado a través de Lytebox. Pero como no resultaba demasiado estético, lo eliminé y dejé los pop-up hasta ayer mismo. Cuando hice aquello, os avisé de los cambios, pero no expliqué cómo lo hice, aunque cité mis fuentes de inspiración. Pero esta vez lo voy a desvelar.

Voy a empezar mostrando el código que he empleado para generar los enlaces que hay en la actualidad debajo del mensaje del formulario:


<!-- Mostrar varias opciones comentarios -->
<center><p><b>
<script type='text/javascript'>

var EnlaceFrame = "http://www.blogger.com/comment-iframe.g?blogID=XXXXXX&amp;postID=<data:post.id/>";

var clasico = "http://www.blogger.com/comment.g?blogID=XXXXXX&amp;postID=<data:post.id/>&isPopup=false";

var popup = "http://www.blogger.com/comment.g?blogID=XXXXXX&amp;postID=<data:post.id/>&isPopup=true";

var enlaceVmodal = "<b><a rel='lyteframe' title='Si no ves el formulario, pincha aquí para comentar.' rev='width: 550px; height: 300px; scrolling: yes;' href='" + EnlaceFrame + " '>Ventana modal</a></b>";

var enlaceclasico = "<b><a target='_blank' title='Aqui puedes comentar al estilo clásico de Blogger.' href='" + clasico + "'>Sistema clásico</a></b>";

var popupjs = "onclick='javascript:window.open(this.href, \"bloggerPopup\", \"toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=400,height=450\"); return false;'";

var enlacepopup = "<b><a " + popupjs + "title=\"Aquí puedes comentar en ventana emergente.\" href=\"" + popup + "\" \">Pop up</a></b>";

document.write(enlaceVmodal + ' | ' + enlaceclasico + ' | ' + enlacepopup);

</script>
</b></p></center>
<!-- Fin Mostrar varias opciones comentarios -->




Este código lo tengo puesto justo a continuación del mensaje que encabeza el formulario de comentarios, que se localiza, expandiendo plantillas de artilugios, con la línea <data:blogCommentMessage/>.

Este script lo que hace es tomar la dirección del formulario incrustado de la entrada correspondiente, basándose en la ID del post (<data:post.id/>) y la del blog, que en el código está puesto como XXXXXX y que deberíais cambiar por la ID del vuestro.

Y con esa dirección, genera el código para crear el enlace que Lytebox necesita para abrir la ventana modal (imagen superior). Ese código generado por document.write viene a ser algo así:

<b><a rel="lyteframe" title="Si no ves el formulario, pincha aquí para comentar." rev="width: 550px; height: 300px; scrolling: yes;" href="http://www.blogger.com/comment-iframe.g?blogID=XXXXXX&postID=YYYYYY">Comentar en ventana modal</a></b>

El código incluye el tooltip explicando para qué es el enlace. Y ya puestos, el mismo script genera el enlace para facilitar los comentarios con el formulario clásico de Blogger:

Más adelante lo completaré con otro enlace más para los pop-up, pero eso será para mi nueva plantilla, que espero tener terminada en pocas semanas.

Espero que a alguien le resulte útil o, al menos, interesante. Este no es uno de esos magníficos blogs de ayuda que hay en Internet, ni lo pretende ni de lejos, pero me apetecía compartir este truco con vosotros y eso he hecho.

Bueno, ya sabéis: probadlo, y de paso me contáis cualquier problema que encontréis.

Actualización (21/02/10): se ha añadido el enlace a pop up y se han corregido unos errores en el código. Para otra entrada se optimizará el código para que haga lo mismo en menos líneas.