bX- NicoNico

Comentarios anidados personalizados en Blogger

Fecha de Publicación: 9 de Febrero de 2012.
Última actualización: 13 de Marzo de 2017.

Blogger inició el año 2012 presentando un nuevo sistema de comentarios anidados que permite nativamente agregar respuestas a comentarios individuales.
Durante los días siguientes al lanzamiento de la funcionalidad los usuarios de Blogger reportaron mas de media docena de problemas derivados de la activación, pero que a la fecha han sido solucionados.

Comentarios Anidados de Blogger Personalizados

El nuevo sistema muestra los comentarios a través de Javascript, y aunque rastreador web de Google ya es capaz de ejecutar algunas peticiones Ajax y Javascript para indexar contenido, es preferible que el contenido sea generado directamente por el servidor (en este caso Blogger) para asegurarse que si es indexado.

Los comentarios aportan valor y contenido a un blog, y es por eso que he decidido adaptar el sistema para que el contenido sea generado directamente por Blogger, y adicionalmente poder personalizarlo como yo quiero, preservando viejos hacks de emoticones, numeraciones, destacar comentarios del autor, fechas relativas, entre otros.

Este nuevo sistema utiliza una nueva variable data de Blogger denominada data:comment.inReplyTo que devuelve la ID del comentario padre de una serie de comentarios (si existe), y hace uso de los bucles de Blogger para mostrar las respuestas a un comentario.

» Consideraciones iniciales
  1. Realizar una copia de seguridad de la plantilla del blog.
  2. Si ya se está usando el sistema de Blogger este debe en primer lugar ser desactivado. (Click para ver rápidamente como desactivarlos)
  3. No es necesario que el feed del blog esté configurado a "Completo", se puede configurar "Corto" o "Hasta el salto de línea".
  4. Actualmente en los "comentarios clásicos" los enlaces de paginación no funcionan. Hasta que Blogger internamente no arregle el problema es conveniente solucionar nosotros mismo el problema.
» Paso a Paso

1. Ingresamos desde Blogger.com al blog al apartado de Plantilla y luego a la Edición HTML con los artilugios expandidos y buscamos el siguiente código, agregando lo que está en color azul.

<b:includable id='comment-form' var='post'>
  <div class='comment-form' id='comment-form-thread'>

  ...aquí va un resto de código que no tocaremos...

  </div>
</b:includable>

2. Buscamos el código del bucle que genera los comentarios del blog,

<b:loop values='data:post.comments' var='comment'>
 ......
</b:loop>

Y agregamos el código que se resalta en azul
Importante: Solo hay que añadir un código justo al inicio del bucle y otro justo al final, todo lo que esté actualmente lo dejamos intacto.

<b:loop values='data:post.comments' var='comment'> <b:if cond='data:comment.inReplyTo'> <b:else/> ... aqui va todo el código actual ... que esté en la plantilla ... que genera los comentarios ... y que no tocaremos <div class='contenedor-respuestas'> <b:loop values='data:post.comments' var='comentariohijo'> <b:if cond='data:comentariohijo.inReplyTo == data:comment.id'> <div class='respuestas-comentarios' expr:id='data:comentariohijo.id'> <div expr:class='&quot;comment-author-thread &quot; + data:comentariohijo.authorClass' expr:id='data:comentariohijo.anchorName'> <b:if cond='data:comentariohijo.favicon'> <img expr:src='data:comentariohijo.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/> </b:if> <a expr:name='data:comentariohijo.anchorName'/> <b:if cond='data:blog.enabledCommentProfileImages'> <data:comentariohijo.authorAvatarImage/> </b:if> </div> <div class='respuesta'> <b:if cond='data:comentariohijo.authorUrl'> <a expr:href='data:comentariohijo.authorUrl' rel='nofollow'><data:comentariohijo.author/></a> <b:else/> <data:comentariohijo.author/> </b:if> respondió... <div class='comment-body-thread'> <b:if cond='data:comentariohijo.isDeleted'> <span class='deleted-comment'><data:comentariohijo.body/></span> <b:else/> <p><data:comentariohijo.body/></p> </b:if> </div> <div class='comment-footer-thread'> <span class='comment-timestamp'> <a expr:href='data:comentariohijo.url' title='Enlace permanente'> <data:comentariohijo.timestamp/> </a> <b:include data='comentariohijo' name='commentDeleteIcon'/> </span> </div> </div> </div> </b:if> </b:loop> </div> <b:if cond='data:post.allowNewComments'> <b:if cond='data:post.numComments &lt; 200'> <a class='reply-action' expr:onclick='&quot;reply(&apos;&quot; + data:comment.id + &quot;&apos;);return false;&quot;' href='#'>Responder</a><br/> <b:else/> <script type='text/javascript'> var indexc = &#39;<data:post.numComments/>&#39; var indexcomment = &#39;<data:comment.id/>&#39; //<![CDATA[ var indexpage = indexc/200; indexpage = Math.ceil(indexpage); var indexl = window.location.href; indexl = indexl.indexOf("commentPage=" + indexpage + ""); var replyAction = "<a class='reply-action' onclick='reply(&quot;" + indexcomment + "&quot;);return false;' href='#'>Responder</a><br/>"; if(indexl!=-1)if(indexc<indexpage*200)document.write(replyAction); //]]> </script> </b:if> <div class='contenedorreply' expr:id='&quot;contenedorreply-&quot; + data:comment.id'/> </b:if> </b:if> </b:loop>


El texto en rojo "respondió..." se puede modificar a gusto, o también eliminarse.

3. Agregamos el siguiente código, justo despues de <b:includable id='comments' var='post'>

