Comentarios desplegables en Blogger

Si a veces comprimimos las entradas (sumarios) y otras los resultados de una búsqueda de entradas por categoría ¿por qué no puede ser útil hacer lo mismo con los comentarios?

Como es habitual, esto no será de interés para todos, pero algunos blogs por su temática, reciben frecuentes comentarios de mucha extensión y el propietario del sitio puede tener la necesidad o el gusto, de hacerlos más homogéneos en cuanto a longitud. Para ellos va este truco.

El inconveniente es que supone un añadido más al código del sitio y, en contra de lo que pueda parecer, se tienen que leer y ejecutar más cosas y por tanto se demora algo más la carga.


Con este sistema lo que se consiguen son dos cosas. Por un lado que esa parte de la entrada (comentarios) tenga un aspecto más uniforme, como si estuviera en una tabla, ya que todos los comentarios ocuparán aproximadamente el mismo alto. Por otro, la longitud de la página se reducirá, lo que puede ser también una ventaja para los afortunados blogs que reciben multitud de participaciones de sus lectores.


Lo que haremos será tomar uno por uno todos los comentarios, crear una copia reducida con un máximo de caracteres determinado por nosotros y añadirle un enlace que esconderá este y mostrará el comentario original. El contenido original lo dejaremos tal cual añadiéndole también un enlace para hacer lo contrario.

Para que esto funcione como queremos y que no se vean ambos comentarios a la vez (original y copia reducida), sino alternativamente, usaremos la ya conocida función JavaScript para plegar y desplegar cosas; aquella que usaba las clases visible e invisible. Si no la tenéis de otros trucos similares, la añadís ahora antes de </head>:

<style type='text/css'>
.visible {display:block;}
.invisible {display:none;}
</style>

<script type='text/JavaScript'>
function plegardesplegar(identificacion){
var elemento = document.getElementById(identificacion);
if(elemento.className == &quot;visible&quot;){
elemento.className = &quot;invisible&quot;;
}
else{
elemento.className = &quot;visible&quot;;
}
}
</script>

El siguiente paso será meter en nuestra plantilla el script que hará toda la faena. Lo hemos metido todo dentro de una función, de manera que para usarla sólo será necesario llamarla desde dónde la necesitamos, pasándole los parámetros oportunos. En este caso, aprovechamos que todos los comentarios tienen una ID única que será la que utilizaremos.

Como antes, esto hay que insertarlo antes del </head>:

<style type='text/css'>
.desplegarcomentarios{}
.desplegarcomentarios a {text-decoration: none;}
.desplegarcomentarios a:hover {letter-spacing:2px;text-decoration: none; font-weight: bold;}
</style>

<script type='text/javascript'>
//<![CDATA[
function crearSumarioComentario(cID){

var numcar = 100;

var contenido = document.getElementById(cID);
var strx = contenido.innerHTML;
var original = strx;

if(strx.length>numcar) {
numcar = (numcar < strx.length-1) ? numcar : strx.length-2;
while(strx.charAt(numcar-1)!=' ' && strx.indexOf(' ',numcar)!=-1) numcar++;
strx = strx.substring(0,numcar-1);

strx = '<div class="visible" id="' +cID+ 'uno">' + strx + '... (<span class="desplegarcomentarios"><a href="javascript:plegardesplegar("' +cID+ 'uno");javascript:plegardesplegar("' +cID+ 'dos");" alt="Ver comentario" title="Ver comentario">▼Leer más</a></span>)</div>';

strx = strx+ '<div class="invisible" id="'+cID+'dos">' +original+ '<span class="desplegarcomentarios"><a href="javascript:plegardesplegar("' +cID+ 'uno");javascript:plegardesplegar("' +cID+ 'dos");" alt="Plegar comentario" title="Plegar comentario">◄◄</a></span></div>';
}
contenido.innerHTML = strx;
}
//]]>
</script>

La primera parte simplemente es el estilo de los enlaces para plegar/desplegar y usamos en este caso la clase desplegarcomentarios que se puede modificar al gusto.

La otra parte fácilmente configurable es el contenido de la variable numcar (100 en el ejemplo), justo al comenzar la función del script, que indicará el número de caracteres máximos que admitiremos para no cortar el comentario.


Y para subir nota, explico un poco lo que hace todo ese código. La función crearSumarioComentario recibirá un dato que será la ID del comentario a tratar. Las primeras líneas asignan contenidos a las variables que vamos a necesitar:

• numcar: la longitud máxima del comentario a partir de la cual lo cortaremos
• contenido: obtiene el contenido íntregro del comentario mediante getElementById
• strx: extrae ese contenido y lo guarda
• original: como vamos a ir modificando strx, reservamos aquí el contenido original para utilizarlo más adelante

A continuación viene todo el meollo dentro de un condicional que discrimina los comentarios que son más largos de lo deseado, de los que son más cortos que nuestro límite. Estos últimos no entraran en el condicional y simplemente serán devueltos íntegros.

Dentro del if comenzamos con una rutina que recorta el texto (strx) hasta dejarlo en una cantidad de caracteres igual a numcar. Luego añadimos a esa cadena recortada algo de código HTML para incorporar la clase visible, un ID igual al que tenía pero con el sufijo uno y un enlace con la llamada a la función plegardesplegar (la que comentamos al principio), que servirá para mostrar u ocultar cada uno de los comentarios.

Luego añadimos otro comentario con la misma estructura, pero esta vez con la clase invisible y el contenido original.

Por último tomamos el nuevo contenido creado (o el original si saltamos la condición) y lo reubicamos en el mismo sitio del que lo extrajimos.


Se ha explicado brevemente al principio, pero con todo esto lo que hacemos es sustituir el comentario original por dos comentarios nuevos, uno recortado y otro completo. Ambos llevan respectivamente la clase visible e invisible, por lo que en primera instancia el primero se ve y el otro no. Los enlaces que llevan cada uno de ellos lo que harán será intercambiar esas clases por lo que el visible no se verá y a la inversa. El efecto será más o menos este:

Quiere la boca exhausta vid, kiwi, piña y fugaz jamón. Fabio... ▼Leer más

Quiere la boca exhausta vid, kiwi, piña y fugaz jamón. Fabio me exige, sin tapujos, que añada cerveza al whisky. Jovencillo emponzoñado de whisky, ¡qué figurota exhibes! La cigüeña tocaba cada vez mejor el saxofón y el búho pedía kiwi y queso. ◄◄

Ya esta todo preparado pero si guardamos veremos que no ocurre nada. Todavía nos falta ejecutar desde algún sitio la función y pasarle la ID de todos los comentarios a la función. Para ello buscamos este trozo e insertamos lo que está en negrita, justo antes del cierre del párrafo:

<p>
<div expr:id='data:comment.id'>
<data:comment.body/>
</div>
<script type='text/javascript'>crearSumarioComentario(&quot;<data:comment.id/>&quot;);</script>
</p>

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir

Google+

Twitter

Pinterest

Facebook

Linkedin

Copy URL

Compartir

Google+

Twitter

Pinterest

Facebook

Linkedin

Y muchos más artículos interesantes si nos sigues en...

• Google
• Facebook
• Twitter