Avatar/Fotos nos Comentários do Blogger

MarcosManga Mostrar Imagens de Perfil nos Comentários.
Continuam aparecendo novidades nos serviços nativos do Blogger em comemoração pelos seus 10 anos. Agora é possível que as pessoas ao deixarem comentários nos artigos do seu blog, deixem também a foto ou imagem, chamado de “Avatar” – que é a figura que as pessoas escolhem para representá-las na internet nas redes-sociais, por exemplo. Este novo recurso é nativo, mas precisa de alguma adaptações do seu Template para funcionar.

 

Agora os comentários que são deixados em nossos blogs podem ter cara, uma identificação visual, se as pessoas ao deixarem um comentário desejarem assim. Isso entra nos novos recursos prometidos pela equipe do Blogger em comemoração pelos 10 anos do Serviço. Entre os novos recursos apareceram também:

 

O Avatar que aparece ao deixar um comentário é apenas para quem tem algum tipo de identidade e perfil ativo com Avatar em serviços como o próprio Blogger. Saiba como configurar seu perfil do Blogger lendo:

Aproveitem e deixem comentários aqui para testar o novo recursos… rs!

 

Como ativar  Avatares nos Comentários do seu Blog.

Se você acabou de criar um blog no Blogger, é bem provável que esse recursos já esteja funcionando normalmente, basta que você mude as configurações no Painel para ativar.

É preciso ativar o recurso em todos os casos para fazer o novo código funcionar. Assim, para verificar se o seu blog precisa de modificações no código-fonte ou não, abra o painel do Blogger e clique no menu “Configurações” ~> “Comentários”:

 

configuracoes-comentarios-blogger

 

Role a página até achar a opção “Mostrar Imagens de Perfil nos Comentários?”, conforme mostra a imagem abaixo, e clique em “Sim”, lembrando de salvar as modificações:

 

avatar-menu

 

Agora vá até seu blog e teste os comentários e veja se algo mudou e se há imagens ao lado dos comentários que foram deixados. Caso não tenha mudado nada, significa que seu template precisará de um código para ativar o serviço em templates que não são o padrão do Blogger.

 

Adicionando o código.

Essa é a parte difícil do novo recurso para quem quer ativar isso no blog. Fiz aqui no [ Ferramentas Blog ]  e em outros dois testes e deu certo, sem erros aparentes, mas usa uma configuração básica do layout. As customizações para o novo modelo de comentários vamos ter que esperar a Ariane, MamaNunes, HTMHelen e a Juliana Sardinha (elas vão dominar o mundo) providenciarem os tutoriais assim que elas aprenderem como faz. Publicarei aqui os links quando elas souberem como faz.

Atualização: A Helen Fernanda já publicou uma forma de customização:

Mas fica bom, mesmo no modo padrão e você pode fazer os seus testes.

 

Sempre recomendamos que se faça testes em um blog paralelo antes de aplicar no seu blog principal e lembre-se de fazer um backup de seu blog para evitar arrependimentos depois e poder voltar atrás.

 

Vá ao menu “Layout” ~> “Editar HTML” e marque a opção “Expandir modelos de Widgets” para poder visualizar o código-fonte de seu blog por inteiro. Agora procure pelas linhas semelhantes a essas em seu código:

 

          <data:post.numComments/> <data:commentLabelPlural/>:
        </b:if>
      </h4>

      <dl id=’comments-block’>
        <b:loop values=’data:post.comments’ var=’comment’>
        <div class=’comment’>
          <dt class=’comment-author’ expr:id=’&quot;comment-&quot; + data:comment.id’>
            <a expr:name=’&quot;comment-&quot; + data:comment.id’/>
            <b:include data=’comment’ name=’commentDeleteIcon’/>
            <b:if cond=’data:comment.authorUrl’>
              <a expr:href=’data:comment.authorUrl’ rel=’nofollow’><b><data:comment.author/></b></a>
            <b:else/>
              <b><data:comment.author/></b>
            </b:if>
            <p><data:comment.timestamp/></p>
          <
/dt>
          <dd class=’comment-body’>
            <b:if cond=’data:comment.isDeleted’>
              <span class=’deleted-comment’><data:comment.body/></span>
            <b:else/>
              <p><data:comment.body/></p>
            </b:if>
          </dd>
          </div>
        </b:loop>
      </dl>

<p class=’comment-footer’>
<b:if cond=’data:post.embedCommentForm’>

 

O que está marcado em verde é para você saber a posição das linhas que quero destacar. Tudo o que está marcado de vermelho será suprimido e trocado pelo novo código que faz os Avatares funcionarem.

 

Então, identifique o que destaquei em vermelho e troque inteiramente pelo novo código que segue. É grande e não altere nada nele, NADA:

 

<!– Novo Comentario Inicio do codigo –>

<dl expr:class=’data:post.avatarIndentClass’ id=’comments-block’>
  <b:loop values=’data:post.comments’ var=’comment’>

  <div class=’comment’>

    <dt expr:class=’&quot;comment-author &quot; + data:comment.authorClass’ expr:id=’data:comment.anchorName’>
      <b:if cond=’data:comment.favicon’>
        <img expr:src=’data:comment.favicon’ height=’16px’ style=’margin-bottom:-2px;’ width=’16px’/>
      </b:if>
      <a expr:name=’data:comment.anchorName’/>
      <b:if cond=’data:blog.enabledCommentProfileImages’>
        <data:comment.authorAvatarImage/>
      </b:if>
      <b:if cond=’data:comment.authorUrl’>
        <a expr:href=’data:comment.authorUrl’ rel=’nofollow’><data:comment.author/></a>
      <b:else/>
        <data:comment.author/>
      </b:if>
      <data:commentPostedByMsg/>
    </dt>
    <dd class=’comment-body’>
      <b:if cond=’data:comment.isDeleted’>
        <span class=’deleted-comment’><data:comment.body/></span>
      <b:else/>
        <p><data:comment.body/></p>
      </b:if>
    </dd>

