Fork me on GitHub
Você esta em:Home » Dicas e Tutoriais » User gravatar em seus códigos

User gravatar em seus códigos

User gravatar em seus códigos

Antes de deixar no seu sistema um usuário sem avatar, tente verificar antes se ele possui Gravatar atravéz do email dele!

Oque é Gravatar?

Gravatar, avatar reconhecido globalmente (em inglês, Globally Recognized Avatar), é um serviço de disponibilização de avatares via associação a endereços de correio eletrônico cadastrados, para uma variedade de sítios, inclusive os baseados em WordPress. Com o Gravatar, suas mensagens podem ser facilmente identificadas, em qualquer site que use o recurso, pela imagem que o represente e que você tenha cadastrado no sistema.

Funcionamento:

No Gravatar, usuários podem registrar uma conta baseada em seu endereço de email, enviar uma imagem para ser usada como avatar e eassim ficar associada a sua conta. Plugins Gravatar estão disponíveis para softwares de blog, assim, quando visitantes publicarem comentários no blog, o software de blog verifica se o email possui uma conta no serviço do Gravatar. Se possuir, o Gravatar é mostrado no comentário do usuário.

O Gravatar é suportado nativamente no WordPress desde a versão 2.5 e Redmine e para aplicações desde a versão 0.8 (2008-12-07).O suporte ao Gravatar é também oferecido através de módulos para o Drupal.

Um avatar Gravatar pode ter até 512 pixels de largura, é sempre no formato quadrado e mostrado por padrão nas dimensões de 80 por 80.  Se a imagem enviada para ser avatar, for maior que o necessário, o avatar é redimensionado. Cada Gravatar tem classificação etária, o que permite ao webmaster controlar o tipo de Gravatar que será mostrado em seu site.

Webmasters também pode configurar seu sistema para mostrar uma imagem gerada, o Identicon, quando o visitante não possuir um avatar atribuído a seu email.

Como usar em seu sistema?

No jQuery

 $(document).ready(function(){

var email = $("#email"),
 avatar = $("#avatar");

email.blur(function() {
 avatar.css("background-image","url(http://www.gravatar.com/avatar/" + MD5(email.val()) + ")");

});

});

No HTML


<div id="avatar"><img src="thumb.png" width="80" height="80"/></div>

<form>
 <input type="text" onFocus="if(this.value=='Email Address') this.value='';" onBlur="if(this.value=='') this.value='Email Address';" value="Email Address" name="s" id="email" />
 </form>

Pode-se fazer também com o PHP executado a função


<?php

$email = 'deivison.arthur@gmail.com';
 $var='http://www.gravatar.com/avatar/'.md5(strtolower($email)).'.php';
 echo "<img src='" . $var . "' />";

?>

No exemplo abaixo troque o email da URL para outro que possua conta no Gravatar para realizar o teste.

Até a próxima!

Sobre o Autor

Designer, Web Developer & Linux Administrator

Meu nome é Deivison Arthur, tenho 29 anos, sou Administrador Linux, Analista de Sistema, Webdesigner e Pesquisador. há mais de dez anos. Nasci no Rio de Janeiro, atualmente trabalho como Gerente de Tecnologia e E-commerce at Grupo FFernandes e Freelancer nas horas vagas. Desenvolvimento em Joomla, Wordpress, Drupal, Magento e outros GPLs...

Quantidade de Artigos : 105

Comentários (2)

  • Patrick

    Muito legal essa dica mano..sei que é chato pedir as coisas mas seu eu soubesse nem perguntaria..como não existe um plugin pra colunistas no wordpress resolvi usar essa solução que vc postou e ajuda bastante..porem estou tentando colocar o nome da coluna e o nome do colunista com o link da pagina da coluna..só que qualquer coisa que altero no codigo faz ele parar de rodar..ou seja só consigo editar antes de “:

    sabe como posso fazer um codigo semelhante a esse que eu consiga inserir essas informações?

    obrigado

    Responder
  • Alex

    Parabéns muito bacana a matéria e o site.

    Responder

Enviar Comentário

© 2012 Feito com Wordpress, Desenvolvedor: Deivison Arthur Lemos Serpa

Ir para cima