Como utilizar Gravatar

Gravatar, es un servicio que brinda la posibilidad de mostrar un avatar (Avatar es la representación gráfica mediante un dibujo o fotografía de una persona para su identificación) asociado a nuestro e-mail.

Como funciona?
Los usuarios deben registrarse en Gravatar en donde podrán subir una imagen la cual desean asociar a una dirección e-mail, luego cada vez que registren este email, el sitio web hará una llamada a Gravatar para solicitar el avatar asociado a la cuenta e-mail, si existe se mostrará la imagen y de lo contrario mostrará una imagen por defecto.

Existe documentación detallada de como integrar Gravatar con nuestro sitio web en Gravatar implementor's guide, esto de acuerdo al lenguaje de programación o gestor de contenido que utilizamos.

Utilizar Gravatar con PHP
Como primer ejemplo veremos el colocarlo en cualquier página web utilizando PHP, ello se hace llamando a una imagen desde Gravatar, solo nos hace falta construir el URL apropiado al cual debemos acceder, esto lo hacemos de la siguiente forma:

  1. $grvMail = "username@domain.com"; // email que deseamos consultar
  2. $grvInit = "spacer.gif"; // imagen si no existe avatar
  3. $grvSize = 40; // tamaño del avatar
  4.  
  5. $grvHttp = "http://www.gravatar.com/avatar.php";
  6. $grvHttp.= "?gravatar_id=".md5($grvMail);
  7. $grvHttp.= "&default=".urlencode($grvInit);
  8. $grvHttp.= "&size=".$grvSize;

Luego de ello mostramos la imagen basado en el URL recién construido, esto lo hacemos de la forma:

  1. <img src="<?php echo $grvHttp; ?>" alt="User Gravatar">

WordPress Gravatar Plugin
wp-gravatar es un plugin para Wordpress que permite la integración automática con Gravatar de forma sencilla y rápida. Primero descargamos wp_gravatar.zip, extraemos los archivos y lo subimos a la carpeta de plugins (wp-content/plugins/), luego de ello activamos el plugin.

El siguiente paso es editar el archivo comments.php de nuestro template el donde insertamos el siguiente código en el lugar donde deseamos que se muestre el avatar.

  1. <img src="<?php gravatar(); ?>" alt="" />

Esto mostrará la imagen en su tamaño original de 80x80 pixels, si deseamos colocarlo en otras dimensiones, por ejemplo a 40x40 pixels podemos hacerlo de la siguiente forma:

  1. <img src="<?php gravatar("R", 40); ?>" alt="" />

Como pueden observar es muy sencillo de implementar y le dará una apariencia personalizada a nuestros comentarios, de esta forma podemos hacer nuestro web mas interactivo con nuestros visitantes.

Posts Relacionados

Comentarios Total 51 comentarios


unijimpe
Publicado: 17/05/2008 10:34 pm

Hola, como pueden ver hemos habilitado Gravatar en este blog, así que a partir de ahora podrán visualizar sus avatar cuando envíen cualquier comentario.

osmanpun
Publicado: 18/05/2008 12:04 am

Hola, me alegra que instalaste gravatar en tu blog, yo tambien lo acabo de implementer y me va muy bien. Solo para comentarte que hay un plugin muy sencillo de usar llamado EasyGravatar y te ahorras mucho trabajo y codigo. Buen blog!!

Giancarlo
Publicado: 18/05/2008 12:08 pm

Hola Jim, Hay otro super bueno que se llama WP-Gravatar.

Te dejo el link:

http://wordpress.org/extend/plugins/wp-gravatar/

Saludos!

» Enlaces en Diigo 05/19/2008 | DigiZen
Publicado: 19/05/2008 1:33 am

[...] Como utilizar Gravatar » unijimpe [...]

artberri
Publicado: 20/05/2008 10:16 am

Buenas,

Me alegro de que integraras Gravatar, pero deciros que desde Wordpress 2.5 gravatar viene integrado ocn wordpress para usarlo en los themes:

http://codex.wordpress.org/Using_Gravatars

No es necesario instalar ningun plugin, simplemente utilizar la funcion: ‘get_avatar’

[J]
Publicado: 29/05/2008 10:56 pm

Veamos si funciona…

Cris
Publicado: 04/06/2008 5:07 am

Prueba… xD

bujero
Publicado: 06/06/2008 9:37 pm

Pues ami no me funciono, que paso??
como le hago para ver los avatares??

A plantilla regalada... | La Palitroche
Publicado: 27/08/2008 10:28 am

[...] una gran diferencia de diseño en tu blog, esto se puede agregando un pequeño gráfico como un gravatar a tus post o un widget como el de MyBlogLog también puede haber una gran diferencia. Y si le sabes [...]

jacro
Publicado: 29/08/2008 2:13 pm

prueba 2

A plantilla regalada... | Móchate
Publicado: 29/08/2008 4:05 pm

