Categories: phptodas

Inserir avatar em comentários

Blogs e sites que se utilizam de um sistema de comentários para as matérias postadas, normalmente adotam a prática de adicionar o avatar do leitor que deixou o comentário, em geral localizado no lado direito do quadro que contém o comentário.

Introdução

Gerenciadores de conteúdo disponibilizam a funcionalidade “avatar”, quer nativamente como é o caso do WordPress quer com uso de plugins como é o caso do Drupal.

Avatar, em linguagem de computadores, é uma imagem que identifica um usuário da Internet e está, normalmente, vinculada a um endereço de e-mail. Existem ferramentas de acesso gratuito que criam e hospedam avatares públicos e você pode utilizar uma dessas ferramentas para criar seu avatar com uso de uma imagem qualquer ou mesmo de uma foto sua.

A ferramenta mais famosa e usada para hospedar avatares é o site Gravatar. Se você ainda não tem um avatar público visite o site, faça seu cadastro e crie um ou mais avatares vinculados ao seu(s) endereço(s) de email.

Recentemente, ao criar o sistema de comentários para meu novo site sobre SVG, a ser lançado em breve, pesquisei a possibilidade de inserir o gravatar do usuário com script PHP personalizado, pois resolvi não usar um gerenciador de conteúdo pronto, tal como fiz com o site do Maujor.

Encontrei a solução no site Gravatar e adianto que é ridiculamente fácil conseguir o que eu estava pretendendo. Assim, resolvi postar essa matéria com a pretensão que ela possa ser útil para alguém.

Gravatar

A documentação para desenvolvedores do site Gravatar ensina que para inserir um avatar em uma página web basta usarmos um código HTML como mostrado a seguir:


<img src="http://gravatar.com/avatar/HASH?d=v1&s=v2&r=v3&f=y" alt="" />

O HTML mostrado insere uma imagem na página. As imagens estão hospedadas nos bancos de dados do site Gravatar e lá foram inseridas quando o usuário criou seu avatar no site. O endereço da imagem aponta para o diretório avatar na raiz do site Gravatar e nesse diretório chama o arquivo de imagem HASH.

HASH é o código criptografado do email do usuário. O código é obtido com uso da função md5() do PHP, como mostrado a seguir:


$hash = md5( strtolower( trim( "endereco@exemplo.com.br" ) ) );

O código criptografado com md5() do meu email é: 8965d9e6ea6c50cacc844164599e1417.
Faça a seguinte experiência: copie e cole na barra de endereços do seu navegador o seguinte: http://gravatar.com/avatar/8965d9e6ea6c50cacc844164599e1417 e o meu avatar será mostrado em todo seu esplendor.

Assim, para se obter um avatar qualquer basta codificar o email e criar o endereço para a imagem como mostrado.

Mas, podemos ainda passar os seguintes parâmetros facultativos no URL que aponta para a imagem do avatar:

  • d: O tipo padrão de avatar a inserir.
  • s: As dimensões do avatar.
  • r: Restrições à visualização do avatar.
  • f=y: Mostrar avatar padrão

Parâmetro d

Esse parâmetro define a imagem padrão a ser exibida caso o endereço de e-mail não esteja associado a um avatar. Os valores possíveis para esse parâmetro e o respectivo tipo avatar retornado são:

  • 404 – Erro 404.
  • mm – Silhueta de uma pessoa.
  • identicon – Forma geométrica criada com base no valor de HASH.
  • monsterid – Desenho de um monstro.
  • wavatar – Desenho de uma face.
  • retro – Face pixelated ao estilo arcaico.

Se esse parâmetro não for definido a imagem a ser exibida será a letra G, deitada, na cor branca, em fundo azul como o logotipo do site Gravatar.

Parâmetro s

Esse parâmetro define as dimensões da imagem. Se esse parâmetro não for definido a imagem será de 80 x 80px. Por padrão o formato do avatar é quadrado sendo admitido um avatar mínimo de 1 x 1 px e máximo de 512 x 512px. O valor desse parâmetro é um número compreendido entre 1 e 512 inclusive.

Parâmetros f e r

O parâmetro f admite o valor y e se destina a forçar o avatar padrão. Trata-se de um parâmetro para uso em casos especiais quando desejamos que todos os avatares, sejam eles os cadastrados ou os inexistentes, sejam o avatar padrão.

Quando cadastramos um avatar no site Gravatar somos solicitados a classificá-lo levando em conta o seu conteúdo. Um avatar pode ser uma inocente foto do usuário ou até mesmo uma imagem de sexo explícito ou de extrema violência. A classificação é uma espécie de auto-censura e possibilita ao usuário ao qual o avatar pertencer fornecer uma indicação dos sites e da audiência para as quais o avatar pode ser exibido.

O parâmetro r possibilita filtrar a apresentação do avatar de acordo com a auto-censura definida pelo seu usuário e admite os seguintes parâmetros:

  • g: apropriado para ser mostrado em qualquer site para qualquer tipo de público.
  • pg: pode conter cenas rudes, trajes sumários, palavrões e violência.
  • r: pode conter palavrões pesados, violência intensa, nudez ou uso de drogas pesadas.
  • x: pode conter cenas de sexo explícito e extrema violência.

Os valores estão listados em ordem crescente e adotar um deles habilita também os anteriores. Por exemplo: r=pg mostra os avatares auto-censurados como g e como pg.

Código PHP

Para inserir o gravatar em uma página PHP, supondo que o endereço de e-mail foi fornecido em um campo de formulário com o atributo name=email use o script mostrado a seguir:

.
.
  $email = strip_tags($_POST['email']); 
  $hash = md5( strtolower( trim( $email ) ) );    
  $avatar = "http://www.gravatar.com/avatar/$hash?d=monsterid&s=50&r=g";    

echo "<div class='avatar'><img  src='$avatar' alt='' /></div>";

Página interativa

Desenvolvi uma página interativa para você fazer algumas experiências com requisição de avatar como mostrado nessa matéria.

Maujor

View Comments

Share
Published by
Maujor

Recent Posts

Teste seu conhecimento #20

Em 2006 comecei a publicar nesse blog uma série de desafios CSS que consistiam em…

7 anos ago

Teste seu conhecimento #19

Há muito tempo que eu não publico um "Teste seu conhecimento". Esta semana, revendo algumas…

9 anos ago

JavaScript bubbling e capturing

Introdução Elementos da marcação HTML podem ser aninhados uns dentro de outros, criando-se uma cadeia…

10 anos ago

HTML5 – W3C versus WHATWG

HTML5? Web universal? É comum eu me deparar com dúvidas sobre a HTML5 não só…

10 anos ago

Seria esse o futuro das imagens responsivas?

Quem é Tab Atkins Jr? Tab Atkins Jr, um desenvolvedor americano, trabalhou durante muitos anos…

10 anos ago

BrazilJS Conf 2013

Pessoal, a BrazilJS Conf 2013 disponibilizou para o Maujor cupons de desconto para serem oferecidos…

11 anos ago