<dd class=’comment-footer’>
  <span class=’comment-timestamp’>
    <a expr:href=’data:comment.url’ title=’comment permalink’>
      <data:comment.timestamp/>
    </a>
    <b:include data=’comment’ name=’commentDeleteIcon’/>
  </span>
</dd>

  </div>

  </b:loop>
</dl>

<!– Novo Comentario Final do codigo –>

 

Agora clique no botão laranja “SALVAR MODELO” e veja o resultado em seu blog. Isso vai se aplicar até nos comentários antigos, em todos os artigos do seu blog.

 

Gostaria de lembrar que esse recursos eu copiei do Template Minima, padrão do Blogger. Como citei acima, já temos algumas opções de tutoriais para customizar o modelo padrão. As linhas que destaquei em negrito no código são as que mantêm os estilo dos comentários do seu blog e podem ser apagadas do código se desejar. Já o trecho destacado em rosa é que faz aparecer a data e o link do comentário – se não quiser que apareça, como fazemos aqui no [ Ferramentas Blog ], pode apagar.

Para mais sobre esses novos recursos, não deixe de acompanhar nossas atualizações constantes e diárias. Uma boa opção para sempre se manter informado é assinar, gratuitamente, nosso Feed.

 

ATUALIZAÇÃO: O Sergio Estrella do IceBreaker também apresentou uma solução, veja qual fica melhor para seu blog: Ativando as fotos/avatares nos comentários do Bloggerurl_icon . É bom testar os dois modelos para ver qual vai funcionar melhor.

 

Artigos que podem te ajudar mais:

 

Fonte: Show your face!url_icon (Blog oficial do Blogger)

25 Comentários

  1. @MamaNunes,
    Agora esperamos seu tutorial ensinando como fazer as customizações… rs!
    Ah! Sobre dominar o mundo, ao menos o Virtual vcs já estão dominando… hahaha.

    Responder

  2. Oi, Marcus!

    Gostei dessa novidade, viu! É bom pq dá uma personalização a mais aos comentários do blog. Parabéns pelo tutorial explicando como fazer essa mudança.

    Abraço

    Responder

  3. Marcos, testei os dois, ambos funcionaram, mas creio que o seu esteja com um pequeno problema.

    Com a sua solução percebi que ao ativar o avatar a linha onde fica a data, hora, permalink e opção de apagar o comentário some. Já com o tutorial do IceBreaker isso não aconteceu. Será que foi só comigo? Percebi que a data e hora dos comentários aqui do Ferramentas Blog sumiram, ou nunca existiram (não lembro rsrs). Isso nem é algo importante, principalmente para blogs que moderam comentários, já blogs como o meu é algo as vezes essencial rsrs.

    Espero ter ajudado :)

    Responder

  4. @Césas Sá,

    Realmente eu omiti essa linha de código. É que aqui no [ Ferramentas Blog ] eu realmente não uso.
    Estou providenciando a correção.

    Responder

  5. Caro Marcos!! Comecei aqui minha busca pela informação de novo recurso!! e fui para o blog da Helen. Tenho que te parabenizar pela qualidade dos textos que melhora cada dia mais… quero aprender a escrever assim! um abraço!

    Responder

  6. Fiz tudo direitinho,mas não aparece as fotos,sá a minha,nos comentários dos outroaparece o símbolo do blogeer.
    O que sera que ta errado?

    Responder

  7. @Saionara,

    Vc não fez nada de errado.
    Algumas pessoas não têm fotos configuradas no Perfil, então não vai aparecer nada mesmo.
    O símbolo do Blogger fica no lugar de quando a pessoa não tem um perfil com fotos.

    Responder

  8. Obrigada pelas dicas! Fiz exatamente como você sugeriu, mas só consigo visualizar a minha foto. Não vejo as fotos dos que deixaram seus comentários (mesmo que tenham hospedado suas fotos em seus perfis). Como proceder para que apareçam as fotos deles também? Abração!

    Responder

  9. @Andreia,
    Não há nada pra fazer. Se a pessoa tem foto e o perfil é público ele vai aparecer nos comentários normalmente.

    Responder

  10. Olá Marcos,

    Excelente artigo. Apesar do Blogger ter lançado a novidade em 2009, confesso que apenas agora estou adaptando meus templates. E seu artigo foi fundamental.

    Na oportunidade, deixo uma sugestão: um artigo com dicas de customização da div .comment

    Abraços e parabéns pelo Ferramentas Blog.

    Sds.

    Marynet

    Responder

  11. Gostei muito da dica. Seu site é como um mapa onde encontro tudo para não ficar perdida no mundo dos blogs!
    Encontrei um template para um novo blog que estou criando, e me incomodava ver que os comentários não tinham foto, agora já está resolvido o problema! :D

    Responder

  12. primeiramente Muito Obrigado pela ajuda, mas eu me perdi porque sou daltonico e não consegui diferencia as cores vermelha e verde…

    da proxima vez usa cores mais escuras e outra mais clara, exemplo: preto e outra laranja…

    claro que se não for pedi demais. ;D

    Responder

Deixe um comentário

Ao comentar você concorda com nossa Política de Comentários.