[...] una gran diferencia de diseño en tu blog, esto se puede agregando un pequeño gráfico como un gravatar a tus post o un widget como el de MyBlogLog también puede haber una gran diferencia. Y si le sabes [...]

megaman
Publicado: 03/09/2008 5:11 pm

Muchas gracias, por fin he podido poner gravatar en mi página

olbapnauj
Publicado: 11/10/2008 8:50 pm

Muy buen tutorial.

Johnny
Publicado: 18/10/2008 10:17 pm

Que padre tutorial, y gracias por la ayuda

pablo
Publicado: 16/11/2008 1:50 pm

:D

marcelo
Publicado: 01/12/2008 10:30 am

muy bueno.

Leto
Publicado: 05/12/2008 1:47 am

Unijimpe, Si tengo mi blog con Gravatar instalado, pero no tengo el campo “email” en mi formulario de comentarios.

1.¿Mi blog va a saber que avatar jalar de Gravatar?
2.¿Necesito colocar el campo email de todas maneras?
3.¿Cómo funcionaría Gravatar sin el campo email?

Gracias
Leto

sepractico
Publicado: 17/12/2008 12:59 pm

works ?

Montaditolomo
Publicado: 09/02/2009 4:12 pm

Prueba…

rod750
Publicado: 06/03/2009 1:04 pm

Probando :/

rod750
Publicado: 06/03/2009 1:06 pm

Funciona! xD Pensé que si alguien ya había registrado mi nick no funcionaria.

ZoniK
Publicado: 27/03/2009 12:31 am

pues yoo ise todo pero no logro activar mi gravatar en mis comentarios ni los avatares para los users :S alguna ayuda adicional??

hinchasdepcopiapo
Publicado: 16/05/2009 7:33 pm

Buenisimo

Alejandro
Publicado: 22/05/2009 9:24 pm

Buenas! Excelente el post, ahora bien, como hago para integrar la imagen del gravatar en el index.php, o sea, asociada al mail del autor de una entrada? Gracias de antemano…

eduardo
Publicado: 25/05/2009 12:06 pm

a ver probemos el gravatar

eduardo
Publicado: 25/05/2009 12:06 pm

ooooooooorale si funciona, sale gracias por el truco

Mattoxa
Publicado: 27/06/2009 12:37 pm

Genial! muchas gracias! como siempre Unijimpe

jajaj
Publicado: 14/07/2009 11:59 pm

xd!

Jorge
Publicado: 05/08/2009 12:11 pm

Oye muy bueno el blog…sigue adelante.

Gus
Publicado: 28/08/2009 11:00 am

Me parece que es una herramienta muy “mona” esta padre!
guauuu!

Softnic
Publicado: 01/09/2009 10:31 pm

Muy bueno! Gracias

SagaDef
Publicado: 04/09/2009 3:14 pm

calando…

Defisto
Publicado: 04/09/2009 4:37 pm

Prueba de Comprobacion No. 2.0

Xtreme05
Publicado: 15/09/2009 12:00 pm

ta bueno el post

Roxana Villalobos
Publicado: 22/09/2009 12:59 am

Sirve con Macintosh?

Ryuvens
Publicado: 22/09/2009 8:06 am

MMM….que buena

Mario
Publicado: 01/10/2009 11:16 am

Muy bien explicado !

Fawkes
Publicado: 03/10/2009 11:08 am

Funka xD

cultura walkie
Publicado: 11/10/2009 12:00 pm

jsjsj

myonlyaccount
Publicado: 11/11/2009 3:20 pm

probando gravatar

stlnewborn
Publicado: 19/11/2009 2:25 pm

Veremos a ver si funciona!!!

stlnewborn
Publicado: 19/11/2009 2:28 pm

Efectivamente, muchas gracias!

ooo
Publicado: 26/11/2009 11:53 pm

esta muy bueno

j
Publicado: 01/12/2009 8:30 am

probando

Cris
Publicado: 05/12/2009 7:23 am

Pruebo a ver si sale, siento tanto email

(_1_) Trasero
Publicado: 12/12/2009 6:59 pm

jo jo jo

aqui el mensaje

aqui el mensaje

amelia
Publicado: 13/12/2009 11:23 am

no me salio el condenado avatar!!!
como hago

PP
Publicado: 13/12/2009 9:00 pm

probando

Alex Franco
Publicado: 20/01/2010 3:48 pm

Mil gracias por el tutorial, y vaya que tu sitio últimamente me ha servido en demasía =D

mokodedios
Publicado: 27/01/2010 9:36 pm

Muy bueno exelente.

ELOSIN
Publicado: 03/02/2010 4:28 pm

probando

 

Comentar

En este blog los comentarios están moderados, no aparecerán inmediatamente en la página al ser enviados. Por favor, evita los comentarios ofensivos u obscenos por que no serán aprobados.

(Requerido)

(Requerido, no será publicado)

(Requerido)

(Tags aceptados: <a> <em> <strong> <code> <ul> <li>)