Mostrar últimos comentarios. Otra opción. | Oloblogger Ya se han explicado aquí otros sistemas para mostrar un resumen de los comentarios realizados en las entradas de nuestro blog, pero parece ...

31 de mayo de 2009

Mostrar últimos comentarios. Otra opción.

Ya se han explicado aquí otros sistemas para mostrar un resumen de los comentarios realizados en las entradas de nuestro blog, pero parece que a algunos no os acaban de convencer, como tampoco estos otros.

Aquí usamos un sistema distinto que pensaba ya había explicado, pero revisando los posts compruebo que no era así. Se trata de un SCRIPT que hace tanto tiempo que uso, que no recuerdo de quién era, pero está basado en JSON y lo he retocado un pelín para conseguir ciertas mejoras en la presentación. Puede que a otros les parezcan inconvenientes en lugar de mejoras, pero en fin...

Como es un código no muy largo, creo que lo más práctico es añadirlo directamente desde Elementos de Página --> Añadir Gadget --> HTML, en la barra lateral.

<script type="text/javascript">
function comentarios(json) {
for(var i=0; i < numcom; i++) {
var b_rc=json.feed.entry[i];var c_rc;
if(i==json.feed.entry.length)break;
for(var k=0; k < b_rc.link.length; k++) {
if(b_rc.link[k].rel=='alternate') {
c_rc=b_rc.link[k].href;break;
}
}
c_rc=c_rc.replace("#","#comment-");
var d_rc=c_rc.split("#");
d_rc=d_rc[0];
var e_rc=d_rc.split("/");
e_rc=e_rc[5];
e_rc=e_rc.split(".html");
e_rc=e_rc[0];
var f_rc=e_rc.replace(/-/g," ");
f_rc=f_rc.link(d_rc);
var g_rc=b_rc.published.$t;
var h_rc=g_rc.substring(0,4);
var i_rc=g_rc.substring(5,7);
var j_rc=g_rc.substring(8,10);
var k_rc=new Array();
k_rc[1]="Ene"; k_rc[2]="Feb"; k_rc[3]="Mar"; k_rc[4]="Abr";
k_rc[5]="May"; k_rc[6]="Jun"; k_rc[7]="Jul"; k_rc[8]="Ago";
k_rc[9]="Sep"; k_rc[10]="Oct"; k_rc[11]="Nov"; k_rc[12]="Dic";
if("content" in b_rc){
var l_rc=b_rc.content.$t;
} else if("summary" in b_rc) {
var l_rc=b_rc.summary.$t;
} else var l_rc="";
var re=/<\S[^>]*>/g;
l_rc=l_rc.replace(re,"");
if(fecha==true){
document.write(j_rc+' '+k_rc[parseInt(i_rc,10)]);
}
document.write('<ul><li><b>' + b_rc.author[0].name.$t + '</b>');
if(titulo==true){
document.write(' en ');
document.write(f_rc);
}
document.write(':<br/>');
document.write('<a href="' + c_rc + '">');

if(l_rc.length < sumario) {
document.write(l_rc);
} else {
l_rc=l_rc.substring(0,sumario);
var p_rc=l_rc.lastIndexOf(" ");
l_rc=l_rc.substring(0,p_rc);
document.write(l_rc+'&hellip;');
}
document.write('</a></li></ul>');
if(i < numcom-1){
document.write('<hr style="color:#' + colhr + ';"/>');
}
}
}
</script>

<script type="text/javascript">
var numcom=10;
var fecha=true;
var titulo=true;
var sumario=100;
var colhr=cccccc;
</script>
<div style="border:2px solid #990000;padding:5px 5px 5px 5px;color:#cccccc;font-size:14px;text-align:left;margin:0px auto;"><script src="http://NOMBRE_BLOG.blogspot.com/feeds/comments/default?alt=json-in-script&callback=comentarios"></script></div>

Para configurar el aspecto de salida hay que fijarse en la última parte. En primer lugar colocais en la etiqueta STYLE del DIV, los atributos que necesiteis. También se puede crear una clase nueva en el CSS y luego incorporarla a ese mismo DIV. Sólo teneis que tener en cuenta que el SCRIPT lo que genera es una lista (UL / LI), por lo que tendreis que definir también esa etiqueta para la nueva clase.

¡Y no olvides sustituir NOMBRE_BLOG al final del SCRIPT por el tuyo!

