JMiur [E]

Lo que nos enseña MamaNunes en su última entrada, es la forma de agregar un enlace para "Responder comentarios".

Es muy simple de implementar y al aplicarlo, dispondremos de ese enlace en cada comentario realizado. Al hacer click, se abrirá el formulario de comentarios en una ventana pop-up y, de manera automática, el formulario ya tendrá incluido un enlace al comentario original y el nombre del comentarista; algo similar a lo que se muestra en Twitter; veremos entonces, que ya está escrito algo así:


Para que esto funcione, debemos colocar lo siguiente:
<span class='comment-reply'>
<a expr:href='&quot;https://www.blogger.com/comment.g?blogID=NUESTRO_ID&amp;postID=&quot; + data:post.id + &quot;&amp;isPopup=true&amp;postBody=%40%3C%61%20%68%72%65%66%3D%22%23&quot; + data:comment.anchorName + &quot;%22%3E&quot; + data:comment.author + &quot;%3C%2F%61%3E#form&quot;' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=400,height=450&quot;); return false;'>[Reply to comment]</a>
</span>
Allí, deberíamos colocar NUESTRO_ID que podemos ver en la misma ventana de la plantilla y que es un número (más información).

El otro dato que podemos modificar es el texto a mostrar que en el ejemplo es [Reply to comment] pero puede ser cualquier otro o incluso una imagen.

El tema es ¿dónde ponemos eso? y ahí hay muchas alternativas que dependerán de la plantilla. Por ejemplo, podría ponerse al lado del nombre del comentarista:
<data:comment.author/>
o en el footer de cada comentario:
<dd class='comment-footer'>
PUEDE AGREGARSE ACÁ
<span class='comment-timestamp'>
<a expr:href='&quot;#comment-&quot; + data:comment.id' title='comment permalink'><data:comment.timestamp/></a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
PUEDE AGREGARSE ACÁ
</dd>
Es verdad que el código parece extrañísimo pero, no lo es tanto, simplemente envia ese texto extra en la URL que abre la ventana de comentarios y lo hace codificándolo (encode y decode) de tal manera que:
%40%3C%61%20%68%72%65%66%3D%22%23 es el equivalente de @<a href="# 
data:comment.anchorName es la URL del comentario a responder
%22%3E es el equivalente de ">
data:comment.authores el nombre del comentarista a quien se responde
y %3C%2F%61%3E es el equivalente de </a>
Como detalle adicional, el SPAN donde está el enlace tiene una clase CSS así que es posible agregarla a nuestros estilos y darle propiedades:
.comment-reply {}
.comment-reply a {}
.comment-reply a:hover {}
En el blog de MamaNunes puede verse el resultado comcreto

83 comentarios:

Unknown  

Me encantó, lo pruebo de las dos maneras, veremos qué sale de mi tarea.
Que tengas un día bonito :)

Responder
Gem@  

Esos mismos parámetros sirven también para Lytebox o serían distintos??

Responder
MamaNunes  

Ahh maestro! ahora quedo complecto :)

Responder
MamaNunes  

Traté de implementar en mi blog el "LightWindow", pero Blogger envía este mensaje de error.

Mensagem de erro em XML: Open quote is expected for attribute "{1}" associated with an element type "class".


¿Qué debo hacer? :$

Responder
JMiur  

Graciela: Es sencillo de agregar, no vas a tener inconvenientes.

Gem@: Habrá que probar; me parece que, en ese script, lo que habría que cambair es la variable que crea el enlace final, podría ser algo así:

var enlacePopup = &quot;&lt;a rel=\&quot;lyteframe\&quot; href=\&quot;&quot; + nuevoEnlace + &quot;\&quot; rev=\&quot;width:480px;height:600px;scrolling:no;\&quot; &quot;&gt;TEXTO ENLACE&lt;/a&gt;&quot;;

MamaNunes: Sí, acabo de mirar y veo que en la transcripción saloió un error. Ya está corregido. Fíjate que en el enlace del script, hay unos < y > que deberían ser &lt; y &gt; . Esta vez, espero haberlos escrito bien :D

Responder
Unknown  

@JMiur Probando probando :)

Responder
JMiur  

@Graciela Probando probando 1 2 3 4 ¡ME OYE!!! :D

Sí, parece funcionar :D

Responder
Alex González  

Whoaaa me fascina esto del Reply
una duda como hacer ese tipo de ventanas popup

Responder
Gem@  

@Graciela Se oye muy bien :D

Responder
Angel Cba  

@JMiur

Funciona bien, lo he puesto en mi blog pero he puesto una imagen en lugar de el texto y ha quedado de maravilla, gracias JMiur.

