Comentarios desplegables en Blogger | Oloblogger Si a veces comprimimos las entradas ( sumarios ) y otras los resultados de una búsqueda de entradas ...

15 de diciembre de 2011

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?

tiny frogComo 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
Copy URL

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

follow us in feedly

12 comentarios :

  1. disculpa..no se bien si el problema es solo mio? o algo esta mal..pero no puedo ingresar a la parte de diseños! sabes algo al respecto?

    ResponderEliminar
  2. Sé que ahora mismo he probado y me da error bX-l4u1mh Notiqlos. Ese tipo de cosas suelen ser temporales.

    ResponderEliminar
  3. Estupenda idea! Me parece realmente útil para los blogs (afortunados ellos, como bien dices) que reciben muchos comentarios y además largos. Me lo apunto y es probable que lo añada cuando tenga tiempo, aunque solo sea por experimentar. Gracias!

    ResponderEliminar
  4. Felipe OI, hay al menos UNO que sé que le va a venir muy bien esto. Y para experimentar, sin duda que te va a servir ;)

    ResponderEliminar
  5. !Esta es la solución que yo había estado buscando¡ Solamente le expliqué a Oloman la situación que se me presentaba y listo... Él se encargo de solucionarlo... Estoy simplemente sorprendido... Con su genio, con su altruismo y con su grandiosa voluntad... sin palabras... Muchísimas gracias Oloman. Ya tomé nota y en cuanto tenga el tiempo me dispondré a implementar este truco...

    ResponderEliminar
  6. Chiknaui, no hay de qué.

    Rafael, pues a ver si eres más rápido que yo contestanso comentarios y preparando entradas, que es bastante fácil implementar esto ;)

    ResponderEliminar
  7. yo tengo un problema oloman porque no encuentro esta linea
    p>
    expr:id='data:comment.id'>


    solucion? xD

    ResponderEliminar
    Respuestas
    1. Ninguna. Este sistema quedó obsoleto desde que existen los comentarios anidados. Si no tienes esa referencia en la plantilla no lo puedes hacer con esto.

      Eliminar
  8. Que interesante todo esto, solo que yo soy neófito en esto y lo que quiero que los comentarios estén justificados. Si se dan una vuelta a mi blog verán que es sencillo y me gustaría mejorar su apariencia http://leyautonoma.blogspot.com

    ResponderEliminar
    Respuestas
    1. Tendrías que poner en tu plantilla, en la parte CSS (entre las etiquetas SKIN) esto:
      #comments-block {text-align: justify;}

      Y si quieres los nuevos comentarios que son estos que estás viendo, visita esta entrada.

      Eliminar
  9. wow!! me encanta como están ordenados los comentarios y lo redondeado de las fotos y el texto dentro de un recuadro, solo falta lo justificado del texto, me gusta el orden y la estética y si tuviera la habilidad de modificar mi blog como el pintor al lienzo. felicitaciones por la excelencia de tu trabajo.-

    ResponderEliminar