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 — 16.002 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.

Livros do Maujor

Desenvolvimento com Padrões Web? Adquira os livros do Maujor
Clique a "capinha" para visitar o site do livro.

capa livro Grid Layout   capa livro html5   capa livro css3   capa livro HTML5 e CSS3   capa livro RWD   capa livro jQuery   capa livro Bootstrap3   capa livro ajaxjQuery   capa livro css   capa livro html   capa livro javascript   capa livro jQuery Mobile   capa livro jQuery UI   capa livro SVG   capa livro foundation   capa livro Sass e Compass

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.

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

  1. 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/). […]

  2. brunoNo Gravatar disse:

    muito obrigado

  3. Marcos RibeiroNo Gravatar disse:

    Show, vou tentar colocar em meu site.

  4. LincolnNo Gravatar disse:

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

  5. 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.

  6. Mestres AscensosNo Gravatar disse:

    gostei da instrução.

    parabéns pelo site

  7. Elaine BatistaNo Gravatar disse:

    Legal , a postagem , parabens

  8. Daniel AmbrosioNo Gravatar disse:

    Bom gostei

  9. JUNIOR SILVANo Gravatar disse:

    muito bom parabens!!

  10. ViniciusNo Gravatar disse:

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

    aceita parceria com links acesse

    Site da NET | Portal de Novidades

  11. Ramon SamudioNo Gravatar disse:

    .Otimo trabalho.Parabéns

  12. Ramon SamudioNo Gravatar disse:

    Parabéns pelo blog.Otimo trabalho

  13. DiogoNo Gravatar disse:

    Quando sai seu livro de html5?

  14. Ramon SamudioNo Gravatar disse:

    Otimo trabalho!Parabéns pelo blog.

  15. 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