PDT: ya tenia tiempo que no usaba ningún tipo que habias puesto pero con este si te volaste la barda ademas que incita a que los lectores comenten mas.

Responder
Admin  

@JMiur

Probando para no ser menos... :) Pero la ventana que se abrió primero se expandió a página completa :O
Es así como funciona?

Responder
Admin  

@JMiur
Mmm... que raro, ahora no se agrandó, pero la primera vez hasta me sacó del blog :o

Responder
Unknown  

@Gem@ hasta sale mi voz guau

Responder
egoloco  

@JMiur

Curioso. Hice el intento con el comment-iframe pero no resuló. de cualquier manera ya lo puse en mi blog. Saludos!

Responder
egoloco  

Yo siempre pidiendo mucho :D Sería bueno que el reply sea inmediato, osea, no en lightwindow, sino en el mismo formulario incrustado. Pruebo y te digo... a ver que me sale.

Responder
Anónimo  

bueno eres sequisimo , soy nuevo en esto como consijo que la gente visite mi blog??

Responder
JMiur  

Alex: USando LightWindow como dice el post.

k_nelita: Eso te pudo ocurrir si por cualquier motivo, no se cargó el script.

egoloco: No creo que sea posible modificar el IFRAME y por eso no se actualiza.

roke: con tiempo, con paciencia, con suerte, con contenido ...

Responder
Aretino  

Lo implemente y me parece un buen aditamento. Pero cuando uno responde no deberia salir nuevamente el - responder - sino esperar que la persona replique o haya un nuevo commentario

Responder
JMiur  

Esos son detalles casi imposibles, deberían quedar los datos guardados en alguna parte, poder ser leido y verificados, etc, etc.

Responder
Gem@  

@JMiur probaré como dices cuando esté en mi computadora :)

Responder
JMiur  

@Gem@ Si no es ese por ahí anda. Prueba y cualquier cosa me avisas; es medio complicado porque las comillas son difíciles de armar pero, todo es cuestión de ir probando :)

Responder
LdeListo  

Muchas gracias, lo implemente en mi blog y funciona perfecto! :D

Responder
Armando  

Le puse el lightwindow y no me sale, me sale en una ventana aparte =/ que es lo que me faltara?

Responder
Armando  

Ya me quedo (: quedo bastante bien, Gracias =D

Responder
Adrián J. Messina  

Que buena idea, es muy útil, ya lo he aplicado.
El tema lightwindow esta excelente le dá un toque estilístico a una opción fácil de utilizar.
Ahora, yo uso Lytebox, como preguntó Gem@, y le has respondido a lo que no he entendido de como aplicar,
¿ Me puedes ayudar ?

Un saludo,

Responder
JMiur  

Usando Lytebox, tienes que seguir el mismo procedimiento que para Lightwindow y luego probar ese cambio sugerido; cambiar la línea de la variable:
var enlacePopup
por la que ves en el comentario. No lo he probado.

Responder
AlejoBlogger  

Hola Jmiur ¿Se Puede Usar Una Imagen en Vez de "[Reply to comment]"?
Espero Pacientemente tu Respuesta;)

Responder
AlejoBlogger  

Jejeje ya no Importa, Ya lo Resolvi, Igualmente Gracias;):D

Responder
el Zambullista  

No sé si esto puede interesarle a alguien más, pero por las dudas lo comparto.
Hasta que uno se da cuenta de cómo funciona la cosa, puede no ser muy intuitiva la imagen de la arroba seguida del nombre de usuario que enlaza al comentario que se está respondiendo. Incluso podría confundir a alguno (servidor) ese nombre debajo del nombre del autor que responde, sin más excepto por la arroba. Por supuesto, cada comentarista podría sustituirla por el texto que desee, incluyendo ninguno (en este caso, quedaría el nombre del comentarista comentado, pero con un link a lo que dijo, a modo de encabezado: Fulano: Creo que bla bla bla...). Aunque el que comenta también podría reemplazar un texto que nosotros predeterminemos, puede ser útil siquiera sugerir uno descriptivo, que automáticamente se genere en el editor como ahora la arroba. Yo elegí que diga: "En referencia al comentario de Fulano:", siempre con "Fulano" enlazando a su comentario.
Para hacerlo, basta reemplazar en el código a pegar el ASCII hexadecimal 40, que es la arroba, por lo que deseemos, y/o poner después del ASCII hexadecimal 3E -que es el signo mayor que, que cierra el tag- un signo de puntuación, si gustamos (en mi caso, los dos puntos).
En mi plantilla, por ejemplo, esa parte del código quedó así:

