Blogger Hacking: Comments Incrustrados + Popup

Hoy me comentó mi novia de un mini debate que se armó en lo de Halle respecto de qué es mas útil/cómodo, si tener los comentarios en una ventana emergente (popup), o incrustrados debajo del post en la página del mismo, al estilo Wordpress (también conocido en la jerga de la calle como "con el formulario").

Esto me parecía haberlo visto en otro lado, y efectivamente..., sólo que en esa ocasión el resultado no fue muy bueno. Con buen criterio e intentando hacer la gran Salomón, Halle encontró la forma de darle a sus lectores ambas opciones de manera tal de dejar contentos a todos.

Al poner los comentarios por defecto con el método de formulario, el secreto para al mismo tiempo permitir los comments en popup lo encontró simplemente usando esta URL:

https://www.blogger.com/comment.g?blogID=2751746494143071665&postID=7706357119646989421&isPopup=true

Con un poco de sentido común deducimos:

• https://www.blogger.com/comment.g: la URL de la página que se carga en el popup con los comentarios del post.


• ?blogID=2751746494143071665: comienza la lista de argumentos que Blogger le pasa a esa página. El primero de ellos es el BlogID, que identifica el blog del cual se quieren ver los comentarios.


• &postID=7706357119646989421: el segundo de los argumentos es el postID, que como el nombre indica, identifica el post en particular perteneciente al BlogID anterior, del que quiero ver los comentarios.


• &isPopup=true: y finalmente, un último argumento que simplemente hace que la página de los comentarios se abra en una nueva ventana.

Halle tuvo dos problemas:

1. El Javascript que usa para abrir esta página en una nueva ventana, abría varias ventanas consecutivas si el lector hacía click en varios enlaces de comentarios de posts diferentes. Lo deseado es que si hay una ventana de comentarios ya abierta, se use esa misma en lugar de una nueva, para no llenar de ventanas el escritorio del sufrido usuario.


2. Amén del punto anterior, cada ventana nueva de comentarios que se abría, no "refrescaba" la lista de comentarios, y simplemente traía los mismos una y otra vez, independientemente del post seleccionado.

Los que me conocen saben que está en mi naturaleza no dejar pasar un reto, sobre todo si a tecnología se refiere; y cuando mi novia me explicó la situación, una fuerza extraña me impulsó a resolver el (los) problema(s).

Habiendo peleado unas dos horas contra lo que parecía ser algo muy simple, finalmente encontré la solución; y aquí la comparto con ustedes:

1. Configurar los comentarios de nuestro blog para que "por defecto" vayan incrustrados. Y digo por defecto porque en realidad el usuario medio no necesita saber cuál es el método original y cual es el hack.


2. Vamos a editar el HTML de nuestro template. No se asusten que es fácil. Nos dirigimos a Diseño->Edición de HTML y seleccionamos "Expandir plantillas de artilugios". Hcemos click en cualquier parte del código en la caja de texto, y usando la opción Buscar de nuestro navegador (Ctrl+F), escribimos lo siguiente:
   
data:post.allowComments



3. El código debería verse como el que sigue. El suyo puede variar dependiendo de la configuración del blog y los cambios que le hayan hecho al template, pero lo al menos debería darles una idea de dónde comienza y termina el bloque de código que vamos a modificar:
   
<b:if cond="data:post.allowComments">

<a class="comment-link" href="data:post.addCommentUrl" onclick="data:post.addCommentOnclick"><b:if cond="data:post.numComments == 1">1 <data:top.commentlabel><b:else><data:post.numcomments> <data:top.commentlabelplural></data:top.commentlabelplural></data:post.numcomments></b:else></data:top.commentlabel></b:if></a>

<a class="comment-link">Comentar (estilo Wordpress)</a>
</b:if>



4. Inmediatamente debajo de <b:if cond="data:post.allowComments"> agregamos el siguiente script en javascript:
   