También podeis cambiar al gusto, todos estos parámetros:
  • numcom = número de comentarios a mostrar.
  • fecha = muestra la fecha del comentario (true) o la oculta (false).
  • titulo = muestra el título del post (true) o lo ocuta (false).
  • sumario = número de caracteres de cada comentario a mostrar.
  • colhr = color en hexadecimal de la barra de separación. Poner el color del fondo si no quereis barra.

¿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

49 comentarios :

  1. Gracias Oloman!
    tenes razon, los anteriores no me convencian y este scrip esta muy lindo, solo que no le puedo sacar la rayita que separa los comentarios a pesar de haberle puesto color negro!
    Igual quedan bien.

    ResponderEliminar
  2. Lo he probado en uno de mis blogs (Itinerarios en el arte), no me quedan como a ti, pero supongo que es mi sidebar, (que no es de esa plantilla). De todos modos me gusta mucho, algo espaciado, pero me parece de los mejores que he visto. Luego lo pasaré a los otros blogs.

    Y una pregunta, Oloman, lo estoy buscando pero no doy con las palabras adecuadas.
    Cómo pongo un ícono donde dice comentar?
    Quizá reemplazarlos como tú, o mejor colocar un ícono peque, delante de la palabra
    “comentarios”.

    Desde ya muchas gracias

    ResponderEliminar
  3. Ya he puesto un iconito… no molesto más. Me ha quedado un poco por encima de la palabra comentarios… pero bue. :)

    ResponderEliminar
  4. Luz, como da la casualidad de que tu blog y el mío tienen tonos parecidos, las modificaciones que propongo casi te vienen perfectas sin tocar nada. Debería funcionar poniendo var colhr=000000;, sin la almohadilla.

    Mar, en este post (http://oloblogger.blogspot.com/2008/06/enlace-comentarios-en-blogger.html) puedes ver como manipular el enlace a comentarios.

    ResponderEliminar
  5. Gracias Oloman Estaba Esperando Que Pusieras Esto...

    Estube Haciendo Unos Experimentos y Descubri La Manera De Quitar Las Líneas y Las Biñetas (Que Hacen Que Se Valla Muy Ala Derecha).

    Solo Borre Los [ul][li][/li][/ul] y Cambie La "H" Por "B" Aquí:

    document.write('<br style="color:#' + colhr + ';"/>[p]');
    }

    Y Agregue Al Final [p]...

    Espero No Te Molestes Oloman Por Haber Modificando Un Poquito Tu Script; Lo Hice Por Si Ah Alguien No Le Gustaba El Acabo Orinal...

    Nota: Cambien Los "[]" Por "<>"

    ResponderEliminar
  6. Hola Oloman,

    Lo cierto es que me ha resultado muy útil tu artículo ya que para darme a conocer creo que sería un método muy bueno.

    Pero tengo un problema y es que al meterlo en mi blog cono gadget, tras sustituir la dire y modificar un poco el aspecto, no sale más que una caja sin boton alguno, y poniendo el código tal cual, sin modificar la caja pero modificando el sitio xD, tampoco me sale.

    Que estoy haciendo mal?

    Un saludo y muchas gracias por estos truquillos.

    ResponderEliminar
  7. Momomonky, claro que no me importa que modifiques lo que quieras. Al contrario, me alegro de que innoveis y hagais vuestras propuestas. Intenté poner un SCRIPT que nadie necesitara modificar, pero si se sabe... ¡adelante!

    Realmente, la forma de quitar la línea de separación, sería quitar completa la línea esa que introduce el HR. Si se desea conservar el espaciado, efectivamente hay que sustituirlo por un BR. Tu pusiste P, pero no creo que lo colocaras donde dices, porque te faltaría un cierre. El problema es que BR con las listas no funciona demasiado bien en IE y opté por sustituirlo por un HR.

    Con las viñetas, lo mismo; se pueden eliminar. Es cuestión de gustos.

    Onetwothree, ¿que tal si lo montas aunque sea abajo del todo de la sidebar para verlo? Así tal como lo cuentas, debería funcionar.

    ResponderEliminar
  8. Oloman, como estas, tanto tiempo sin pasar a saludar. Para variar, necesito tu ayuda, en mi blog tengo una ventana de chat de Meebo. Puedo poner eso en un pop up??? ayudame. gracias... nos vemos

    ResponderEliminar
  9. No conozco el gadget Alexis. Sin embargo, he visto que se trata de un servicio de mensajería integral que puedes colocar en una página web. Por otra parte, en tu blog tienes otro ¿no te referirás a cbox?

    ResponderEliminar
  10. He puesto el script en mi blog, el resultado es fantástico he he, ademas le he añadido un pequeño icono antes del nombre del comentarista modificando un poco el script.

    Salu2 figura!!

    ResponderEliminar
  11. oloman, se me habia pasado tu respuesta. La verdad es que justamente me gustaria incluir el cbox en un pop up, para que no aparezca en la sidebar, o en general saber como incluir un script en un pop up...

    gracias

    ResponderEliminar
  12. Espineli, para eso se explican las cosas, para que no todo sea copypastear. Encantado de leerte de nuevo.

    Alexis, no sé si se podrá hacer como tú dices, pero como ando un poco de liado ¿por qué no pruebas tú mismo a meter el chat en una ventana modal tipo LIGHTWINDOW? Puede que funcione. Tendrías que tratarlo como un DIV oculto con DISPLAY:NONE

    ResponderEliminar
  13. Oloman, como estas. Esto es justo lo que buscaba, PEROOOO, no se si es prototype o scriptaculous, el que no deja funcionar el slide que tengo en la cabecera del blog, asi que tuve que sacarlos... sabes porque puede ser????

    gracias por haber respondido

    ResponderEliminar
  14. No lo he visto, pero hay SCRIPTS que se llevan mal entre sí. Por ejemplo JQUERY y PROTOTYPE. Creo que la mayoría de slide's llevan el primero.

    Saludos.

    ResponderEliminar
  15. gracias esto fi funciono mira http://audioscristianos.blogspot.com/

    ResponderEliminar
  16. Mirado, estrenado y comprobado, xXx4bN3rxXx.

    ResponderEliminar
  17. Hola, Oloman. Antes que nada, felicitarte y agradecerte por tu blog de ayuda, que además está muy bueno.
    Voy a las dos consultas que tengo. La que más me importa: ¿cómo puedo hacer que el título de la entrada se muestre en mayúsculas o (preferible) sólo con la primera letra del título (no de cada palabra del título) en mayúsculas? La segunda y última: cualquier modificación de color que le hago a la barra de separación, me anula el script. ¿Sugerencias?
    Muchas gracias.

    ResponderEliminar
  18. Zambullista, lo de la primera letra no sabría como hacerlo. Si quieres que todo el título sea en mayúsculas, prueba a sustituir en el SCRIPT la línea
    document.write(f_rc);
    por
    document.write('<span style="text-transform:uppercase;">' + f_rc) + '</span>');

    Sobre lo de la barra de separación, en
    var colhr=cccccc;
    sólo hay que cambiar "cccccc" por el color que desees en código hexadecimal. No pongas la almohadilla y no olvides el punto y coma al final de la línea. Debería funcionar.

    ResponderEliminar
  19. Muchas gracias, Oloman. Lo de las mayúsculas pude hacerlo sin problemas, una vez que me di cuenta de que sobraba un paréntesis de cierre en "f_rc)".
    Con lo de la barra de separación no hubo caso; por más que me acepta el código del color que le pongo (sin la almohadilla o numeral, cosa que antes omitía), sigue apareciendo el mismo color. O me volví daltónico, y mucho. Pero ya me estoy acostumbrando al resultado (de hecho, probé cómo quedaba sin la línea, y preferí volver a ponerla).
    Lo último, por si a alguien le sirve: cambié la línea
    c_rc=c_rc.replace("#","#comment-");
    por la línea
    c_rc=c_rc.replace("#","#");
    O sea, borré "comment-" de la línea original y ahora los links de los sumarios envían al comienzo del comentario, no del post comentado.
    Gracias de nuevo. Un abrazo.

    ResponderEliminar
  20. Gracias por la aportación Zambullista. Lo natural es que enlace al comentario del resumen de idems, pero quizás pueda ser también de utilidad hacerlo como planteas.

    Otra opción para quitar la barra, pero teniendo que tocar el SCRIPT, sería eliminando estas líneas:
    if(i < numcom-1){
    document.write('<hr style="color:#' + colhr + ';"/>');
    }

    ResponderEliminar
  21. Hola amigo...espectacular la idea, lo probé en mi blog http://www.mematodelarisa.blogspot.com, el tema es que me quedan grandes las letras de los comentarios y se ve desparejo con respecto a la página....me prodrás ayudar a ver como quedaría mejor.

    Gracias.

    Francisco

    ResponderEliminar
  22. Francisco, en tu blog tienes un ID que se llama SIDEBAR-WRAPPER y una clase que se llama SIDEBAR. Con que en una de esas dos incluyas un
    font-size:10px; (u otro número de pixels)
    todo lo de la barra lateral tendrá el mismo tamaño de letra, incluido este gadget.

    ResponderEliminar
  23. Como puedo quitar las viñetas?, es decir, que línea tengo que eliminar para que no salgan!, gracias

    ResponderEliminar
  24. Hola Juan
    Tienes que quitar todas las etiquetas <li> , </li>, <ul> y </ul> que veas en el código, pero me parece que es posible que no te guste el resultado. Si es así, cambia <li> por <li style="list-style-type:none;"> cuyo resultado puede que sea lo que buscas.

    ResponderEliminar
  25. Oloman eres un fenomeno! mil gracias, es justo lo que necesitaba :D

    ResponderEliminar
  26. Buenos días Oloman,

    he incorporado la numeración de comentarios y la verdad es que funciona de maravilla. Sin embargo, este truco no me funciona. ¿Podrías decirme qué tengo mal? Mi blog es http://blogtriforce.blogspot.com/

    Muchísimas gracias.

    ResponderEliminar
  27. Hola de nuevo. Tienes un error de transcripción. Dónde va la dirección de tu blog, tienes dos barras detras de ...blogspot.com//...

    Tiene que haber sólo una.

    ResponderEliminar
  28. Qué tontería! Muchísimas gracias, ya funciona perfectamente. Si tienes algún botón, banner o lo que sea de tu blog dímelo para que te añada a la sección de "Blogs amigos", es lo mínimo que puedo hacer

    ResponderEliminar
  29. Arriba, justo debajo del buscador: Enlazar ;)

    ResponderEliminar
  30. Ok, ahora lo hago. Me queda la última duda antes de inaugurar el blog este jueves. ¿Sabes cómo puedo quitar las flechas verdes esas que salen en lo de "últimos comentarios"? Es algo que lleva la plantilla, porque cuando puse las etiquetas al principio con el widget que lleva blogger de serie también aparecían las flechitas esas. Es que no lo localizo en la plantilla. Mil gracias!

    ResponderEliminar
  31. La configuración de las listas en la barra lateral, la tienes en #sidebar-wrapper li

    ResponderEliminar
  32. Vale, ya he quitado las flechas. Mil gracias por todo, de verdad. Te mereces todos los premios que te dieron. Un saludo!

    ResponderEliminar
  33. y como aria si quisiera poner un efecto hover como el que tiene Vagabundia en sus ultimos comentarios??? Saludos!!

    ResponderEliminar
  34. Para eso tienes que crear una nueva clase para listas tal y como se explicó en esta entrada. Luego, en el último DIV en lugar de poner una etiqueta de estilo (en verde en el ejemplo), pones una CLASS="xxxx".

    ResponderEliminar
  35. Hola Oloman

    Realice el truco pero no resulta, como ya he realizado cambios en la platilla de quitar los feeds de entradas antiguas y entradas nuevas, quizás esto es lo que me bloquea el truco ?

    Saludos

    ResponderEliminar
  36. No perfil = No puedo ver :D

    De todas formas, no se me ocurre ningún motivo por el que eliminar lo de las entradas antiguas/recientes, pueda afectar a esto.

    Es cierto que algo tienen que ver con feeds, pero la presencia/ausencia de los enlaces mencionados no afectan a este script.

    Comprueba en primer lugar, que lo que está marcado en verde (al final del código) lo has configurado correctamente. Esa parte hay que adaptarla a cada uno.

    Saludos.

    ResponderEliminar
  37. Anónimo5/7/10, 7:42

    hola olomán. es perfecto salvo los colores. ¿cómo y/o dónde los cambio? necesito un fondo blanco y links en turquesa... bueno, los colores del blog, y rojo para el texto...

    ResponderEliminar
  38. En esta parte es dónde se mete el estilo:
    <div style="border:2px solid #990000;padding:5px 5px 5px 5px;color:#cccccc;font-size:14px;text-align:left;margin:0px auto;">
    Está al final del código.

    Si eliminas toda la etiqueta STYLE de ahí, creo que te quedará como quieres. Si no, tendrás que crear un selector para este artilugio con las propiedades que necesites. Por ejemplo:

    .comentarios {width:200px;background:#ffffff;color:#191919;}
    .comentarios a {color:#45828d;}
    .comentarios a:hover {color:##B0171F;}

    ...y luego sustituir lo que te puse al principio de este comentario por:

    <div class="comentarios" >

    ResponderEliminar
  39. esto es lo que buscaba, ahora queda como queria, de paso queria preguntarte si sabes alguna manera de personalizar los comentarios y que se incluyan en ellos backlinks.
    Gracias.

    ResponderEliminar
  40. Hola Locomosxca.

    Para lo de los comentarios, si es dentro del gadget que has incorporado con este sistema, al final de la entrada se explica cómo hacerlo (cambiando lo que está en verde).

    Si es para los comentarios normales de las entradas, primero tendrás que habilitar el formulario de comentarios incrustado desde el menú de administración. Si lo haces así, luego desde la plantilla podrás alterar las clases e ID que llevan la palabra 'comment'. Cada una controla una parte.

    ResponderEliminar
  41. Hola, Oloman.
    Tengo una duda con el script. El dato del título lo toma de la URL, que no admite vocales acentuadas ni eñes, entre otros signos, y que deja de ser el título si uno lo cambia en alguna edición del post (me suele pasar). ¿Hay forma de que el script tome el título del feed, y no de la URL?
    Agradecido de antemano.

    ResponderEliminar
  42. El Zambullista, sinceramente, JSON no lo controlo bien y te remitiría a algún experto, pero como decía en la entrada, este código es de otra persona cuyo nombre desconozco. No lo he comprobado porque yo no uso el título de las entradas en mi sistema de últimos comentarios, pero me sorprende que tome el título de la URL. Yo suponía que lo sacaría del feed ¿Puedes confirmar que no es así?

    ResponderEliminar
  43. Supongo que habrá alguna razón para que no tome los títulos del feed, pero seguro que no lo hace. De hecho, por lo que poco que me voy dando cuenta leyendo el script, toma la URL y la recorta. Pero no te preocupes, tampoco es tan importante. Además, vi que en Vagabundia JMiur tiene un post con este gadget o uno muy similar. Le pregunto a él y si se puede, bien, y si no, también. Gracias de nuevo, Oloman.

    ResponderEliminar
    Respuestas
    1. Ok. Si descubres algo reseñable, no te cortes en indicarlo por aquí ;)

      Eliminar
  44. hola no me sale la caja de comentarios míralo en este blog http://uneteint.blogspot.com ayudaaaaaa!!!!!!!!!!!!! por favor

    ResponderEliminar
    Respuestas
    1. No sé lo que has hecho, pero algo raro seguro. O eso o algo más sencillo como que tengas las entradas marcadas como "NO admitir comentarios". Eso se ves desde el panel de control (Escritorio), pero también individualmente para cada entrada, editándolas y cambiando eso en la barra de herramientas de la derecha.

      Eliminar
  45. Hola Oloman, simplemente excelente este blog, cada vez que entro me doy un gustazo leyendo !!! Yo uso blogger y quisiera poder mostrar los comentarios en orden inverso, usando la plantilla nativa. Me explico, que se sigan mostrando los comentarios en el recuadro luego de la entrada normalmente pero que el orden sea desde el más reciente hacia el más antiguo porque blogger por default te va mostrando primero el más antiguo y de último el más reciente. En mi caso es un problema pues al responder, lo escrito no estará a la vista a menos que el usuario navegue hasta la última entrada de comentario. Hoy por ejemplo, me ha sucedido que tengo un post con casi 500 comentarios. En fin, en ese ejemplo, quiero que se muestra primero ese último y así sucesivamente. GRACIAS de antemano y un abrazo desde Venezuela !!

    ResponderEliminar
  46. Hola Medianoche. No conozco ninguna manera de hacer eso, pero hace tiempo vi una forma de alternativa de construir "a mano" los comentarios anidados que es esta. Quizás ese código se pueda modificar para cambiar el orden. Pregunta allí a ver que tal.

    ResponderEliminar
  47. Graciaaaaaas Oloman me he tardado en volver !! pero ya voy a probar y les aviso por acá!!
    abrazos

    ResponderEliminar