sábado, 20 de marzo de 2010

Avatares de Wordpress en Blogger

Josepin hizo su comentario haciendo uso de la opción Nombre/URL... ¿Cómo es posible que veamos ahora su careto virtual o avatar en sus comentarios en este blog?

Esto tiene su explicación: he decidido premiar mis comentaristas, usuarios de Wordpress, o de cualquier otro gestor de contenidos, haciendo que se vean sus avatares de Gravatar (o el que tengan on-line) cuando comentan aquí. ¿Cómo? Muy sencillo. Aunque aviso que no es algo automático, sino que ha de hacerse manualmente, aunque lleva apenas cinco minutos hacerlo.

Lo primero es localizar en la plantilla esta línea (¡cuidado, podrían haber dos iguales!), tras expandir las plantillas de los artilugios:

<a expr:href='data:comment.authorUrl'><data:comment.author/></a>
Debajo, hay que montar un condicional así:

<b:if cond='data:comment.author == "NICK_COMENTARISTA"'>
<span class='avatar-image-container' style='margin-left:8px;margin-top:30px;'><a expr:href='data:comment.authorUrl'><img src='URL_IMAGEN_AVATAR'/></a></span>
<b:else/>
Donde NICK_COMENTARISTA será el nombre del comentarista que usa normalmente para comentar, y la URL_IMAGEN_AVATAR será la dirección de la imagen.

No recomiendo tomar la URL directamente de Gravatar, porque si no Blogger dará error al intentar hacer Vista Previa o Guardar la Plantilla. Es mejor tomar esa dirección, usar un acortador de URL y usar esa dirección corta en URL_IMAGEN_AVATAR. Yo recomiendo TinyURL, porque es rápido y permite personalizar la dirección.

También me ha funcionado alojar la imagen en Blogger (Álbumes Web de Picasa, que es donde van a parar las imágenes que subimos para nuestras entradas), con la URL sin acortar. Pero he decidido probar el otro sistema, a ver si cambiando el usuario de avatar en Gravatar, cambia también aquí en este blog.

El código de arriba hay que repetirlo tantas veces como comentaristas quieras que su avatar sea visible, cambiando sus correspondientes datos.

Pero para que Blogger deje guardar los cambios definitivamente, hay que cerrar los condicionales del <b:if>, y el lugar que mejor resultado me ha dado es después del último código. Para que lo entendáis mejor, coloco la secuencia entera, con dos comentaristas, resaltando los comienzos y finales de las etiquetas <b:if>:

<b:if cond='data:comment.author == "NICK_COMENTARISTA_1"'>
<span class='avatar-image-container' style='margin-left:8px;margin-top:30px;'><a expr:href='data:comment.authorUrl'><img src='
URL_IMAGEN_AVATAR_1'/></a></span>
<b:else/>

<b:if cond='data:comment.author == "
NICK_COMENTARISTA_2"'>
<span class='avatar-image-container' style='margin-left:8px;margin-top:30px;'><a expr:href='data:comment.authorUrl'><img src='
URL_IMAGEN_AVATAR_2'/></a></span>
<b:else/>
</b:if>
</b:if>


El resultado es que se vean los avatares habituales de nuestros comentaristas, con el añadido de que la propia imagen lleva a su bitácora, ya que hace de enlace:

Por último, los usuarios de Blogger que queramos que se nos vea la cara en Wordpress lo tenemos mucho más sencillo: entramos en Gravatar, nos registramos gratuitamente, con una dirección de e-mail, subimos nuestro avatar y listo. Y cuando comentemos en Wordpress, usando esa misma dirección de e-mail para comentar, saldrá la imagen que subimos en Gravatar como avatar.

Blogger, ¿para cuando soporte para Gravatar...?


Referencias:

Basado en una idea de Oloman: Personalizar avatares comentaristas.

