LightWindow en los comentarios

Hace tiempo había visto al forma en que a Lacrax se le había ocurrido utilizar LightWindow para mostrar los comentarios del blog en una ventana modal de tal manera de librarse, aunque sea parcialmente, de la bendita página blanca de Blogger.

Si no lo había probado era por varias razones, falta de tiempo, cosas que se acumulan, la pereza y, sobre todo, no estar seguro si quería cambiar el método de mostrar e ingresar los comentarios.

Recientemente, una pregunta me hizo volver sobre el tema para ver si existía una forma de conservar el esquema normal y además, agregar el nuevo modo. Mi capricho: tener ambas cosas.

Para quien no lo haya visto, la idea es que, en la página principal, al hacer click en el enlace que nos lleva a la página para ingresar comentarios, en lugar de abrirse en otra ventana, se abrirá en una ventana de tipo modal. Esto, es bastante sencillo, basta cambiar el enlace ya que LightWindow nos permite abrir páginas externas. Lo mismo pude decirse de las páginas individuales, en lugar de abrir la ventana con el formulario, al hacer click la podemos abrir con LightWindow. La navegación se hace más fluida.

No tuve problemas para implementar el truco pero, el resultado no me convencía (ver captura). Siguiendo uno de los comentarios, fui a ver cómo lo había implementado La Bloguería que también recomendaba el sistema y vi que el resultado era distinto (ver captura). La diferencia entre uno y otro era simple, tenía que ver con la forma en que estaban establecidas las opciones de Blogger. En CONFIGURACIÓN | COMENTARIOS entre otras cosas, podemos seleccionar si los comentarios se muestran en una ventana emergente (pop-up) o no.

¿Mostrar comentarios en una ventana emergente? Sí No

Si bien, para implementar el truco, aconsejan establecer NO como opción, en La Bloguería está establecida como SI porque, además de este, utiliza otro truco: Incrustar los comentarios en los posts y ese método, requiere que así sea. En realidad, eso explica las diferencias.

La famosa página blanca tiene los comentarios a la izquierda y el formulario de envío a la derecha pero, cuando se abre como pop-up, ambos sectores están uno sobre el otro con lo que desaparece la barra de desplazamiento horizontal y entonces, podemos establecer el ancho de manera sencilla.

Claro que esto hace las cosas más engorrosas si es que uno quiere tener ambas posibilidades. Hay que encontrar una forma de mostrar los comentarios en un pop-up pero sin cambiar la configuración. Por supuesto, si para alguien esto no es una necesidad, se aplican los cambios y no hay nada más que hablar. Pero, sigo adelante, complicándome la vida.

El enlace que genera Blogger tiene este formato:

http://www.blogger.com/comment.g?blogID=XXXXXXX&postID=XXXXXXX

y cuando se abre en una ventana emergente, sólo se agrega un parámetro:

http://www.blogger.com/comment.g?blogID=XXXXXXX&postID=XXXXXXX&isPopup=true

Así que hay que agregarle &isPopup=true al enlace normal y eso, lo podemos hacer con JavaScript.

En la plantilla hay dos enlaces que podemos interceptar. Uno es el que se muestra en la página principal debajo de cada post y donde, normalmente, se muestra la cantidad de comentarios:

<a class='comment-link' expr:href='data:post.addCommentUrl'
expr:onclick='data:post.addCommentOnclick'>
<b:if cond='data:post.numComments == 1'>
1 <data:top.commentLabel/>
<b:else/>
<data:post.numComments/> <data:top.commentLabelPlural/>
</b:if>
</a>

El otro, es el que se muestra en las páginas individuales y que simplemente invita a crear un comentario:

<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
<data:postCommentMsg/>
</a>

Las variantes de estos códigos son muchísimas, para encontrarlos, lo mejor es buscar el siguiente dato:

data:post.addCommentUrl

que es un código de Blogger que genera la direcciòn URL de la página de comentarios:

http://www.blogger.com/comment.g?blogID=XXXXXXX&postID=XXXXXXX

Ahora, en lugar de cambiar esos enlaces, voy a agrega un pequeño script que creará otro enlace, igual al anterior pero donde se agregará el parámetro para que sea de tipo pop-up y se abrirá en una ventana con LightWindow:

<script type='text/javascript'>
var viejoEnlace = &quot;http://www.blogger.com/comment.g?blogID=XXXXXXXX&amp;postID=<data:post.id/>&quot;;
var nuevoEnlace = viejoEnlace + &quot;&amp;isPopup=true&quot;;
var enlacePopup = &quot;&lt;a class=\&quot;lightwindow\&quot; href=\&quot;&quot; + nuevoEnlace + &quot;\&quot; params=\&quot;lightwindow_width=480,lightwindow_height=600, lightwindow_loading_animation=true\&quot;&gt;TEXTO ENLACE&lt;/a&gt;&quot;;
document.write(enlacePopup);
</script>

En estos momentos lo he incluido en el blog y veremos como funciona.

He reemplazado el texto por una imagen y, en ese caso, hay que TEXTO ENLACE por lo siguiente:

<img src=\"http://.......laImagen\"/>

El tamaño de la ventana que se abre se define con estos dos datos:

lightwindow_width=480
lightwindow_height=600

Sería interesante que las páginas individuales pudieran actualizarse apenas ingresado el comentario pero, no tengo idea de cómo conseguirlo.

ACTUALIZACIÓN:

Un comentario de BlogdeShowmatch me obliga a hacer una modificación.

Es una alternativa interesante y muy sencilla. Se trata de abrir la ventana y directamente posicionar la ventana en el formulario de ingreso de comentarios. Para eso, sólo hay que agregar el nombre del div que contiene el área de textos:

var nuevoEnlace = viejoEnlace + "&isPopup=true#form"

En mi caso, sólo lo agregué en los enlaces de las páginas individuales pero también puede hacerse con los enlaces de la página principal.