Como adicionar o botão de seguir do Twitter em um blog do Blogger

Atenção: um de nossos leitores nos informou que este artigo está desatualizado, portanto, assim que possível este artigo passará por uma atualização para refletir as informações de maneira correta!
Olá querido leitor do Bloggando Na Web, seja bem-vindo a mais um artigo. Eu já escrevi diversos artigos sobre o Twitter aqui no blog e, recentemente, uma “moda” tem atingido muitos blogs que costumo visitar, é a adição do Botão de Seguir do Twitter.

Esse botão tem uma aparência semelhante a do Tweet Button, que eu mostrei há um tempo atrás como instalar, porém, a função desse botão não é a de enviar os artigos para o Twitter em forma de tweet, e sim, proporcionar uma maneira mais rápida dos leitores poderem seguir seu perfil do serviço.

Então, já que a moda é adicionar tal botão, resolvi criar este artigo para mostrar como instalá-lo. Abaixo você pode conferir os botões que estão disponíveis para utilização.

Blogs com fundo claro	Siga @igoor_sp
	Siga @bloggandonaweb
Blogs com fundo escuro	Siga @igoor_sp
	Siga @bloggandonaweb

Como você pôde ver acima, há botões tanto para blogs que possuem fundo claro, quanto para blogs que possuem um fundo escuro, e tais botões são totalmente customizáveis para que se encaixem em seu blog. Aproveite os botões acima para nos seguir!

O bom desse botão é que ele pode ser adicionado em qualquer parte do blog que aceite HTML, ou seja, na sidebar, dentro dos artigos (como foi feito acima), dentro de páginas estáticas e qualquer outra parte do template.

Neste artigo eu mostrarei como adicioná-lo à sidebar (barra lateral) do blog, de forma que fique visível para todos os leitores! Então, siga os passos descritos abaixo.

Instalando o botão de seguir do Twitter

1. Faça login no Blogger, clique no nome do seu blog para acessar o painel de controle do mesmo, depois clique no menu Modelo, role a página até o final e clique na opção Fazer backup / Restaurar modelo. Faça uma cópia de segurança do seu template clicando no botão Fazer download do modelo completo.

2. Clique na opção Editar HTML do modelo.

3. Pressione Ctrl+F para abrir a janela Localizar do navegador, e procure o código abaixo.

</head>

4. Imediatamente acima deste código, adicione este outro.

<!-- Script do botão Seguir do Twitter -->
<script src='http://platform.twitter.com/widgets.js' type='text/javascript'/>
<!-- Fim do script do botão Seguir do Twitter -->

5. Clique no botão Visualizar e, se estiver tudo certo, clique no botão Salvar modelo.

6. Agora vá no menu Layout e em seguida clique em: Adicionar um Gadget > HTML/JavaScript.

Gadget HTML/JavaScript | Imagem por: Bloggando Na Web

7. No campo de conteúdo do gadget, adicione o código mostrado abaixo.

<a href="http://twitter.com/seu-nome-de-usuário-do-twitter" class="twitter-follow-button" data-lang="pt">Siga @seu-nome-de-usuário-do-twitter</a>

Substitua a parte destacada em vermelho pelo seu nome de usuário do Twitter. Para finalizar, clique no botão Salvar.

Pronto, só de seguir esses passos o botão já aparecerá na sidebar do blog. Você pode adicionar botões para outros perfis do Twitter que você possua, para isso basta repetir o código do passo 7 e informar o nome de usuário para o qual você deseja criar o botão, como no exemplo abaixo.

<a href="http://twitter.com/seu-nome-de-usuário-do-twitter-1" class="twitter-follow-button" data-lang="pt">Siga @seu-nome-de-usuário-do-twitter-1</a>

<a href="http://twitter.com/seu-nome-de-usuário-do-twitter-2" class="twitter-follow-button" data-lang="pt">Siga @seu-nome-de-usuário-do-twitter-2</a>

Como eu informei no começo do artigo, é possível que você customize o botão a seu gosto, porém, é necessário que você altere algumas partes do código do passo 7. Veja abaixo as customizações que você pode fazer no botão.

Customizando o botão de seguir do Twitter

Para customizar o botão, você deve ir aonde você colocou o código do botão (passo 7). Depois, basta ver as opções de customizações abaixo e adicionar as que você desejar.

► Mostrar o número de seguidores

Por padrão, o número de seguidores do seu perfil do Twitter já aparece à frente do botão, mas caso você não queira mostrar quantas pessoas estão te seguindo, adicione o seguinte código: data-show-count="false", ao código do botão, como foi destacado em rosa no exemplo abaixo.

<a href="http://twitter.com/seu-nome-de-usuário-do-twitter" class="twitter-follow-button" data-show-count="false" data-lang="pt">Siga @seu-nome-de-usuário-do-twitter</a>
O resultado será o mostrado abaixo.

Antes	Siga @bloggandonaweb
Depois	Siga @bloggandonaweb

► Mudar cor e tema do botão

Por padrão, o botão aparece com o tema azul, mas você pode facilmente mudar a cor do botão adicionando o seguinte código: data-button="grey", ao código do botão, como foi destacado em rosa no exemplo abaixo.

<a href="http://twitter.com/seu-nome-de-usuário-do-twitter" class="twitter-follow-button" data-button="grey" data-lang="pt">Siga @seu-nome-de-usuário-do-twitter</a>
O resultado será o mostrado abaixo.

Antes	Siga @bloggandonaweb
Depois	Siga @bloggandonaweb

Note que ao mudar a cor do botão, automaticamente, as cores do link e do texto com o número de seguidores também muda. Isso acontece para que o botão se encaixe melhor em blogs com fundos escuros.

Porém, você pode adicionar os seguintes códigos: data-link-color="XXXXXX" (cor do link) e data-text-color="XXXXXX" (cor do texto), ao código do botão para alterar a cor do link e do texto, e manter o botão cinza. O valor XXXXXX deve ser substituído pelo código hexadecimal de alguma cor. Veja os exemplos abaixo.

<a href="http://twitter.com/seu-nome-de-usuário-do-twitter" class="twitter-follow-button" data-button="grey" data-link-color="91C21A" data-text-color="FF9900" data-lang="pt">Siga @seu-nome-de-usuário-do-twitter</a>
O resultado será o mostrado abaixo.

Antes	Siga @bloggandonaweb
Depois	Siga @bloggandonaweb

Essas são as customizações básicas, e mais interessantes, que você pode fazer no botão. Caso você queira, você pode mudar também o idioma, largura e alinhamento do botão, para isso, visite a página de customização do botão de seguir do Twitter (em inglês).

Lembre-se que você pode adicionar todas as customizações ao botão, não precisa utilizar apenas uma. Se você gostou da dica, achou ela útil ou ficou com dúvidas, sinta-se a vontade para participar postando um comentário.

Não se esqueça de compartilhar o artigo clicando nos botões e abaixo, e de nos seguir clicando em qualquer um dos botões acima.