<b:if cond='data:blog.pageType == &quot;item&quot;'> <script type='text/javascript'>var flagItem = 0;</script> </b:if> <b:if cond='data:blog.pageType == &quot;static_page&quot;'> <script type='text/javascript'>var flagItem = 1;</script> </b:if> <script type='text/javascript'> /* Código bajo Licencia Creative Commons 3.0 (Atribución-No Comercial) Felipe @ http://www.google.com/+FelipeCalvo */ var indexa = &#39;<data:top.id/>&#39;; var indexb = &#39;<data:post.id/>&#39;; //<![CDATA[ // Distingue entre post y página estática flagItem="0"==flagItem?"&postID=":"&pageID="; function replyOriginal() { // Hallar parámetro de colores del Iframe var b = document.getElementById("comment-editor").getAttribute("src"), a = b.indexOf("#"), b = b.substring(a), a = document.getElementById("comment-editor"); // Elimina el Iframe de donde esté y el enlace de respuesta al post a.parentNode.removeChild(a); a = document.getElementById("replypost"); a.parentNode.removeChild(a); // Definir parámetros del Iframe de respuesta y lo crea b = "https://www.blogger.com/comment-iframe.g?blogID=" + (indexa + flagItem + indexb + b) + ""; a = document.createElement("iframe"); a.setAttribute("id", "comment-editor"); a.setAttribute("name", "comment-editor"); a.setAttribute("src", b); a.setAttribute("height", "250px"); a.setAttribute("width", "100%"); a.setAttribute("frameBorder", "0"); a.setAttribute("allowtransparency", "true"); document.getElementById("comment-form-thread").appendChild(a) } function reply(b) { // Hallar parámetro de colores del Iframe var a = document.getElementById("comment-editor").getAttribute("src"), c = a.indexOf("#"), a = a.substring(c), c = document.getElementById("comment-editor"); // Elimina el Iframe de donde esté c.parentNode.removeChild(c); // Definir parámetros del Iframe de respuesta y lo crea a = "https://www.blogger.com/comment-iframe.g?blogID=" + (indexa + flagItem + indexb) + "&parentID=" + (b + a) + ""; c = document.createElement("iframe"); c.setAttribute("id", "comment-editor"); c.setAttribute("name", "comment-editor"); c.setAttribute("src", a); c.setAttribute("height", "250px"); c.setAttribute("width", "100%"); c.setAttribute("frameBorder", "0"); c.setAttribute("allowtransparency", "true"); document.getElementById("contenedorreply-" + b + "").appendChild(c); // Crear enlace de agregar comentario al post document.getElementById("replypost") || (b = document.createElement("a"), b.innerHTML = "Agregar un comentario", b.setAttribute("id", "replypost"), b.setAttribute("href", "javascript:void(0)"), b.setAttribute("class", "LoadMore"), document.getElementById("comment-form-thread").appendChild(b)); var clickOn = document.getElementById("replypost"); clickOn.addEventListener ? clickOn.addEventListener("click", replyOriginal, !1) : clickOn.attachEvent("onclick", replyOriginal); } //]]> </script>


El valor en rojo de 250px hace referencia a la altura del Iframe de respuesta, y puede ser modificado a gusto personal.

4. Finalmente agregamos algunos estilos básicos para los comentarios anidados, justo antes de ]]></b:skin>:

.respuestas-comentarios {margin:1.3em 0;line-height: 1.2em;padding: 12px;} .comment-author-thread {float:left;} #comments .contenedor-respuestas .avatar-image-container {position:static;} .contenedor-respuestas {margin-left:50px;} .comment-body-thread {padding:0.5em 0;margin-bottom:0.4em;} .comment-body-thread p {margin:0;word-wrap: break-word;} .comment-footer {margin: 0.5em 25px 1em;} .reply-action {display:block;font-weight:bold;} #comment-editor {border:0;}


Esta nueva configuración del sistema permite seguir personalizando el modo en que se muestran los comentarios, tanto los de primer como los de segundo nivel, elimina las limitaciones del sistema propuesto de Blogger, como mostrar los comentarios dentro de etiquetas <blockquote> y la fecha del comentario al lado del nombre del autor, y permite readaptar mas fácilmente los viejos hacks para los comentarios.

Lo mas importante es sin duda que todo el contenido de los comentarios lo genera el propio servidor de Blogger y se asegura su correcta indexación, en adición que los comentarios se cargan mas rápido y por tanto también la página entera.

En esta misma página se puede observar como funciona la cosa, o también en mi blog. (◠‿◠)

Personalización de los comentarios (Recursos externos adicionales)

Blogger: personalizar los comentarios
Blogger y los comentarios (2)
Blogger y los emoticones
Blogger y los comentarios (un anexo)
El formulario de comentarios (un poco más)
Identificando a los autores de los comentarios
Personalizar los comentarios del autor
Avatares y problemas con emoticones
La paginación de los comentarios de Blogger
Agregar pop-up para comentarios
Numerando los comentarios con estilo
Alternativas para numerar los comentarios

Hay muchas variantes sobre las personalizaciones en el sistema de comentarios y he agregado algunas referencias de Vagabundia, pero pueden encontrar muchas otras versiones y trabajos espectaculares en sitios como Gem@blog, Oloblogger, Ciudad Blogger, Compartidísimo, por solo nombrar algunos.



Actualización: Recomiendo la lectura de las entradas de Jorge en Vagabundia y Emilio Cobos en Emilio Cobos-CMC que han complementado el contenido de este sistema agregando nuevas funcionalidades como la de "Cancelar" una respuesta así como depurando el código Javascript.

"Autopromo"

Muchas gracias a todos quienes han compartido este sistema, es un honor para mi servirles de ayuda. :)
Un abrazo cálido para todos.

115 comentarios :

Felipe dijo...

No queda mas que arriesgarse y hacer la primera prueba. :)

Felipe respondió...

Bueno, o tal vez hacer otra mas.

dhayzon franklin respondió...
Este comentario ha sido eliminado por el autor.
Felipe Calvo respondió...

Dhayzon, esa es la idea, crear un sistema de comentarios anidados similar al de Blogger pero sin el código de ellos, sino creado y personalizado por nosotros mismos.

dhayzon respondió...

lo q yo quiero es ponerle un borde alas respuestas como el tuyo

Felipe Calvo respondió...

Cada comentario hijo lleva la clase respuestas-comentarios, entonces los estilos se los das con CSS así:

.respuestas-comentarios {
...aquí pones los estilos
}

Para el borde que uso agregas el estilo border: 1px dashed #A8A8A8;

Responder
El Potro dijo...

Una pregunta Felipe, veo que también se usa un script en este sistema, ¿hay alguna incompatibilidad con otros scripts o con los navegadores?
A mí me parece que voy a terminar implementando este porque el nativo de Blogger me da problemas con Scriptaculous, y en Internet Explorer ni se diga, simplemente no funcionan (en el caso de mi blog).
Muchas gracias por esta gran aportación, se ve que has trabajado bastante en ello, y el resultado parece bastante óptimo.