...postID=" + data:post.id + "&isPopup=true&postBody=En referencia al comentario de %3C%61%20%68%72%65%66%3D%22%23" + data:comment.anchorName + "%22%3E" + data:comment.author + "%3C%2F%61%3E:#form"' onclick='javascript:window.open(this.href, "bloggerPopup", "toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,...

Saludos.

Responder
[ :: WwW.FloWKaletA.CoM :: ]  

hola, tengo un problemilla muy gordo, nose si me sucede a mi o tambien a otros, si te das cuenta en mi web al momento de querer agregar un comentario el formulario me aparece bien pero cuando esta terminando de cargar la pagina le da como un flash a toda la web y el formulario del comentario desaparece, tengo que darle un F5 para que vuelva a cargar y aparesca, esto me sucede con Mozilla Firefox y IE tambien creo, sabes a que se debe este poblema? tngo un script que esta cargando antes o que solucion le puedo dar? muchas gracias

Responder
JMiur  

Puede ser cualquier cosa, probablemente, algún widget que intefiera o un script; no es algo que pueda verse online. Deberías probar en un blog auxiliar e ir agregándolos de a uno hasta dar con el que provoca el problema.

Responder
Anónimo  

No me funciona, lo intento aplicar en el footer de comentario, en el blog de pruebas (http://etbpruebas.blogspot.com/)

En mi plantilla no aparece la linea de codigo:

<dd class='comment-footer'>

La mas cercana es:

<dd class='comment-footer collapseable'>

Pero lo pego debajo de esa y no aparece. ¿Donde debo pegarlo?

Responder
JMiur  

En el código fuente de tu blog principal se ve la etiqueta y en el de pruebas, como no usas el esquema clásico de las plantilals de Blogger, el footer de cada comentario está en esta otra:

<p class='comment-meta'>

Responder
Cocina  

como hago para incluir el texto que al pasar el cursor diga "responder a este comentario y como agrego una imagen en su lugar??
saludos

Responder
JMiur  

El texto ese se agrega en el qtributo title del enlace:

<a title='el texto' .....

La imagenm reemplazando el texto [Reply to comment] por una etiqueta de imagen:

<img src='uRL_imagen' />

Responder
Cocina  

muchas gracias por tu respuesta!
saludos
C.M

Responder
Bilosony2™  

Muy bueno lo estaba por incluir pero penseeee.... Y no podria directamente citar los comentarios como lo hace esta pagina: http://www.taringa.net/

Como podria lograrlo??

Saludos!!!

Responder
JMiur  

No sé a qué cosa te refieres.

Responder
Gem@  

@JMiur ¿Dónde puedo sustituir la @ por algo distinta?

Responder
JMiur  

Imagino que si:

%40%3C%61%20%68%72%65%66%3D%22%23

es el equivalente de @<a href="#

lo que debería cambiarse es %40 por el código hexadecimal equivalente del carácter a utilizar ¿Será así? No lo he probado pero parecería razonable.

Responder
Gem@  

La idea era añadir una imagen sustituyendo el hexadecimal :S

Responder
JMiur  

Ahora entiendo. Eso seria posible pero no es fácil, habrái que buscar la forma de crear un script que cambaira la arroba (o el carácter que se elija) por una imagen; algo similar a eso que alguna vez usamos cuando se cambiaba un nombre por un logo ... es para pensar.

Responder
Gem@  

Vale, pues pensamos otro día y en otro momento jajajaja de lo contrario el trabajo se amontona.
No tiene la mayor importancia era por probar :)

Responder
JMiur  

Lo pondré en la lista de pendientes :-D

Responder
Eligor!  

Pues realmente Magnifico me gusto mucho esta idea! :)
pues igual me gustaria agregarle dos puntos (:) despues del autor
osea algo asi..

@Ejemplo:

sera posible? :S

Saludos! muchas gracias

Responder
JMiur  

Usando %3A para codificar los dos puntos. Si al final dice:
%3C%2F%61%3E que es el equivalente de </a>
debería decir:
%3A%3C%2F%61%3E que es el equivalente de :</a>

Responder
Eligor!  

excelente! ^^ Muchas Gracias

Responder
Robin  

Es perfecto y genialmente explicado. Muchas gracias!
Pero tengo una duda, lo he aplicado en mi web, con imagen y eso, y al darle a responder en vez de abrirme una ventana de pop-up para contestar me redirige a esa ventana para contestar. Cosa que es una faena xq luego hay q volver atrás y demás. ¿Como puedo hacer que me salga en popup? o ¿porque no me funciona? No se si m he explicado bien...

