Logo do siteSilhueta da face do Maujor seguida do texto Maujor o dinossauro das CSS

Menu hamburger Três barras horizontais na cor laranja destinadas a ser clicada para abrir o menu menu do site

Você está no BLOG do Maujor. IR PARA O SITE

Inserir avatar em comentários

Publicado em: 2011-02-10 — 17.568 visualizacoes

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.

Desenvolvimento com Padrões Web? Adquira os livros do Maujor
Visite o site dos livros.

Esta matéria foi publicada em: 2011-02-10 (quinta-feira). Subscreva o feed RSS 2.0 para comentários.
Comente abaixo, ou link para http://www.maujor.com/blog/2011/02/10/inserir-avatar-em-comentarios/trackback no seu site.

16 comentários na matéria: “Inserir avatar em comentários”

  1. ValdenorNo Gravatar disse:

    Ajudou bastante, estava um pouco perdido no assunto.
    Valeu…

  2. SISTEMA DE COMENTÁRIOS COM PHP – PARTE 5 - Inserindo Gravatar nos comentários | André Buzzo disse:

    […] É algo um tanto quanto simples, e para mais informações, recomendo a todos que procurem, no site do Gravatar a documentação referente. Ou, se preferirem algo já mais “abrasileirado”, vocês podem acessar o Blog do Maujor (maujor.com/blog/2011/02/10/inserir-avatar-em-comentarios/). […]

  3. brunoNo Gravatar disse:

    muito obrigado

  4. Marcos RibeiroNo Gravatar disse:

    Show, vou tentar colocar em meu site.

  5. LincolnNo Gravatar disse:

    Ótima dica! Parabéns pelo site! Sucesso!

  6. FabioNo Gravatar disse:

    Parabéns maujor ótimo trabalho.

    Gostaria de saber onde consigo um script para gestor de conteudo para site e sistema de comentários, sem usar os já feitos.

  7. Mestres AscensosNo Gravatar disse:

    gostei da instrução.

    parabéns pelo site

  8. Elaine BatistaNo Gravatar disse:

    Legal , a postagem , parabens

  9. Daniel AmbrosioNo Gravatar disse:

    Bom gostei

  10. JUNIOR SILVANo Gravatar disse:

    muito bom parabens!!

  11. ViniciusNo Gravatar disse:

    fica bem legal comentarios com avatares! otima dica! Valew!

    aceita parceria com links acesse

    Site da NET | Portal de Novidades

  12. Ramon SamudioNo Gravatar disse:

    .Otimo trabalho.Parabéns

  13. Ramon SamudioNo Gravatar disse:

    Parabéns pelo blog.Otimo trabalho

  14. DiogoNo Gravatar disse:

    Quando sai seu livro de html5?

  15. Ramon SamudioNo Gravatar disse:

    Otimo trabalho!Parabéns pelo blog.

  16. Ramon SamudioNo Gravatar disse:

    Parabéns!Otimo trabalho.

Comentário:





Teclar "Enter" cria um novo parágrafo. Teclar "Shift + Enter" causa uma quebra de linha.

Subscribe without commenting

topo