TweetMeme- Inserindo botão de Retweet no Blogger

A nova febre é o botão de RT do site TweetMeme. Muitos bloggers já adotaram esse recurso, que mostra todos os retweets de um determinado post. Por insistência do @luanfr, acabei aderindo também e não é que ficou bonitinho? Além de mostrar os Rts, o botão ainda possibilita que os leitores enviem nossos posts diretamente para a página do Twitter. E é simples de instalar.

Para colocar o botão embaixo dos posts:

Entre no html do template (layout>editar html), marque a caixa “expandir modelos de widgets” e procure (Ctrl+F) por:

<div class='post-footer'>

Cole logo acima o seguinte código:

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<script type="text/javascript">
tweetmeme_source = 'NOME NO TWITTER';
</script>
<script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script>

</b:if>

Substitua NOME NO TWITTER pelo seu nome de usuário e salve.

A parte em vermelho é referente ao código do TweetMeme e a parte em verde é referente às condicionais para que o botão só apareça nos posts e não na página inicial do blog.

Para colocar o botão entre o título e o post, encontre:

<div class='post-header-line-1'/>

Cole o código anterior embaixo dessa linha e salve.

Você pode integrar o botão de RT com um anúncio, do tipo banner ou meio banner (Isso vai depender do tamanho da área de postagem do seu blog). Basta usar o seguinte código:

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<table

style="border: 1px solid rgb(255, 255, 255); background:rgb(255, 255, 255);text-align: left; width: 100%;" cellpadding="2" cellspacing="2 ">

<tbody>

<tr>

<td valign="undefined" align="left">CÓDIGO DO TWEET MEME </td>

<td valign="undefined" align="undefined"> CÓDIGO DO ANÚNCIO </td>

</tr>

</tbody>

</table> </b:if>

Aí está o resultado que eu obtive no meu blog de testes, usando um banner:

Lembrando que o código do AdSense tem que ser convertido. Use o site Blogcrowd.

• Anúncios nas postagens do Blogger

Caso você não use publicidade no seu blog, coloque um mensagem para os seus leitores. E se quiser ir mais além, use o programa NVU portable para construir o seu próprio código:

• Mensagens no rodapé dos posts
• Aprendendo a criar tabelas em HTML

Exemplo de uma mensagem legal:

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<table

style="border: 1px solid rgb(255, 255, 255); background:rgb(255, 255, 255);text-align: left; width: 100%;" cellpadding="2" cellspacing="2 ">

<tbody>

<tr>

<td valign="undefined" align="left">CÓDIGO DO TWEET MEME </td>

<td valign="undefined" align="undefined">

<b>Siga este blog no <a href='http://LINK DO SEU TWITTER'>Twitter </a> e fique por dentro das novidades!</b>

</td>

</tr>

</tbody>

</table> </b:if>

Recomendo que essas alterações sejam feitas, primeiramente, em um blog de testes.

ATUALIZAÇÃO EM 27/08/2010

Para que o botão fique à direita do anúncio, inverta os códigos:

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<table

style="border: 1px solid rgb(255, 255, 255); background:rgb(255, 255, 255);text-align: left; width: 100%;" cellpadding="2" cellspacing="2 ">

<tbody>

<tr>

<td valign="undefined" align="left">CÓDIGO DO ANÚNCIO</td>

<td valign="undefined" align="undefined"> CÓDIGO DO TWEETMEME </td>

</tr>

</tbody>

</table> </b:if>

Caso você não use anúncios, siga esta dica do Ferramentas Blog:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<p style='display: inline; float: right; margin-left: 5px'>

Adicione aqui o código do botão

</p>
</b:if>