Bueno muchas gracias por tu atención y por tener una web tan genial!;)

Responder
JMiur  

Si tienes habilitada la opción de Blogger de abrir comentarios en un pop-up se abrirá de ese mod. Si no la tienes (que es mi caso), se requiere utilizar alguna clase de script adicional que cree ventanas modales.

Eso es l oque dice el post cuando habla del ejemplo aplicado acá utilizando LightWindow aunque puede usarse cualquier otro script que haga esas cosas.

Responder
Marflo  

JMiur No entendi la ultima parte, donde debo pegar el codigo para personalizar el estilo, no me sale y el nombre de los comentaristas casi no se lee porque sale del mismo color de fondo :S help

Responder
JMiur  

El estilo lo debes poner con el resto del CSS, por ejemplo, justo antes de </b:skin> y allí colocas los colores o cualquier otro detalle. Por ejemplo:

.comment-reply {}
.comment-reply a { color: red !important; }
.comment-reply a:hover { color: green !important; }

Responder
Marflo  

JMiur Pues no, no funciona, a ver, en esta pàgina, la tuya, cuando usamos el reply el nombre del comentarista aparece en un tono azulado, como el fon es oscuro se lee perfecto, en mi caso el fondo de mis comentarios es celeste a diferencia de los comentarios de los demàs que es normalmente blanco, al ser celeste el fondo cuando uso el reply no se lee el nombre del comentarista porque aparece en el mismo color, este truco no funciona, ya probè varias veces y no ha caso, no impacta, alguna idea de que estoy haciendo mal? tu has podido cambiarlo?

Responder
JMiur  

Perfecto. Eso ya es lo mismo. No se trata de cómo personalizar el botón sino eso que se verá luego cuando se publique el comentario.

Por defecto, el color de los enlaces es el mismo en ambos casos y en tu blog no está contemplada una diferencia entre lso comentarios de los visitantes que están sobre un fondo blanco y los tuyos que están sobre un fondo celeste.

Seguramente, como hasta ahora nunca habçias agregado un enlace en un comentario, ´no lo habías notado pero, es fácil de solucionar, simplemente le agregamos la regal de estilo corresponediente:

.blog-author-comment a { .... y aqui colocas el color ..... }

Responder
Marflo  

JMiur Pues ahora lo que modifique con el còdigo que me has pasado es el color con el escribo mis comentarios, pero el nombre del comentarista al que respondo sigue igual, celeste...

Responder
Bro  

Vale , me he equivocado y te he puesto mi duda en el post de floatbox :S
Mi pregunta era si es posible hacerlo con floatbox, y si es asi, cómo??
Muchas gracias! (y lo sent por el otro comentario...)

Responder
JMiur  

Marflo:
Creo que te has olvidado colocar un punto y coma luego del color y por eso no se ve blanco. Dice color:#FFFFFF y debería decir:
color:#FFFFFF;

Bro:
Pués lo he contestado allá pero lo repito. Imagino ue podría usarse pero no es un script que haya utilizado.

Responder
Anónimo  

Gracias!!!

Vou colocar amanhã no meu blog, hoje estou com sono...já é muito tarde hehehe (apesar de estar super bem explicado o seu tutorial)

Mais uma vez,obrigado!

Responder
JMiur  

Suerte, Gizaa Veiga :D

Responder
Anónimo  

@JMiur

Obrigado!

Mas...hehehe
No meu blog está abrindo em outra página...porém,vou continuar tentando...

bjão

Responder
Anónimo  

Wooowww!!!

Consegui!!!! :)

Fui seguindo todos os seus posts até chegar onde vc postou os .js do lightWindow...hehehe

Super obrigado! Vou criar um post falando sobre o Vagabundia!

bjão

Responder
JMiur  

Me alegra que todo saliera bien :D

Responder
Kas-Tro  

me gusttaria eliminar es un borde que sale en la imagen en buscado en el codigo y no veo nada que diga borde, pero a lo que parece ese borde tiene que ver con el link que lleva el nombre del usuario que responde los msj, puedes ayudarme con ese borde..este es el blog http://prueba2056.blogspot.com/

Responder
JMiur  

No veo dónde está eso pero, en todo caso, si es un enlace con una imagen y se ve un borde (que es lo que ocurrirá siempre por defecto), puede eliminarse agregando esta regla de estilo:

a img {border:none;}

Responder
Kas-Tro  

Prover el codigo a img {border:none;} colocandolo en algunos sitio que creia que pertenicia el borde y nada mira la entrada donde puedes ver, el borde lo tiene la imagen que dice responder..http://prueba2056.blogspot.com/2008/12/ricky-martin-empezar-grabar-nuevo-disco.html#comments