Felipe respondió...

Hola Potro.
El sistema está probado en plantillas nuevas de Blogger, las llamadas "clásicas" y en personalizadas, en todas funciona sin problema en Firefox, Chrome, IE7+, Safari, y en Opera no tengo ahora como probarlo, pero seguramente debe funcionar bien.
Las variables globales de los scripts las escogí evitando tomar las que usa Blogger y la mayoría de hacks que conozco, así que en principio no debería haber ningun problema en su implementación.

El Potro respondió...

Gracias Felipe, en un rato más me pongo a trabajar en ello y ver qué tal se comporta al menos con los scripts que uso :)
Gracias de nuevo.

Jasz Andre respondió...

Hola, muy bueno el trabajo de este artículo, lo implementé en mi blog y quedó perfecto. Pero recién ayer 21 de Marzo surgió un problema y no sé a qué se debe. Cuando implementé hace poco más de una semana los comentarios anidados según tus indicaciones, me funcionó bien en todos los navegadores: Firefox, Chrome, IE, Opera. Pero desde ayer no sé porqué en Chrome ha dejado de funcionar, el botón "responder" ya no funciona. Te dejo una imágen para que veas lo que muestra:

Imágen del Error

yo cambié el mensaje "Responder" por "Responder este hilo" fuera de eso, es tu mismo código y funcionaba perfectamente en Chrome, pero ya no desde ayer. Lo que me impresiona es que en Firefox funciona perfectamente, pero en chrome está estropeado.

No sé si se deba a alguna modificación hecha por Blogger en estos últimos días y que está causando problemas en el código que tu propones o talvés no.

Gracias de antemano por la atención y espero me puedas ayudar. Saludos.

Jasz Andre respondió...

Disculpa que haga otro comentario después de otro, pero me faltó un dato que talvés sea importante.

El error del botón "responder" en Google Chrome sucede sólo en los posts de más de 200 comentarios y apartir de la segunda página de comentarios (comentario 201 en adelante) que es donde aparece el botón "Responder" pues sabemos que en la primera pagina de comentarios no aparece el botón.

En mi perfil de blogger está mi blog por si necesitas revisar el codigo fuente de mi plantilla.

Gracias otra vez.

Felipe Calvo respondió...

Jasz,
Reviso el código fuente de tu sitio por Chrome y lo que veo es que se está insertando incorrectamente un código de imagen de imageshack entre el contenido del enlace del comentario.
La causa es el script de comentarios que tienes implementado que reemplaza los caracteres ;) por un emoticon de guiño.
Sugiero cambiar el script para que no haga ese reemplazo comentando o eliminando esta línea:

emoticon = emoticon.replace(/;\)/g,'<img src="http://img546.imageshack.us/img546/7739/winkc.gif" />');

o readaptando el sistema para que solo haga el reemplazo dentro del cuerpo en si de los comentarios.

Jasz Andre respondió...

Efectivamente, ese era el problema. Te agradesco tremendamente la ayuda, pues yo no pude ver ese detalle. Eliminé el script de emoticones temporalmente e hice las pruebas y sí, se arregló y todo anda perfecto. Ahora tengo que modificar esa línea y hacerla de manera que no entre en conflicto con tu código.

Muchas gracias por la pronta respuesta. Un muy cordial saludo y muchas gracias otra vez.

Responder
andres dijo...

Hola felipe esta publicacion la vengo buscando hace rato, la vi en VAGABUNDIA pero no me sirvio y luego ingrese a este blog segui los pasos me deja guardar pero no veo que me funcione, ojala pueda ayudarme ya que vengo tratando de darle estilo a mis comentarios y no he podido aqui te dejo mi blog y la parte donde utilizo los comentarios http://razapijaos.blogspot.com/ y http://razapijaos.blogspot.com/p/libro-de-visitas.html
te agradezco tu ayuda.

Felipe Calvo respondió...

Andres lo que sucede es que en estos momentos tienes activado el sistema que propuso Blogger; para que este sistema se habilite debes utilizar el sistema tradicional.
Ingresa a la edición HTML de tu plantilla y busca un código como este:

<b:if cond='data:post.showThreadedComments'>
<b:include data='post' name='threaded_comments'/>
<b:else/>
<b:include data='post' name='comments'/>
</b:if>

Debes cambiarlo por solo este:

<b:include data='post' name='comments'/>

Y guardas cambios.

andres respondió...

amigo muchas gracias!!! ah salido bien, jejejje que bueno, ahora solo me gustaria darte las gracias y pedirte ayuda para darle presencia a los comentarios, es decir diferenciarlos como enumerarlos y distinguirlos por color ejemplo impar un tono, pares otro, gracias por todo.
a y no supe donde colocar el 4 paso, lo intente pero me quedo mal, gracias.

Felipe Calvo respondió...

Los trucos de numeración y personalización de aspectos de los comentarios los puedes encontrar en grandes sitios como Vagabundia, Gem@blog, Oloblogger, Ciudad Blogger, Compartidísimo, por solo nombrar algunos; repetirlos por este espacio no me parece apropiado, pero atendiendo tu inquietud he agregado a la entrada varias referencias sobre como personalizar esos aspectos.

Los estilos CSS del paso 4 los agregas en tu plantilla justo antes del código ]]></b:skin> aunque solo es un código básico de guía, la ventaja de este sistema es que puedes personalizar todos los aspectos a tu gusto personal.

andres respondió...

vale FELIPE muchas gracias, empezare hacer mis modificaciones, totalmente agradecido por sus aportes y por toda la atencion brindada gracias amigo.

Responder
Yurika-Chan dijo...

En Vagabundi avi que el post es tuyo, queria felicitarte por que es exactamente lo que queriamos aquuelos que no implementamos en Blogger, solo tengo un problema en el CSS, tengo los comentarios del autor diferentes a los del resto y quisiera que las respuestas fuera igual, pero no lo gro, sabes que puedo estar haciendo mal??

Felipe Calvo respondió...

Depende del modo por el cual estes personalizando tus comentarios propios. Si estas usando algun código condicional o script para identificar tu nombre y asignar una clase al contenedor de tus comentarios propios debes hacer lo mismo en este caso para los anidados; si quieres dime como haces esa identificación y te ayudo a construir el código respectivo. Un saludo.

