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+'…');
}
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.
23 comentarios:
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.
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.
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 "<>"
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.
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.
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
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?
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!!
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
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
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
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.
gracias esto fi funciono mira http://audioscristianos.blogspot.com/
Mirado, estrenado y comprobado, xXx4bN3rxXx.
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.
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.
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.
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 + ';"/>');
}
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
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.
Como puedo quitar las viñetas?, es decir, que línea tengo que eliminar para que no salgan!, gracias
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.
Oloman eres un fenomeno! mil gracias, es justo lo que necesitaba :D
PUBLICAR UN COMENTARIO