miércoles, 15 de junio de 2011

Agregar pop-up para comentarios

CUENTAGOTAS pregunta como poner los comentarios en un pop-up al mismo tiempo que usamos el formulario incrustado en las páginas individuales de Blogger yademás, tener un enlace adicional en el home que permita agregar un comentario sin tener que abrir esas páginas individuales. En este caso, la pregunta se refiere fundamentalmente a que, hasta hace poco, era algo que se hacía utilizando una ventana modal y que, en el caso de LightWindow, es algo que ya no funciona.

No sé por qué no funciona más ni sé si con otro tipo de scripts pasa lo mismo; aparentemente, hay alguna clase de bloqueo que impide abrir ciertas direcciones de Blogger en un IFRAME que es lo que utiliza ese tipo de scripts y lo mismo ocurre con la variación que permite agregar Reply ya que usa el mismo criterio.

Como siempre me pareció bueno mantener esa posibilidad y para no andar dando vueltas tratando de entender lo que probablemente jamás pueda entender, decidí eliminar la sofisticación y usar el viejo sistema de pop-up y para eso, uso una función de JavaScript que agrego antes de </head>:
<script type='text/javascript'>
//<![CDATA[
function comPopUp(cual) {
var wW = (screen.width-480)/2;
var wH = (screen.height-550)/2;
var enlacePopup = "<a class='comPopUp' ";
enlacePopup += "onclick='javascript:window.open(this.href, \"bloggerPopup\", \"toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=480,height=550,left=" + wW + ",top=" + wH + " \"); return false;'";
enlacePopup += "href='https://www.blogger.com/comment.g?blogID=NUESTRO_ID&postID=" + cual + "&isPopup=true'>";
enlacePopup += " TEXTO O IMAGEN ";
enlacePopup += "</a>";
document.write(enlacePopup);
}
//]]>
</script>
donde NUESTRO_ID es un número que nos identifica en Blogger y que puede verse en la barra de direcciones del navegador cuando editamos la plantilla o creamos entradas:

http://www.blogger.com/html?blogID=0000000000

los valores 480 y 550 son el ancho y alto de esa ventana que, por supuesto, puede ser dimensionada de cualquier otra forma

y TEXTO O IMAGEN es eso que mostraremos; por ejemplo, un texto:

enlacePopup += "abrir comentarios en un pop-up";

o bien una imagen:

enlacePopup += "<img src='URL_imagen' />";

Ahora, hay que llamar a la función que lo único que hace es crear un enlace así que la agregaremos allí donde queremos verlo, por ejemplo, en el footer de las entradas:
<script type='text/javascript'> comPopUp(&#39;<data:post.id/>&#39;); </script>
El enlace generado tiene una clase llamada comPopUp así que podemos controlar sus detalles con CSS:
a.comPopUp {
/* propiedades del enlace */
}
a.comPopUp:hover {
/* efecto hover sobre el enlace */
}

No hay comentarios:

Publicar un comentario