Yurika-Chan respondió...

Bueno el class que lo maneja en el CSS es "blog-author-comment" pero no se en que parte del nuevo CSS tengo que ponerlo o agregarle algo.

Tampoco se en que parte cambio el nombre del autor de la respuesta, es decir, para cambiar el tamaño del texto, fuente color etc, por que cuando lo cambio, cambia todo, no solo el nombre del autor.

Y por último, tengo un script de comentarios, pero no aparecen en las respuestas, solo en los comentarios normales.

Del resto funciona perfectamente!!

Felipe Calvo respondió...

Mira de nuevo el código que recién agregaste y busca la siguiente línea:

<div class='respuestas-comentarios' expr:id='data:comentariohijo.id'>

Justo debajo asegurate que esté esta línea (vas a notar un cambio sutil)

<div expr:class='&quot;comment-author-thread &quot; + data:comentariohijo.authorClass' expr:id='data:comentariohijo.anchorName'>

Y guarda cambios. Con esa pequeña modificación podrás identificar los comentarios del autor del blog usando la siguiente clase:

.respuestas-comentarios .blog-author {}

Yurika-Chan respondió...

Hice lo que dijiste pero sigue igual.....

Felipe Calvo respondió...

En cual blog estas tratando de implementarlo, o haciendo pruebas?

Yurika-Chan respondió...

Mira es en este, ese es el unico detalle que me hace falta http://dinamodeprueba.blogspot.com/2010/10/texto-extendido-2.html

Felipe Calvo respondió...

Recien vi en el blog de JMiur que pudiste terminar de configurarlo a tu gusto, esa es precisamente la ventaja de este sistema. Un saludo.

Responder
♥ Ana dijo...

Hola Felipe, yo también vengo de Vagabundia y quería darte las gracias por éste truco que llevaba un tiempo buscando

He tenido algunos problemas a la hora de ponerlo, de momento no me sale y se ven los símbolos de la última parte del código sobre la cabecera del blog, eso se lo he preguntado a JMiur, a ver si lo soluciono, jeje.

He visto en un comentario que le contestas a Andrés, que, para que funcione hay que quitar el sistema que propuso Blogger
He mirado mi platilla y tengo dos zonas iguales a esa que dices que hay que cambiar éste es el código que tengo:
  <b:if cond='data:blog.pageType == "static_page"'>

          <b:if cond='data:post.showThreadedComments'>

            <b:include data='post' name='threaded_comments'/>

          <b:else/>

            <b:include data='post' name='comments'/>

          </b:if>

        </b:if>

        <b:if cond='data:blog.pageType == "item"'>

          <b:if cond='data:post.showThreadedComments'>

            <b:include data='post' name='threaded_comments'/>

          <b:else/>

            <b:include data='post' name='comments'/>

          </b:if>

        </b:if>

¿Me podrías ayudar y decirme cuál de los dos trozos de código iguales tengo que quitar o si tengo que quitar ambos?

La zona de comentarios la tengo bastante modificada, no se si conseguiré o sabré hacer todos éstos cambios para que me funcione bien, me pierdo a la hora de saber si he añadido algún código condicional o script que ahora interfiera en éste truco aún así intentaré hacerlo y reitero las gracias por el truco porque me parece fantástico

Un saludo

Felipe Calvo respondió...

Respecto a cual de los dos còdigos cambiar deben ser ambos, de tal manera que quede asì:

<b:if cond='data:blog.pageType == "static_page"'>
<b:include data='post' name='comments'/>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<b:include data='post' name='comments'/>
</b:if>

Respecto al còdigo final de los estilos recuerda añadirlos en tu plantilla justo antes de ]]></b:skin>

♥ Ana respondió...

Hola Felipe, aquí vuelvo, estoy probando a hacer ésto en un blog de pruebas, y he cambiado los dos códigos que me has dicho aquí y te quería hacer una pregunta , a pesar de haber cambiado esos códigos me sigue saliendo la opción de Blogger de "responder" en los comentarios de dicho blog, así que no se si hago algo mal, en el blog en el que estoy probando es una plantilla Mínima sin modificar y no he hecho nada más que cambiar éstos dos códigos para ver que sucedía, ya no se si es así o se tiene que quitar la opción de "responder" de Blogger para poder poner tu truco
Un abrazo

♥ Ana respondió...

Se me había olvidado comentar que, en mi blog principal no me sale la opción de "responder" de Blogger a pesar de tener los dos códigos que te dije, supongo que será por las modificaciones que he hecho en la zona de los comentarios, tengo emoticones y demás cosillas, jejeje

♥ Ana respondió...

Felipe, ya está, he conseguido hacerlo en el blog de pruebas, muchas gracias

Felipe Calvo respondió...

Me alegra mucho Ana :)
¿Has mirado el problema del enlace de responder en el blog principal? (Igual implementando este sistema ese dejaría de ser un problema)

♥ Ana respondió...

Uissss, Felipe, perdona pero no tengo ni idea a que te refieres con lo de ese enlace, jejejeje
De todas maneras, ayer probé a poner éste sistema en el blog principal y me dio error, así que no pude ponerlo, sin embargo, en el blog de pruebas me salió genial
Bueno, más adelante lo volvereé a intentar a ver que pasa
Graciasssssss

♥ Ana respondió...

Ya no te molesto más, después de escribir mi anterior comentario, volví a intentar hacerlo y me ha salido a la primera, ya lo tengo puesto ¡¡biennnnnnnn!!, jajajajaja
Graciasss de nuevo, muchísimas gracias por la paciencia

Responder
♥ Ana dijo...

Muchas gracias Felipe, intentaré hacerlo y si no lo consigo, lo mismo vuelvo rauda y veloz a pedir socorro, jajajja
Lo del códgigo final me lo solucionó Vagabundia, me dijo que lo pusiera entre éstas dos etiquetas:
<:style>

...código...

<:/style>
Es que, lo que para la gente que entendéis de éstos temas es evidente, para otr@s como yo, en fin, que nos perdemos, jejejeje
Un abrazo y gracias

Felipe Calvo respondió...

Con mucho gusto Ana, cualquier otra pregunta aca estaremos. :)

Responder
Jorge dijo...

