Widget Tweet Button oficial do Twitter para Blogs

Agora o Twitter tem um sistema oficial de re-tweets e envio de links e notícias para serem compartilhadas no serviço. Você pode adicionar um botão de envio de tweets em seu blog ou site que inclusive funciona como um contador de RTs. Já existiam sistemas similares que funcionam muito bem, mas é sempre bom contar com algo oficial.

Já estou usando o novo modelo de botão e você pode testar clicando no botão azul “Tweet” que está contando quantas vezes esse post já foi retuitado. Funciona tanto no Blogger quanto no WordPress.org.

O link da página oficial do Twitter para os novos botões oficiais é:

http://twitter.com/goodies/tweetbutton

Ao clicar você verá três modelos de opções do botão para adicionar em seu blog. Também pode incluir link específico para cada RT e até tem opções de indicar seu perfil para ser seguido. Depois de criar as características desejadas, é gerado um código que você usará em seu blog. Vou mostrar uma forma de usar, incluindo o novo botão ao lado do primeiro parágrafo de seus posts.

Depois de criar o tipo de botão com as características que desejar, você ainda vê o modelo e é gerado o código que você deve incluir em seu blog. Pode ser incluído em qualquer parte. Aqui vou mostrar como incluir lado-a-lado com o texto do primeiro parágrafo de seu post, exatamente como faço aqui no [ Ferramentas Blog ].

Vou ensinar aqui como adicionar tanto no Blogger (Blogspot) quanto no WordPress.org.

1. Para o Blogger (Blogspot)

Abra o painel e clique no menu “Design” ~> “Editar HTML”, marcando a caixa “Expandir modelos de widgets”. Então procure pela seguinte linha:

<div class=’post-body entry-content’>

Imediatamente ACIMA, cole o seguinte trecho, só modificando o que for indicado:

<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 que foi gerado na página do Twitter.
Não modifique nada nos códigos.
</p>
</b:if>

Onde está indicado, cole o trecho de código que foi gerado para o modelo de botão que você quer usar em seu blog.

Se quiser que fique alinhado à esquerda, mude o que está em vermelho para “left”.

Salve o modelo e veja o resultado em seu blog.

2. Para o WordPress.org

Mas se você tem um blog no WordPress.org (com hospedagem e domínio), o código é um pouco diferente.

Entre no painel, clique no menu “Aparência” ~> “Editor” e abra o arquivo do tema “Post único (single.php)”. Procure pela linha que indica o início do texto e cole o seguinte trecho:

<div style="float: right; margin-left: 10px;">
Adicione aqui o código do botão que foi gerado na página do Twitter.
Não modifique nada nos códigos.
</div>

Cole, onde está indicado no código, o trecho que foi gerado na página de botões do Twitter.

Para alinhar à esquerda do parágrafo, troque o que está em vermelho para “left”.

Salve para aplicar em seu blog e veja o resultado.

Nos dois casos, seja no Blogger ou no WordPress, o botão só aparecerá na página dos posts quando o visitante entrar no artigo para ler.

Outros artigos sobre compartilhamento e Gadgets:

• Adicionar botão “Curtir” (Like) do FaceBook nos artigos do Blog – Blogger e WordPress
• Botão para compartilhar links no FaceBook para Blogger
• Novos botões de compartilhamento do Blogger Blogspot Share-button Blogger