segunda-feira, 30 de agosto de 2010

Colocando o botão de compartilhamento oficial do Twitter no Blogger

Bom dia sideral pessoas! Não tive como fazer minha postagem habitual de quinta sexta-feira por motivos pessoais, então deixei para postar hoje.

O post de hoje é simples e relacionado com o desenvolvimento do novo layout do blog #tocadoelfo, que logo em breve eu colocarei aqui neste blog que vos enche as vistas. Até lá, vou falando um pouco das descobertas que fiz até aqui.

Como vocês devem saber, já faz um tempinho que o Twitter liberou uma versão oficial do botão de compartilhamento, no Twitter Anywhere.

O botão vêm em três estilos e utiliza um novo encurtador de endereços - t.co. O Botão, inclusive, mostra a quantidade de vezes que a postagem foi compartilhada no twitter.

A grande vantagem do botão oficial é que ele permite que o leitor possa seguir você (e uma conta qualquer) depois que ele twittar a sua postagem. O Wordpress já possui um plugin para o Tweet Button, no entanto, para o Blogger não há widgets para esta função. Então, vamos pôr a mão na massa.

AVISO: Antes de fazer qualquer alteração no modelo do seu blog, faça um backup do mesmo e só salve o modelo depois de ter certeza de que suas alterações estão funcionando.

Vamos lá então...



Primeiramente, você vai logar na sua conta do Blogger e ir na opção Design / Editar HTML

Sem seguida, marque a caixa "Expandir modelos de widgets". Logo em seguida, você vai procurar pela seguinte tag: <data:post.body/>

Imediatamente acima desta tag, cole o seguinte código:

<!-- Botão de compartilhamento do Twitter -->
<div style="float:left; padding:4px;">
<a href='http://twitter.com/share' rel='nofollow' class='twitter-share-button'
expr:data-url='data:post.url'
expr:data-text='data:post.title'
data-related='tocadoelfo:TI com uma pitada de Rpg'
data-count='vertical'
data-via='seutwitter'
data-lang='en'>Tweet</a>
</div>
<!-- Botão de compartilhamento do Twitter -->


Depois, no final da página, antes da tag </html> cole o seguinte código:

<!-- Script de compartilhamento do Twitter -->
<script type="text/javascript" src="http://platform.twitter.com/widgets.js">
</script>
<!-- Script de compartilhamento do Twitter -->


Depois disso, é só configurar.

Há alguns parâmetros que você pode alterar para personalizar a sua mensagem:

  1. float:left - Você pode alterar para float:right se quiser que o botão fique do lado direito da página;


  2. data-count='vertical' - Se você quiser usar ele na horizonta, mude para data-count='horizontal' ou pode usar data-count='none';


  3. data-via='seutwitter' - Você pode, também, colocar seu nome de usuário do Twitter, de forma que a mensagem fique assim: "Título http://t.co/link via @seutwitter";


  4. Você pode adicionar texto extra modificando o texto que faz parte do expr:data-text. Exemplo: expr:data-text='"No momento estou lendo: "+data:post.title';


  5. Recomendar outro usuário do twitter - Editando o campo data-related você pode indicar alguma pessoa. O tocadoelfo nesse caso pode ser substituído pelo usuário do twitter que você quer recomendar (sem usar o @). Você também pode alterar a informação depois dos dois-pontos com uma descrição curta da conta em questão.


  6. Alterar a língua - Você pode mudar a língua no atributo data-lang para inglês (en), francês(fr), espanhol(es), japonês(ja) e alemão(de). Pena que ainda não há opção para português.


Como uma opção de personalização, você pode colocar o botão antes da tag <a expr:name='data:post.id'/> e antes da <data:post.body/> eu adicionei um <div class='clear'/> só para que o botão não ficasse junto com o texto do blog e utilizando aquele espaço lateral à direita do título da postagem.

Viu, é simples. Nada de opções complexas. Só copiar, colar e já vai estar funcionando!

Abração, e até uma próxima postagem!