Hola felipe he seguido todos los detalles y todo me sale si funciona pero el responder sale arriba del nombre del que comenta he intentado varias veces con diferentes estilos pero nada no se quiere mover de ahí si sabes como bajar el responder que quede en la parte de abajo como tu lo tienes.gracias

Felipe Calvo respondió...

Es extraño porque el código HTML está estructurado de tal manera que el enlace de responder se muestre al final de un comentario de primer nivel o al final de un hilo de comentarios de segundo nivel; si gustas dime en cual blog lo implementaste y miramos los estilos para adecuarlos correctamente.

Jorge respondió...

Hola felipe si puedes echale un vistaso a esta url y vas a ver como se ve arriba del nombre del que comenta.saludos
http://www.tubetrucos.com/2012/02/colocar-los-botones-de-redes-sociales.html?showComment=1329934223165#c8092062804915571919

Felipe Calvo respondió...

Jorge, no logro ver la incidencia que comentas, no se si has realizado recientemente algun cambio.

Responder
Emilio Cobos Álvarez dijo...

Felicidades, es impresionante.
Ya he estado desde hace unos días experimentando en el blog de pruebas para incluirlos en el principal...

Por ahora he conseguido poner un botón "en el propio comentario", y estoy experimentando para ver cómo puede incluir la acción de cancelar (reconozco que esta última idea lo he sacado de Vagabundia :) pero no me apetece andar copiando código sin más, prefiero intentarlo antes)

Felicidades por el trabajo

Felipe Calvo respondió...

Gracias por el comentario Emilio.
La idea de un boton de cancelar es mas que bienvenida, en realidad, esa es la ventaja de este código, que podemos destruirlo y reconstruirlo a nuestro gusto. :)

Responder
Ernie Simoiz dijo...

Buenas tardes, al añadir estos código me sale lo siguiente:

Por favor, corrige el siguiente error y envía la plantilla de nuevo.
No se ha podido analizar su plantilla, porque no está bien formada. Asegúrese de que todos los elementos XML se han cerrado correctamente.
Mensaje de error de XML: Element type "div" must be followed by either attribute specifications, ">" or "/>".

Los códigos los añadí tal cual están acá, y revisé qué puede estar mal...la verdad, estoy perdido. Me podrías ayudar? gracias.

Felipe Calvo respondió...

No deberías tener problema agregando el código porque está bien estructurado, revisa en todo caso si estas copiando el código en el lugar correcto en el cual se indica.

Responder
Ernie Simoiz dijo...

Otra cuestión, traté de añadirlo poco a poco y tampoco resulta, me sale error, y busqué el código que mencionás en un comentario sobre blogger y está dos veces (algo así): b:if cond='data:post.showThreadedComments'

hace bastante que quiero agregar los comentarios anidados pero no puedo...necesito ayuda urgente!!!!

Felipe Calvo respondió...

El reemplazo de esa línea lo debes realizar en los dos lugares en que aparezca, uno es para las entradas del blog y otro es para las páginas estáticas.

Responder
CUENTAGOTAS dijo...

Felipe lo implementé y funciona bien, como cambio la fecha para que se muestre como el resto de comentarios y además la numeración también, gracias por tu ayuda.

http://ritmosymelodiasecuador.blogspot.com/2010/08/musica-para-el-universo-vol-5.html?showComment=1332966091420#c7132231705282563569

Felipe Calvo respondió...

Para la fecha debes cambiar este código:

<data:comentariohijo.timestamp/>

Por este otro:

<script type=&apos;text/javascript&apos;>fecharelativa(&#39;<data:comentariohijo.timestamp/>&#39;);</script>

Respecto a la numeración, debes colocar el código de la numeración "padre" dentro de la los hijos, es decir, dentro del bloque donde se muestran los comentarios de segundo nivel coloca donde gustes este código:

<span class=&apos;comentacontador&apos;>
<a expr:href=&apos;&quot;#comment-&quot; + data:comentariohijo.id&apos; title=&apos;Vinculo al comentario&apos;>
<script type=&apos;text/javascript&apos;>
contadorComentarios=contadorComentarios+1;
document.write(contadorComentarios)
</script>
</a>
</span>

Responder
Laura dijo...

Hola, lo primero quiero darte la enhorabuena por tu blog. He intentado quitar el sistema de comentarios anidados, ya que prefiero tenerlo sencillo. El problema es que me he leído todas las indicaciones, los problemas que tuvo Ana, y no consigo arreglarlo. A mi también me aparece dos veces, de esta forma:
















Y lo modifico hasta dejarlo así:









Pero aun así me sigue apareciendo el responder, y funciona.. es decir clicas y te sale el cuadrito para rellenar el comentario.

¿Cómo lo puedo arreglar??

De paso me gustaría hacerte otra pregunta.
Me gustaría incluir una línea entre comentario y comentario (línea, imagen...lo que sea). ¿Cómo lo puedo hacer?

Muchísimas gracias.

Felipe Calvo respondió...

Si implementaste este sistema debes quitar con cuidado todos los códigos que se añadieron aca, pues este sistema se integra con el de Blogger y no se maneja de forma aislada.

Si tienes el sistema propio de Blogger basta con que en la configuración del blog pongas el feed en "Corto" o "Hasta el salto de línea".

Responder
SidV dijo...

Hola Felipe, hice absolutamente todo y no me anda el botón "responder" en Chrome :(

Tienes alguna idea?
La web donde estoy teniendo el problema es la siguiente:
www.masfb.com

Saludos y desde ya, muchísimas gracias.

Felipe Calvo respondió...

No tengo como verlo SidV, pues el sistema que se ve ahora en tu blog es el de Blogger.

SidV respondió...

Qué cosas locas de la vida., debe ser por la hora hasta la que me quede adaptando el diseño. Hubiese jurado que había borrado eso de "b:include data='post' name='comments'/"

Desde ya., MUCHISIMAS GRACIAS Felipe!

Responder
Casanova dijo...

Hola amigo a mi nunca me funcionan uff k mala suerte da rabia segui al pie de letra la explicacion pero a la hora de respnder un comentario me aparece otro cuadro o textarea no se porque el textarea salio del comment-form quiero conserlo tal como esta ayudame si puedes amigo sino tendre que quedarme con el antiguo sistema por mas que kiero quitarlo jjjij y mas podrias dejar un link donde pudiera ver como dar a concer mi blog y asi subir de rango en google gracias nos vemos!!XD!! uff que largo el comentario jjajajaja espero tu respuesta mi blog: http://loscomo.blogspot.com/

Felipe Calvo respondió...

No tengo como ver a que se deba el problema, actualmente se ve el sistema clásico de Blogger.
¿En que navegador te sucede? ¿Porías dejar una captura de pantalla?

Responder
CUENTAGOTAS dijo...

FELIPE trate de cambiar los códigos pero me sale el siguiente errorÑ

No se ha podido analizar su plantilla, porque no está bien formada. Asegúrese de que todos los elementos XML se han cerrado correctamente.
Mensaje de error de XML: Open quote is expected for attribute "{1}" associated with an element type "tupe".

Como no tengo idea de programación no se que hacer.

Ojalá puedas ayudarme.

Gracias

Felipe Calvo respondió...

Prueba de nuevo copiando y pegando el código sin hacer ningun cambio adicional.

Responder
Yasna dijo...

genial! muchas gracias!! ^_^

Responder
Lluvia dijo...

Buenas noches.

Recibe un amable saludo.

Hoy me haz ayudado a cumplir uno de mis sueños: tener esos benditos comentarios anidados en mi blog y no sabes cuán agradecida estoy. Yo había trabajado mucho en ello y no me salían, bueno sí, pero con muchisímos errores... Ahora sólo debo cambiar el estilo y todo es absolutamente maravilloso :)

¡Muchas, muchas, muchas gracias! :D

Que una lluvia de éxito caiga sobre tu vida.

Lluvia.

Responder
Peter dijo...

Hola Felipe, yo implementé el código y me fue bien, muchas gracias, a veces tengo problemas para entender el CCS, sino es mucho pedir, me gustaría que me indicaras los aspectos que que modificamos con el CCS que propones, hay algunas cosas que entiendo pero hay otras cosas que debo practicar ensayo y erro para poderlas ver....

muchas gracias

Responder
TrucosVariosPC dijo...

Cómo puedo yo cambiar el color del texto de la persona que responde a un determinado comentario, es decir esto: http://dl.dropbox.com/u/49164033/kiki.png

Felipe Calvo respondió...

En el código propuesto busca esta línea:

<a expr:href='data:comentariohijo.authorUrl' rel='nofollow'><data:comentariohijo.author/></a>

Cámbiala por esta:

<a class='miclase' expr:href='data:comentariohijo.authorUrl' rel='nofollow'><data:comentariohijo.author/></a>

Y luego le das el color que gustes con CSS usando la clase "miclase".

.miclase {}

Responder
Alicia Llanas dijo...

muchisimas gracias :D

Felipe Calvo respondió...

Me alegra mucho que todo hay salido bien. :)