16 comentarios:

  1. Genial :)
    muy pero que muy bien pensado :)

    ResponderEliminar
  2. Yo utilice Gravatar durante algun tiempo. Lo incluia de firma en los foros, pero algo ocurrio y me dejo de funcionar, desde entonces lo tengo abandonado, le dare un vistazo.
    Saludos.

    ResponderEliminar
  3. Ya tengo mi avatar para Wordpress, gracias José GDF, un abrazo.

    ResponderEliminar
  4. Mmm... no me acabo de enterar... Si hay que meter el nick y la url... quiere decir que cada vez que alguien escriba un comentario luego tenemos que ir a modificar eso a mano? :S

    ResponderEliminar
  5. ¡Gracias, Uve! La idea es original de Oloman, pero dándole otro uso práctico.

    De la misma manera, podría hacer una imagen para que se muestre con tu nick, porque no está limitado a usuarios de Wordpress, sino que detecta el nick y con él actúa el condicional de Blogger. ¡Pero tranquila, que no lo voy a hacer! ;)

    Gravatar está más pensado para comentar en blogs de Wordpress. No sabía de su utilidad para las firmas de los foros... De todas formas puedes ponerte una imagen cualquiera, ¿no, Carlos63?

    Yo también lo tengo hace tiempo, Carlos Soler. Es muy aburrido comentar en un blog de Wordpress sin Gravatar. Por eso pensé en esta solución a medias para los usuarios de Wordpress que comentan en Blogger.

    erMoya, como te lees los tutoriales "a saltos" (tú mismo me lo dijiste una vez), pues te citaré una frase del mismo texto de esta entrada, para que lo entiendas:

    He decidido premiar mis comentaristas, usuarios de Wordpress, o de cualquier otro gestor de contenidos, haciendo que se vean sus avatares de Gravatar (o el que tengan on-line) cuando comentan aquí.

    Eso quiere decir que de entre mis comentaristas habituales, he escogido los dos o tres que no tienen cuenta de Blogger, he colocado a mano en la plantilla los códigos del tutorial con sus nicks, y una URL con su correspondiente imagen.

    ¡Y ya está! A partir de ese momento, cada vez que comenten esas personas, de la manera habitual, con su nick y su URL, saldrá automáticamente la imagen que cada uno tiene asignada a su nick, y la URL que ellos mismos pongan. No tengo que hacer nada más, salvo añadir o quitar posibles nicks de la plantilla. Simplemente, esas personas comentan de su manera habitual, y el hack hará el resto. Incluso con los comentarios antiguos, por supuesto.

    ResponderEliminar
  6. José, chato. Estoy viendo eso en mi blog pero no sé exactamente dónde lo tendría que montar, cuando indicas que debajo.

    Te dejo lo que tengo yo, porque incluí el formato de comentarios de otro blog que me gustaba y no sé si se estropeará o qué


    <a expr:href='data:comment.authorUrl'><data:comment.author/></a>

                <b:else/>

                  <data:comment.author/>

                </b:if>

                <data:commentPostedByMsg/>

              </dt>

              <dd class='comment-body'>

                <b:if cond='data:comment.isDeleted'>

                  <span class='deleted-comment'><data:comment.body/></span>

                <b:else/>

                  <p><data:comment.body/></p>

                </b:if>

              </dd>

              <dd class='comment-footer'>

                <span class='comment-timestamp'>

                  <a expr:href='data:comment.url' title='comment permalink'>

                    <data:comment.timestamp/>

                  </a>

                  <b:include data='comment' name='commentDeleteIcon'/>

                </span>

              </dd>

            </b:loop>

          </dl>

              


    Sería justo debajo de la que tú indicas, en la primera línea, no??? Bueno, gracias.

    ResponderEliminar
  7. Hola, Vanessa. Veo que te ha ido bien el truquillo para lo de los códigos ;)

    Antes de hacer nada de nada, guarda una copia de tu plantilla actual. Pincha en Descargar plantilla completa, y si algo sale mal, siempre podrás volver a donde estabas.

    Efectivamente, es como dices, colocas el código, modificado con los datos que tengas que poner, justo debajo de esa primera línea que me facilitas. Quedaría en total, para un ejemplo de dos comentaristas, así:

    <a expr:href='data:comment.authorUrl'><data:comment.author/></a>


    <b:if cond='data:comment.author == "NICK_COMENTARISTA_1"'>
    <span class='avatar-image-container' style='margin-left:8px;margin-top:30px;'><a expr:href='data:comment.authorUrl'><img src='URL_IMAGEN_AVATAR_1'/></a></span>
    <b:else/>

    <b:if cond='data:comment.author == "NICK_COMENTARISTA_2"'>
    <span class='avatar-image-container' style='margin-left:8px;margin-top:30px;'><a expr:href='data:comment.authorUrl'><img src='URL_IMAGEN_AVATAR_2'/></a></span>
    <b:else/>
    </b:if>
    </b:if>


                <b:else/>

                  <data:comment.author/>

                </b:if>

                <data:commentPostedByMsg/>

              </dt>

              <dd class='comment-body'>

                <b:if cond='data:comment.isDeleted'>

                  <span class='deleted-comment'><data:comment.body/></span>

                <b:else/>

                  <p><data:comment.body/></p>

                </b:if>

              </dd>

              <dd class='comment-footer'>

                <span class='comment-timestamp'>

                  <a expr:href='data:comment.url' title='comment permalink'>

                    <data:comment.timestamp/>

                  </a>

                  <b:include data='comment' name='commentDeleteIcon'/>

                </span>

              </dd>

            </b:loop>

          </dl>

    Insisto: esto es una cosa muy experimental (por eso lo he publicado aquí, y no en Blogconsejo), haz la copia de seguridad de la plantilla antes de hacer nada, y ten especial cuidado con el tema de las URL de las imágenes, que sean las correctas y todo eso.

    ¡Suerte! :)

    ResponderEliminar
  8. Bueno, me has pillado de puente y hasta ahora no he podido ver esto. Felicidades por la idea. Las mismas cosas se pueden hacer normalmente de diversas maneras, pero también hay distintas cosas que se pueden hacer con la misma idea. Saludos.

    ResponderEliminar
  9. Jajajajaja, mi careto como explicación, genial. Como se nota que ahora tienes mas tiempo para publicar después de haber acabado la plantilla. Sin peloteos, cada vez me gusta mas tu blog tocayo.

    ResponderEliminar
  10. Si lo piensas bien, Oloman, es prácticamente lo mismo que tú escribiste en su día, pero dándole otro uso más externo al blog, pensando en algunos lectores.

    Ahora falta ver si al cambiar la imagen de gravatar, también cambia por aquí. Tendré que porbar con mi propia cuenta de gravatar y poniendo mi propio nick a ver si funciona...

    josepin, en teoría tengo más tiempo al haber acabado la plantilla, pero estas semanas estoy hasta las orejas de trabajo y me tienen mareado con los turnos, así que sigo sin tener tiempo para postear con calma.

    Me alegro que te guste cada vez más mi blog, tocayo... ¡Imagínate lo que te gustará cuando escriba algo interesante :D !

    Fuera coñas, esto lo he hecho pensando en comentaristas habituales del blog para dar un poco de vidilla a esta parte del blog cuando intervenís. Mientras Blogger no soporte Gravatar, habrá que apañarse con ñapas como ésta...

    Un cordial saludo a los dos y mis disculpas si no he dado señales de vida antes. :(

    ResponderEliminar
  11. Hola José, voy a ver si puedo hacer esto porque al final esta semana no he parado, bufffff. Ahora que estoy con más tiempo probaré este finde, si no lo consigo te digo para ver que he hecho mal.

    El tema es que no suelo tener comentaristas habituales, me escriben varios (afortunadamente) pero no son los mismos. ¿qué me aconsejas en ese caso?

    Gracias, Vanessa

    ResponderEliminar
  12. Hola de nuevo, Vanessa.

    Esto está pensado para mostrar avatares de comentaristas que no tienen perfil de Blogger. Por ejemplo, usuarios de Wordpress o de otras plataformas de publicación de contenidos, aunque también funcionaría en caso de comentaristas que hacen uso de la opción Nombre/URL sin poner URL.

    Piensa un momento a ver si tienes comentaristas habituales con ese perfil, y si no es así, yo ni me molestaría, hasta que se diera ese caso, pues los que comentan desde Blogger ya se les ve el careto.

    Si aún a pesar de todo lo intentas, ya me contarás cómo te ha ido, pero recuerda hacer una copia de la plantilla antes de hacer nada, que se trata de una zona delicada la que hay que editar.

    ResponderEliminar
  13. Pues yo quiero mi avatar de wordpress por aquí rulando pero ya! :P

    Es broma, tómate tu tiempo jeje... de paso te doy la url de mi avatar http://espineli.es/wp-content/uploads/purpura.jpg ;-)

    Me parece muy buena idea esto que has publicado, intentaré implementarlo en el de blogger, saludetes!

    ResponderEliminar
  14. Espineli, dicho y hecho ;)

    En lugar de enlazar a tu avatar lo he hecho como digo en el post, enlazando a la imagen generada en Gravatar, que en tu caso, a día de hoy, es ésta.

    Como sueles cambiar de avatar cada poco tiempo, nos servirá para saber si cuando cambia en Gravatar tu imagen, por aquí también cambia... O no... Ya veremos, es algo que no he probado todavía...

    ...Sí, eres mi cobaya para este experimento, ¡je, je, je!

    Si a alguien más le apetece que le agregue, ya sabe lo que tiene que hacer ;)

    ResponderEliminar
  15. ¡Buenas noticias! Espineli ha cambiado su avatar de Gravatar y los cambios se están reflejando en este hack del blog automáticamente.

    ResponderEliminar
  16. Mooolaaa!!! :-D De puta madre, me alegro que haya funcionado el experimento.

    Salu2!!

    ResponderEliminar

IMPORTANTE: los comentarios en este blog están cerrados por tiempo indefinido.

No hay normas especiales para publicar comentarios en este blog. Sólo las básicas: respeta, no insultes, y no hagas SPAM descaradamente. Tampoco se admitirán comentarios que vulneren la Ley. Cualquier aportación, consulta y crítica es bienvenida, a condición de cumplir estas normas básicas.

Si lo que quieres es ponerte en contacto directamente conmigo, dispones para ello de un formulario de contacto.

Nota: solo los miembros de este blog pueden publicar comentarios.