Responder
JMiur  

En tu plantilla está definida esta regla:

a img {
margin:5px;
padding:0;
}

y es allí donde debes colocar la propiedad:

a img {
border:none;
margin:5px;
padding:0;
}

Responder
Kas-Tro  

gracias ya el problema esta resuelto, lo que me confunde es que creia que eso debia estar en la seccion de comentarios..

Responder
JMiur  

Por lo general es bueno que ninguna imagen que sea un enlace tenga un borde y si uno quiere agregarlo, lo hace de manera específica; caso contrario, hay que irlos eliminado uno por uno; por eso, suele ponerse border="0".

Tener una regla general, evita eso.

Pero, si sólo quieres que sea esa imagen, basta limitar la regla eliminado lo anterior y poniendo esto:

.comment-reply a img {border:none;}

En cuyo caso, todas las imagenes tendran borde menos esas y aquellas que indiques manualmente.

Responder
Admin  

No entiendo. Por más que pruebo, miro, toco, vuelvo a probar, no consigo que aparezca. Parece como si hubiera algo que interfiriera, pero no sé lo que és:(( Además parece fácil! Agradeceria tu ayuda Jmiur.
Gracias de antemano.
Saludos!

Responder
JMiur  

Debería ver si tienes un ejemplo aplicado en alguna parte para intentar responderte.

Responder
América  

Gracias JMiur me vino de maravilla le da un toque muy especial a mi blog!

Saludos

Responder
Kaede Shio  

Intente ponerlos, pero cuando se habre la ventana pop up, me da error 404 u_u.. donde dice se pùede colocar aqui dos veces ¿hay qye colocarla dos veces? porque eso lo intente.

Responder
JMiur  

El error se produce porque la sintaxis es errónea o bien el ID que colcoas es incorecto. Habría que verlo para darte una respuesta.

Responder
Kaede Shio  

Funsiona! ahora solo me hace falta saber como ponerle una imagen xD.

Responder
Ƹ̵̡Ӝ̵̨̄ƷPaulaƸ̵̡Ӝ̵̨̄Ʒ  

@JMiur
Hola!!!! Lo he puesto en mi blog y me encanta ^^!! así es mas rápido responder a todo el mundo ;) Gracias!!!!
Tengo una duda... habría alguna manera de poder responder a varias personas a la vez en el mismo comentario por no tener que hacer un comentario por cada respuesta??
Un saludo

Responder
JMiur  

La verdad, no sabría decirte con exactitud pero, lo veo bastante complicado de hacer.

Responder
christian neyra  

Hola tio , porque no me sale al aplicarlo con LightWindow, esto lo tengo para abrir galerias de imágenes y me funciona muy bien pero cuand oagrego este codigo con mi ID y todo como lo indicas no sale de momento e puesto el otro pero no me gusta mucho y como tengo agregado LightWindow quiero poner el repley con ese efecto ayudame por favor te dejo el enlace de mi blog saludo.

http://carlangas24game.blogspot.com/

Responder
JMiur  

No sabría decirte cuñal puede ser el error porque no sé qué código has colocado. Probablemente, simplemente sea un error de sintaxis pero, es imposible saberlo sin ver.

Responder
christian neyra  

JMiur entonces te mando mi plantilla para que lo veas por email ? confirmamelo por favor gracias.

carlangas24game@hotmail.com

Responder
JMiur  

Sólo es preciso ver el código de esa parte.

Responder
christian neyra  

JMiur ERROR MÍO , revisando bien e tenido un grabe error lo que yo tengo agregado es lightbox y no LightWindow e revisado los mensajes y @gema propone hacerlo con lightbox entonces pregunto como cambio eso para ponerlo , me ayudas por favor ? me dices el codigo ?

PD: Te mande un correo antes de darme cuenta a tu gmail lo siento espero respuesta gracias.

Responder
JMiur  

Si se trata de lightbox, no es posible hacerlo ya que es un script que sólo sirve para mostrar imágenes.

Responder
christian neyra  

JMiur gracias por responder , entonces LightWindow es el que me permitiria hacer ese efecto en reply a los comentarios verdad ? bueno e intentado poner LightWindow y no puedo es más no me sale el efecto con las imágenes ,luego intentaré hacerlo aunque eso me suponga cambiarlo por el que tengo puesto ahora ( lightbox ) es una pena pero si logras algún truco parecido en los comentarios me avisais gracias por todo saludo.

Responder
JMiur  

Puede ser este script o cualquier otro que permita mostrar páginas webs en ventanas modales, hay varios que lo hacen.

Responder
 
CERRAR