Responder
Obed Calva dijo...

Estos comentarios le quedaron bien a mi blog... solo tengo una duda como puedo poner la fecha abajo del nombre del autor?

Felipe Calvo respondió...

Hola Obed. Vi la respuesta que te dio JMiur en Vagabundia, así que repetirla por acá no ayudaría en mucho mas. ;)
Un saludo.

Obed respondió...

Gracias Felipe la solución de JMiur me ayudo.

Responder
@sjodiel dijo...

Excelente trabajo Felipe, estoy experimentando en el blog de pruebas para más tarde incluirlo en la principal. Pero antes quería incluir una acción de cancelar. Como puedo incluirlo? Y destacar los comentarios del autor del blog?

Desde ya le agradezco mucho.

Responder
Ruth Rojas dijo...

Sencillamente lo maximo. Gracias de verdad por esa ayuda. Awesome

Responder
María de las Mercedes dijo...

Hola felipe!!! Instalé esto en mi blog nuevito nuevito, e hice un comentario para probar pero no veo ninguna diferencia. Cuando lo guardé, no me marcó ningún error, así que no sé....el blog es tusrecetaspasoapaso.blogspot.com.ar Espero puedas decirme qué está mal...gracias!

Responder
Marcelo dijo...

Buenas noches,
Por alguna razón me funciono el código, sin embargo mi plantilla tenía un botón de responder (que nunca llegó a funcionar el comentario anidado) y debajo un nuevo enlace responder que si funciona... como hago para eliminar o mantener este botón responder original y que cumpla su funcionalidad?? gracias por su respuesta... este es mi blog: http://blogpetrolero.blogspot.com Saludos

Responder
Anthony Santiago dijo...

Simplemente Gracias!!!

Responder
Beyka ♫ dijo...

Hola Felipe, no conocía tu blog pero me alegro de haber llegado hasta aquí :)
Yo también vengo de Vagabundia, la entrada que allí encontré no me sirvió pero esta me ha ido genial.
Me gustaría que los comentarios en mi blog llegaran a quedar como aquí, es decir: las respuestas encuadradas y sin esa línea horizontal que me gustan tan poco :P
Y no sé cómo cambiar los atributos del estilo para lograr esto.

Muchísimas gracias por tu tiempo :)
Un abrazo!

Beyka ♫ respondió...
Este comentario ha sido eliminado por el autor.
Felipe Calvo respondió...

Beyka, los estilos que uso para eso son estos básicamente:

.respuestas-comentarios {margin:1.3em 0;line-height: 1.2em;border: 1px dashed #a8a8a8;padding: 12px;width: 520px;}
.comment-author-thread {float:left;}
#comments .contenedor-respuestas .avatar-image-container {position:static;}
.respuesta {margin-left:50px;}


Cualquier valor lo puedes modificar a gusto (es la ventaja de este sistema), sugiero el que está en negritas para ajustar el ancho de cada una de las respuestas, y el margin-left al final para configurar la separación respecto de cada respuesta respecto al comentario "padre".

Beyka ♫ respondió...

Muchisísimas gracias Felipe :) Es justo lo que necesitaba. Soy tan mala en esto que aún no sé qué codigos necesito agregar para dejarlo así y sin tu ayuda no habría podido!
Un abrazo :D y gracias por la velocidad de respuesta!!

Beyka ♫ respondió...

Disculpa que vuelva a molestarte, pero, ¿qué debería añadir para poder dar estilo a los comentarios padre?
Muchas gracias...

Felipe Calvo respondió...

