miércoles, 3 de febrero de 2010

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.

7 comentarios:

  1. Quedan unos detallitos por pulir, pero ya es plenamente funcional.

    ResponderEliminar
  2. Me gusta mucho, la pena es que en wordpress no se puede poner.

    ResponderEliminar
  3. En Wordpress podéis hacer un montón de cosas que molan más que esta, Josepin. Pero espera a ver el aspecto que le estoy dando en el blog de pruebas, entonces sí que te va a gustar. :-)

    ResponderEliminar
  4. José GDF he estado reorganizando el blogroll y te debia un sitio, estas en la faviconera, pero no es lo mismo, tu hace tiempo me tienes en el blogroll, tienes un blog interesante y siempre estas atento a Blogtecnia, he tenido que acortar un poco el nombre, lo siento. Un abrazo.

    ResponderEliminar
  5. Gracias, Carlos. Te agradezco el detalle. ;-)

    ResponderEliminar
  6. Me lo currare para ponerlo en uno de mis blogs...

    lo había visto ya mencionado en gema y vagabundia

    Buen aporte

    ResponderEliminar
  7. Hola, Ordago. Antes de que te pongas debes saber dos cosas. Tengo que actualizar la entrada con esto mismo, pero te lo digo ya por aquí para que no tengas problemas.

    Si copias y pegas tal cual el código, lo primero es que no está actualizado con lo que tengo ahora (le falta el enlace al pop up), y segundo, te va a salir este mensaje de error cuando intentes guardar la plantilla:

    "No se ha podido analizar su plantilla, porque no está bien formada. Asegúrese de que todos los elementos XML se han cerrado correctamente.
    Mensaje de error de XML: The reference to entity "postID" must end with the ';' delimiter."


    Se soluciona añadiendo "amp;" al símbolo "&" que hay donde pone blogID=XXXXXX&postID=, quedando así:

    blogID=XXXXXX& a m p;postID=

    Y así en los dos o tres sitios en los que sale.

    Se trata de un carácter especial muy complicado, no deja escribirlo en las entradas. Y tampoco en el comentario de ahora. Por eso he separado & a m p ; con espacios. Tú escribelo todo junto cuando lo hagas.

    Si quieres ya te aviso cuando ponga en la entrada el código completo que tengo ahora.

    Suerte si te pones a ello ;)

    ResponderEliminar

IMPORTANTE: los comentarios en este blog están cerrados por tiempo indefinido.

No hay normas especiales para publicar comentarios en este blog. Sólo las básicas: respeta, no insultes, y no hagas SPAM descaradamente. Tampoco se admitirán comentarios que vulneren la Ley. Cualquier aportación, consulta y crítica es bienvenida, a condición de cumplir estas normas básicas.

Si lo que quieres es ponerte en contacto directamente conmigo, dispones para ello de un formulario de contacto.

Nota: solo los miembros de este blog pueden publicar comentarios.