<script language='javascript'>
function popupComment(poid)
{
var comuri = &quot;https://www.blogger.com/comment.g?blogID=HERE_GOES_THE_BLOG_ID_NUMBER&amp;postID=&quot; + poid + &quot;&amp;isPopup=true&quot;;

window.open(comuri,&#39;commentpopup&#39;,&#39;titlebars=0, toolbar=0,scrollbars=1,location=0,statusbar=0, menubar=0,resizable=1,width=400,height=450&#39;);
}
</script>

   Tenemos que reemplazar el obvio HERE_GOES_THE_BLOG_ID_NUMBER del código de arriba con el BlogID del blog respectivo. ¿Cómo lo encontramos?, pues bien, cargamos el blog del que deseamos conocer el ID, y con un click derecho en la página elegimos "Ver código fuente" (el nombre y la ubicación de la opción puede variar según el navegador. Chicos, no intenten esto en IE).
   Nuevamente Ctrl+F y buscamos "blogID=". El número que sigue al igual es el BlogID.
   
   En el script usamos el método "window.open", el que crea una nueva ventana (duh). El primer argumento que recibe (comuri) contiene la URL que armamos en la línea inmediatamente superior. El segundo argumento resuelve el problema 2); ya que le da un nombre propio a la ventana para que podamos volver a llamarla nuevamente y cambiar su contenido.


5. Un enter mas abajo, tenemos que agregar el link que abrirá el popup llamando al script que acabamos de crear:
   
<a class='comment-link' expr:href='&quot;javascript:popupComment(&quot; + &quot;\&quot;&quot; + data:post.id + &quot;\&quot;&quot; + &quot;)&quot;'>

   Noten como al llamar a la función popupComment, estamos pasando como argumento el postID actual correspondiente. De esta manera el link cambiará automáticamente para cada post del blog. Esto resuelve el problema 1).
   
   Ahora bien, este elemento es un link común y corriente -de acuerdo, un poco más complicado de leer-, pero como todo tag HTML, necesita una apertura y un cierre. El tag <a> tiene tres partes:
   
   
   1. <a href="" ... : La apertura del tag, y el destino del enlace en el href.
   
   
   2. >Texto del Link: El cierre de la primer parte del elemento y el texto (o imagen u objeto) que convertiremos en Link.
   
   
   3. </a>: El cierre del tag.
   
   Hasta ahora sólo hicimos la primer parte.
   
   Para la segunda parte, es decir el texto descriptivo del link, tendrán que ustedes tomar una decisión. Pueden o bien dejar los comentarios "por defecto" como popups, o como formulario. En mi ejemplo el texto por default de Blogger dirigirá al popup, y el de formulario será un texto fijo escrito diréctamente en el código de la plantilla (no podremos cambiarlo desde las opciones de "Elementos de la página").
   Agregamos luego el tag de cierre. Veamos:
   
<b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>

<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>Comentar sin popup</a>

   En caso de que quieran hacer al reves, simplemente invertimos el contenido del enlace:
   
Comentar con popup</a>

<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>



6. Finalmente, todo el bloque de código nos quedaría parecido a esto:
   
<b:if cond="data:post.allowComments">

<script language='javascript'>
function popupComment(poid)
{
var comuri = &quot;https://www.blogger.com/comment.g?blogID=HERE_GOES_THE_BLOG_ID_NUMBER&amp;postID=&quot; + poid + &quot;&amp;isPopup=true&quot;;

window.open(comuri,&#39;commentpopup&#39;,&#39;titlebars=0, toolbar=0,scrollbars=1,location=0,statusbar=0, menubar=0,resizable=1,width=400,height=450&#39;);
}
</script>

<a class='comment-link' expr:href='&quot;javascript:popupComment(&quot; + &quot;\&quot;&quot; + data:post.id + &quot;\&quot;&quot; + &quot;)&quot;'>

<b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>

<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>Comentar sin popup</a>


Guardamos la plantilla, y refrescamos la página del blog para ver los cambios.