Depende del blog donde lo estés implementado, acá no tocamos el código relacionado con los comentarios padre.

Responder
ANDRESFELIPE dijo...

me aparece 2 veces la respuesta por que aparece en donde se responde y alfinal de los comentarios ?

Felipe Calvo respondió...

No tendría por qué suceder,
¿tienes algún ejemplo online donde se pueda ver el problema?

Responder
Wmaster Consultores Global dijo...

Hola gracias me funciono este truco y me quedo genial.. =)
Por cierto le invito a visitar mi blog personal ojala sea de su gusto: wmasterhelp.blogspot.com

Responder
valitis dijo...

ayuda, ya hice paso a paso pero aún no me sale, cuando dices "justo antes" o "justo después" eso significa que lo pogna en la misma linea o en una linea contigua???
no se si me entiendes pero necesito ayuda

Felipe Calvo respondió...

Justo antes es en la línea anterior del código indicado, justo después a la línea siguiente luego del código indicado.

Responder
Emilio Cobos Álvarez dijo...

Felipe, te paso una pequeña modificación que le hice a tu sistema hace relativamente poco. Es sólo un poco más de corrección en el código y la opción de cancelar ;)

Y sobre todo volver a darte las gracias por el trabajo que hiciste desarrollando estos comentarios.

Responder
Karla Castañeda dijo...

Qué gran trabajo hiciste Felipe. Hace tiempo que le traigo ganas a este sistema que tan amablemente facilitas; ya te contaré cómo me fue. Muchas gracias por el gran aporte.

Responder
JugadorCompulsivo dijo...

Gran trabajo... por fin me resulto en mi blog... pero...
el cuadro de comentarios, no el de respuestas, se achicó a la mitad del ancho y el texto personalizado que tenia sobre el cuadro de comentario también quedó en media pantalla...

captura de pantalla
http://3.bp.blogspot.com/-y-eiGwiR0hE/UJlq4ZaONdI/AAAAAAAABDY/_-PiFcm2AyE/s1600/blog.jpg

no he podido solucionarlo, así que recurro al experto...

Tienes alguna idea de que puede ser

Responder
Loko Ser dijo...

estube busncando en artos lugares y en ninguno me resultadaba. si ya me estaba doliendo la cabesa ya ke no podia implementarlo a mi plantilla clasica.
Muchas gracias felipe te pasaste

Responder
Pepe Pilato dijo...

Me aparece un error:

Error al analizar XML, línea 1525, columna 6: The value of attribute "id" associated with an element type "null" must not contain the '<' character.

Responder
Graciela de Palomas dijo...

Si supieras Felipe ahhh, lo logré :)
He estado molestando a Jmiur, tanto tiempo con mi plantilla sin mirarla, hoy pude, muchas gracias!

Felipe Calvo respondió...

JMiur es un ángel :)

Me alegra que lo hayas puesto Graciela, un gusto saludarte.

Responder
Felipe Calvo dijo...

Hola a todos!

Lamento la demora en responder los comentarios de esta publicación, pensé en ponerme al día justo en este momento pero teniendo en cuenta que algunas preguntas ya llevan varias semanas sin respuesta a lo mejor vosotros ya has logrado resolver las inquietudes referentes a este tema.

Un saludo cordial para todos desde Bogotá, Colombia.

Responder
Gerardo N dijo...

Dando una manita de gato me quedo perfecto aca: www.musicapic.net

Responder
Medianoche Tropical dijo...

Hola Felipe.Yo uso blogger y quisiera poder mostrar los comentarios en orden inverso, 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 !!

Felipe Calvo respondió...

Medianoche Tropical, mostrar los comentarios de Blogger en órden cronológico empezando por el mas reciente hasta el más antiguo no es posible, al menos directamente desde el servidor de Blogger.

No lo he probado pero se que se puede hacer con Javascript o empleado otro sistema de comentarios de terceros como Disqus.

Responder
jooexl dijo...

Hola agradecerte por el esfuerzo que te tomo hacer esto me gustaria mejorar mi sistema de comentarios y como ponerle un stilo muy adaptable y ponerle enumeracion pero no logro mejorarlo este es mi blog aver si me ayuda http://goo.gl/ImHKqc

Responder
Nebetawy dijo...

Muchas muchas gracias! Después de muchas horas rompiéndome los cuernos con otros códigos, este es el único que me ha funcionado! :-)

Responder
Diana Zarza dijo...

No sé si este hilo seguirá activo. En fin, buenas :)
He intentado varias veces los pasos que has indicado, pero siempre me aparece un error XML, donde me dice: Element type "div" must be followed by either attribute specifications, ">" or "/>".
He mirado posibles soluciones y sé que el primer código que hay que sustituir (para desactivar primero los comentarios anidados de Blogger, b:if cond='data:post.showThreadedComments') tiene que aparecer dos veces, pero a mí solo me aparece una. En cambio, debajo de "static_page" y debajo de "item" (que es donde, por lo que he visto, tendría que estar el código mencionado) me aparece este otro código: b:include data='post' name='comment_picker'/>

¿Alguna solución? Llevo horas desesperada por poner los comentarios anidados :S
Gracias por todo,

Z.

Felipe Calvo respondió...

El código <b:if cond='data:post.showThreadedComments'> debe aparecer, tal como lo mencionas, una vez en tu plantilla y ese código debes cambiarlo de la manera que se explica aquí.

Si tienes algo como esto:

<b:if cond='data:blog.pageType == "static_page"'>
<b:include data='post' name='comment_picker'/>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<b:include data='post' name='comment_picker'/>
</b:if>

Cámbialo por esto:

<b:if cond='data:blog.pageType == "static_page"'>
<b:include data='post' name='comments'/>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<b:include data='post' name='comments'/>
</b:if>

Saludos.

Responder
Ana Bites dijo...

¡¡Muchísimas gracias!! Llevaba un buen rato dándole vueltas a otro código que anda por ahí, pero no me funcionaba. En cambio, este ha funcionado a la primera y está genial explicado cómo insertarlo. ¡Mil gracias de nuevo!

Responder
Andross CC dijo...
Este comentario ha sido eliminado por el autor.
Responder
Andross CC dijo...

