JMiur [E]

Si usamos los comentarios de nuevo estilo, otra vez vamos a tener que cambiar el script que agrega los emoticones ya que el viejo sistema, no funcionará (las viejas entradas: 1 | 2 | 3)

El problema surge porque Blogger añade los comentarios usando JavaScript así que ahora, debemos "esperar que sean escriots" y recién luego, analizar el texto y cambiar las imágenes.

Desplegamos los artilugios y buscamos el includable cuyo ID es threaded_comments y veremos estas líneas:
<div id='comment-holder'>
  <data:post.commentHtml/>
</div>
donde eso en color son los comentarios en si mismo; allí es donde interceptamos la página y agregamos la llamada al script:
<div id='comment-holder'>
  <data:post.commentHtml/>
  <script type='text/javascript'>NEWemoticonComentario();</script>
</div>
Ahora, deberíamos agregar el script antes de </head> y allí, pondré dos funciones, la primera, será la lista de los emoticones y es muy similar a lo que ya usábamos; la segunda es la que hará los cambios:
<script type='text/javascript'>
//<![CDATA[

// llega con el texto del comentario y lo devuelve modificado
function DRAWemo(cualTexto){
  cualTexto = cualTexto.replace(/:\)/g,'<img width="15" height="15" src="URL_imagen" />');
  // ....... sigo agregando la lista
  // y termino así:
  return cualTexto;
}

// busca los textos de los comentarios
function NEWemoticonComentario() {
  // vamos a cambiar aprte del contenido del DIV cuyo ID es comment-holder
  var  c = document.getElementById("comment-holder");
  if(c!=null) {
    // si existe, creamos una lista con todas las etiquetas BLOCKQUOTE que es donde estan los textos
    var listacoms = c.getElementsByTagName("blockquote");
    if(listacoms.length>0){
      // si hay comentario, lo leemos uno por uno
      for(var i=0; i<listacoms.length; ++i) {
        // leemos el contenido del comentario en formato HTML
        comlTexto = listacoms[i].innerHTML;
        // y lo cambiamos     
        listacoms[i].innerHTML = DRAWemo(comlTexto);
      }
    }
  }
}

//]]>
</script>
Si se usa jQuery, la segunda creo que podría simplificarse de este modo:
function NEWemoticonComentario() {
  $("blockquote.comment-content").each(function(index) {
    var nuevoTexto = DRAWemo($(this).html());
    $(this).html(nuevoTexto);
  });
}
Eso es todo y el ejemplo sigue estando en la misma entrada del blog de pruebas

29 comentarios:

Pliactom  

Hubo error en el título (cosa que no había visto).
Pero me parece una alternativa bien padre!!!

Responder
Adrián J. Messina  

Están buenos los emoticones. Voy a implementarlos a ver como quedan.
Un par de dudas:
Sigue pasando que los que usamos este sistema al ingresar a la entrada directamente la página se ubica en el formulario de comentarios.
¿Esto seguirá igual por el momento?
La otra duda es cual es el CSS para cambiar el color de la numeración de los comentarios.

Mi amigo Firebug (Gracias por esto) no me lo detecta :D

Un abrazo.

Responder
†Bara_Darkness†  

Muchas gracias por el artículo. Me ha servido mucho.

Responder
NMitra  

¡Gracias!

Responder
madita  

Muchísimas gracias JMUR. Ya era año de que te las diese por cierto, pués he probado miles de tus sugerencias, todas con éxito. La que más problemas me dió son las entradas tipo magazine, en páginas estáticas. Sin duda eres el mejor en esto.

Ahora ya voy a probar todo junto,lo que has dicho durante estos días. Primero en un blog de pruebas.

Porque mis lectores llevan días sin poder ver los comentarios a partir del 200, así que no me va a quedar otra que pasarme al nuevo sistema (¿no hay otra alternativa verdad?)

Me da miedo, porque no sé ya cuantas librerias distintas de jquery, scriptacolous etc he ido usando en estos dos años. Mi plantilla está sucia sucia...

Una aportación: Tengo amigos blogger, que han solucionado sus problemas con emoticonos, renunciando al nuevo sistema y poniendo en el feed: ninguno. Como solución provisional puede valer.

Una cosita más: ¿por qué tú todavia no te has pasado al nuevo sistema? ¿sigues investigando alguna cosita más?

Responder
Karla Castañeda  

Buen aprote JMiur.

Saludos :)

Responder
JMiur  

Adrián J. Messina
A mi me sigue pasando lo mismo; no es nada de nuestras plantillas, pasa en todos los sitios excepto, si se entra usando Chrome :-(

El color de los números está en:
.comments .comment-block:before {}
allí también defines al fuente, etc.

madita:
Sí, eso de probar en un blog de pruebas es lo mejor ... por las dudas :-)

Lo mismo ocurre acá con las entradas que tienen más de 200 comentarios. Es una vergüenza que Blogger no solucione eso que es algo tan elemental. Si hay otra alternativa, por ahora la desconozco.

Sigo mirando, me molesta eso de que al entrar en un post individual siempre se posiciona al final de la página y tengo librerías incompatibles así que ... ando mirando y probando :D


Buen aprote JMiur.

Saludos

Responder
Juan  

