Avatar nos comentários do Blogger

Temos mais um recurso em comemoração aos 10 aninhos do Blogger – a possibilidade de mostrar (ou não) os avatares dos comentaristas na nem tão nova assim caixa de comentários abaixo incorporada.

O Blogger oferece três formas de posicionamento da caixa de comentários: página inteira, pop up e postagem abaixo incorporada. Essa última foi lançada no ano passado e trouxe um ar mais profissional aos nossos blogs, porém sem o uso de avatares, que foi mantido nas duas outras opções.

Hoje foi anunciado no Blogger Buzz que agora está disponível o uso de avatares também para a terceira opção. Para ativar esse recurso, entre no painel do Blogger,  procure por configurações e na aba comentários encontre Mostrar imagens de perfil nos comentários? Marque a opção sim.

Como na vida dos usuários do Blogger nem tudo são flores, o recurso NÃO  funciona em templates personalizados; somente nos templates disponibilizados por eles.

Graças à astúcia e à boa vontade dos metabloggers, o mistério já foi desvendado.

O Sergio Estrella e o Marcos Lemos anunciaram no Twitter a solução:

• Avatar nos Comentários do Blogger [Ferramentas Blog]

• Ativando as fotos/avatares nos comentários do Blogger [Icebraker]

Entre no html do template, marque expandir modelos de widgets e procure por:

<dl id='comments-block'>
    <b:loop values='data:post.comments' var='comment'>
    <dt class='comment-author' expr:id='&quot;comment-&quot; + data:comment.id'>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:comment.author == data:post.author'>
<a expr:href='data:blog.homepageUrl'>
<data:comment.author/></a><b:else/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow' shape='rect'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if></b:if>
<data:commentPostedByMsg/>
</dt>
<b:if cond='data:comment.author == data:post.author'>
<dd class='blog-author-comment'>
<p><data:comment.body/></p>
</dd>
<b:else/>
<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>
</b:if>
<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='data:comment.url' rel='noindex,nofollow,noarchive' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:loop>
</dl>

Substitua tudo por:

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

Visualize o blog e se tudo estiver ok, salve o template. Este será o resultado:

E eu vou continuar sonhando com um sistema de comentários semelhante ao dos blogs que usam a plataforma Wordpress, com direito à nome/url/email #prontofalei