hola amigo, te quisiera preguntar si sabes por que me marca un error al momento de guardar. me dice Attribute "id" was already specified for element "div" → <"div" id='comment-form' → (id='comment-form-thread') ← > . gracias por su atencion

Andross CC respondió...

no ya no te preocupes ya lo solucione despues de minitos y segundos de pensarlo, igual te felicito y agradesco por este post, me sirvio mucho

Responder
♥ Ana dijo...

Hola Felipe, hace tiempo te escribí aquí con diversas dudas sobre lis comentarios anidados y, conseguí ponerlos gracias a ti, me han funcionado perfectamente hasta hace unas semanas, si pincho en responder no se me abre el rectángulo de comentar, no se si me explico bien, el caso es que, desde el móvil me funciona pero, si pincho en ver como ordenador o ver versión web ya no funciona, no se si tendrá algo que ver con que ahora el blog, ya no sea http sino https porque veo que hay otras cosas que no me funcionan, como los emoticones y alguna cosa más ¿ podrías ayudarme? , muchas gracias de antemano
Un saludo
Ans

Felipe Calvo respondió...

Hola Ana. El sistema en principio sigue funcionando correctamente, no ha habido cambios mayores en cuanto a la codificación de variables internas de Blogger, por lo que creo que debe ser algún problema puntual en tu blog. ¿Sigues teniendo el problema?

Responder
♥ Ana dijo...

Felipe, pues vas a tener razón y es mi ordenador o soy yo jejeje porque, tampoco me funciona aquí la opción de responder y, en mi blog, sigue igual

Te voy a explicar algo a ver si puedo hacerlo con claridad, yo tengo el navegador Mozilla y también he probado con Chrome, con ninguno de los dos me funciona la opción de responder, sin embargo, ésta mañana he probado con Internet Explorer entrando en mi blog como anónimo y, de principio me sale un aviso en el rectángulo de responder que pone:

Icono de información
Este contenido no se puede mostrar en un marco
Para ayudar a proteger la seguridad de la información que especifica en este sitio web, el editor de este contenido no permite que se muestre en un marco.
Puede intentar lo siguiente: Abra este contenido en una nueva ventana

Le he dado a abrir el contenido en una nueva ventana, y ahí he escrito el comentario, luego he seleccionado mi perfil para contestar: cuenta de google, he accedido y se ha publicado el comentario y, a raíz de hacer eso, con Internet Explorer ya me sale siempre la opción de responder a la primera, he hecho eso mismo con Mozilla y con Chrome y nada de nada, sigue sin funcionar y, como uso siempre Mozilla, me supone un problema, además, no se si al resto de la gente que entra en mi blog le sucede también esto
Todo ésto lo he notado hace unas semanas que empecé de nuevo con el blog a raíz de dejarlo unos meses, y ha sido a raíz de poner mi blog Https en vez de Http, que lo mismo no tiene nada que ver, pero, aparte de eso, tampoco me funcionan los emoticonos, tampoco mi índice, en fin, unas cuantas cosillas y por eso le echaba la culpa a lo de Https porque, al acceder a la plantilla para editar el Html me pone:
Si mezclas HTTP con HTTPS en el tema, es posible que afecte a la seguridad de tu blog y cause problemas a quienes lo visiten a través de HTTPS.

Así que estoy hecha un lio, no se porque pasa ésto
Madre mía, perdona el tremendo rollo que te he metido pero quería intentar explicarlo de la mejor manera posible
Muchas gracias por tu atención
Un saludo

Responder
♥ Ana dijo...

Y, aún a riesgo de ser una pesada recalco que, con el móvil, sin ponerlo en ver como ordenador, ni ver en versión web, me funciona perfectamente y, es desde ahi donde contesto a la gente con responder, misterio total para mi

Felipe Calvo respondió...

Prueba lo siguiente:

en el código Javascript del paso 3 cambia esto

b = "http://www.blogger.com/comment-iframe.g?blogID=" + (indexa + flagItem + indexb + b) + "";

por esto

b = "https://www.blogger.com/comment-iframe.g?blogID=" + (indexa + flagItem + indexb + b) + "";

y esto

a = "http://www.blogger.com/comment-iframe.g?blogID=" + (indexa + flagItem + indexb) + "&parentID=" + (b + a) + "";

por esto

a = "https://www.blogger.com/comment-iframe.g?blogID=" + (indexa + flagItem + indexb) + "&parentID=" + (b + a) + "";

Como verás este cambio hay que hacerlo solamente en dos líneas de código.

Una vez hayas hecho el cambio guarda los cambios e intenta nuevamente.

Me has hecho caer en cuenta que dado que ahora el uso de HTTPS en Blogger es obligatorio todo lo que se cargue por HTTP puede generar errores, así que he actualizado el contenido de esta misma entrada para que los cambios se reflejen.

Saludos.

♥ Ana respondió...

Olé olé y olé, ¡¡ya está!!, con éstos cambios ya funciona, a mi me daba la sensación de que era por algo del HTTPS pero, claro, al no entender mucho del tema no tenía claro lo que tenía que cambiar y me daba miedo tocar cosas
Muchísimas gracias , de verdad, era algo que me traía loca perdida jajajaja
Ahora voy a ver si puedo arreglar lo de los emoticonos y el índice, no se, espero no liar nada en el blog, jejeje
Un millón de gracias por tu ayda
Un saludo enorme

♥ Ana respondió...

Una cosa, aquí me ha pasado algo curioso también, en el anterior comentario mío, ya ves que me ha dejado escribir con Responder, pero, al publicarse mi comentario y volver a intentar pinchar en responder, no me sale el rectángulo de comentar ni tampoco me sale el otro rectángulo el de Agregar un comentario, si se va uno, también se va el otro, no se si me explico, me he salido de tu página , he vuelto y ahora me vuelve a salir, lo he probado varias veces y me pasa siempre igual, no se si será algo temporal
En mi blog no me pasa eso, ya parece que funciona siempre

Felipe Calvo respondió...

Es por la forma en que tengo implementado el sistema acá, no te preocupes; para que eso no suceda se puede utilizar la modificación que presentó JMiur en Vagabundia cuando recompartió este sistema.

♥ Ana respondió...

Ah, vale, solo te lo comentaba por si había algo funcionando mal
Te vuelvo a dar las gracias por tu ayuda, eres muy amable
Un saludo

Responder

Publicar un comentario