Hola J.Miur. Me gustaría saber qué CSS añadir para presentar las miniaturas de posts relacionados tal cual aparecen en tus entradas. Con el efecto del borde en las imágenes y con las líneas de puntos en el resumen de las entradas. Muchas gracias de antemano :)

Responder
JMiur  

El borde de los textos se coloca en la etiqueta P:

.relsposts p {
.......
border-bottom: 1px dotted #555555;
border-top: 1px dotted #555555;
padding: 5px 0;
}

El borde de las imágenes en:

.relsposts img { ................ }

Responder
Adrián J. Messina  

Si escribo de esta forma para completar el script, ¿Es correcto?:

"// llega con el texto del comentario y lo devuelve modificado
//function DRAWemo(cualTexto){
//cualTexto = cualTexto.replace(/:\)/g,'//img width="15" height="15" src="URL_imagen" />');"

//cualTexto = cualTexto.replace(/:-\$/g,'img src="http://img179.imageshack.us/img179/8856/com-oops.gif" />');//

// ....... ACA SEGUIMOS AGREGANDO Y AGREGANDO"

y así sucesivamente...

p.d: No me toma algunos caracteres

Responder
Karla Castañeda  

Perdón JMiur, no estoy segura si te molestaste pero, evidentemente cambié caracteres equivocadamente [ro] : [or] al escibir tan rápido...

:$

Responder
JMiur  

Adrián:
Si ya usas el sistema anterior, toda esa parte de cualTexto es idéntica. Sino, en esta vieja entrada hay un ZIP con un ejemplo surtido.

Karla:
No hay problema; mis dedos jamás obedecen y siempre hacen lo que quieren :D

Responder
Luis  

Al parecer blogger "le volvió a meter mano" al script de los comentarios anidados y eso hizo que dejaran de funcionar los emoticones. Como puedes observar en esta entrada:

http://delopocoqueconozco.blogspot.com/2012/01/la-muerte-de-la-internet.html

¡Auxilio JMiur!

Luis  

Ya funcionan de nuevo los emoticones gracias a este post de mil trucos blogger (Con algunos cambios para adecuarlos a mis emoticones):

http://www.miltrucosblogger.info/2012/02/emoticones-para-los-comentarios.html

A ver cuanto duran funcionando porque con blogger, nunca se sabe....

De todas maneras ¡Gracias JMiur!,porque en innumerables ocaciones he tomado la información que posteas para aplicarlo a mi blog. ¡Gracias!

JMiur  

Cambia esta línea, Luis:

var listacoms = c.getElementsByTagName("blockquote");

por esta otra:

var listacoms = c.getElementsByTagName("p");

Al parecer, ahora, el texto se encuentra en una etiqueta P en lugar de una etiqueta BLOCKQUOTE. Eso, debería resolver el problema; por lo menos, así lo veo en el demo que figura en esta misma entrada.

Luis  

Solucionado...Gracias JMiur muchísimas gracias...porque lo que es blogger, nunca se sabe que va a pasar.

JMiur  

Usa cualquier sistema pero, cuidado con el tipo de script que muestras porque lo que hace es modificar el contenido entero del DIV comments lo cual afecta no sólo a los textos de los comentarios en si mismo sino al código interno y puede causar problemas.

Por ese motivo fue cambiando el script ;para especificar claramente que sólo debe cambiarse el texto de los usuarios y nada más. En el modelo de comentarios normales, no hacerlo de este modo hacia que el formulario no funcionara.

Luis  

Gracias por la advertencia JMiur, en lo futuro tratare de tener mas cuidado con lo que aplico en el blog; ya cambié de nuevo al script que posteaste. De nuevo gracias.

Responder
Raquel  

gracias de vergdad te lo agradezco

Responder
wiLliam  

Como poner los emoticons de facebook en el nuevo sistema comnetarios de blogger

JMiur  

Tendrás que copiar las imagenes una por una.

wiLliam  

no entiendo , yo no tengo los emoticons antiguos ni lso de nuevo sistema . entoncz como hago ?????

JMiur  

Blogger no tiene emoticones. Se los puedes agregar siguiendo las instrucciones de las distintas entradas que indica el post.

Responder
Juan  

o.O

Responder
Agustín  

JMiur he implementardo los emoticones con el nuevo sistema de comentarios anidados y me van muy bien, sin embargo, observo que una vez que se ha hecho el primer comentario la tabla de emoticones deja de verse, en tu blog de pruebas ("Pruebas surtidas")contemplo lo mismo, no se ve la tabla de emoticones. Cómo se puede hacer para que se vea de nuevo.

Te lo agradezco de antemano.

JMiur  

¿A qué tablea de emoticones te refieres? Si se trata de las imágenes modelo que indican los tipos de caracteres y cómo se verán o algo similar, en el blog de pruebas no hay colocado ninguna tabla.

No creo que sea sencillo hacer eso ya que el formulario se genera con JavaScript y parece imposible controlarlo. Por eso no la he puesto ni he intentado modificar nada de esa parte.

Agustín  

Sí, me refería a las imágenes modelos donde se indican los caracteres. Cuando la entrada no tiene ningún comentario sí se ven, pero una vez realizado un comentario ya no es visible como tampoco el formulario de comentarios. Gracias.

JMiur  

No tengo idea de si es posible tal cosa. Lo que probé no funciona y es por eso que el ejemplo que puse, no lo tiene.

Responder
Christian Rios  

buen articulo :)

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR