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:
- Informativo: Novos Gadgets e Atualizações Automáticas
- Informativo: 10 anos de Blogger e Novidades
- Gadget Marcadores do Blogger – Novidades
- Novo Resumo de Postagens do Blogger – Hack “Leia mais”
- WidegetBox – O seu Blog dentro de um Gadget
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:
- Editar seu Perfil – TUb Novos Parte 4
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”:
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:
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=’"comment-" + data:comment.id’>
<a expr:name=’"comment-" + 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=’"comment-author " + 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 Blogger . É bom testar os dois modelos para ver qual vai funcionar melhor.
Artigos que podem te ajudar mais:
- TweetMeme – RT para seus artigos no Twitter
- LinkWithin – Artigos Relacionados no Roda-pé com Imagens
- Usando Imagens no Blog Blogger
Fonte: Show your face! (Blog oficial do Blogger)
Legal! Legal! Legal!!! Vou testar no novo layout.
Mas eu não quero dominar nada não meu filho kkkkkk =)
beijos!♥
@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.
Rá! Curti! Vou testar agora mesmo no meu blog de testes. 🙂
Se torna uma coisa mas profissional, atrai mais o leitor com essas imagens!
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
adorei essa dica vou coloca em meu blog deixa o blog com uma aparência melhor
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 🙂
@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.
@César Sá,
Já fiz a modificação no código que você solicitou.
Obrigado Marcos, espero que tenha ajudado outros tbm.
Beleza esse funcionou…mais eu pensei que a pessoas pudesse fazer upload da foto para o avatar.
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!
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?
@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.
Maravilha,
O melhor e mais simples tutorial que encontrei.
Funcionou direitinho, sem dificuldade.
Grata por compartilhar
ótimo tutorial…deu certo aqui…valeu mais uma vez
Muito obrigado pela dica. Funcionou perfeitamente!!!
Estou iniciando um novo blog, e agora estou configurando o layout dele. Esta dica me ajudou muito, obg!
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!
@Andreia,
Não há nada pra fazer. Se a pessoa tem foto e o perfil é público ele vai aparecer nos comentários normalmente.
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
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! 😀
Menino! Não é que deu certo!
Obrigada pela dica.
Abraço
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
Obrigado por avisar.
Esse realmente é um problema que vou corrigir de agora pra frente!