[Blogger - Gadgets] - Adicionando o botão de seguir do Twitter em um blog do Blogger

Eu já escrevi diversos artigos sobre o Twitter aqui no blog e, recentemente, uma "moda" tem atingido grande parte dos blogs que costumo visitar: é a utilização do Botão de Seguir (Follow Button) 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, mas sim proporcionar uma maneira mais rápida dos leitores seguirem o seu perfil na rede social.


Então, já que a moda é adicionar tal botão, resolvi criar este artigo para mostrar como instalá-lo em um blog do Blogger. Abaixo você poderá conferir um passo-a-passo de como instalar esse botão, e de todas as customizações que são possíveis de serem feitas.

Instalando o script que gera o botão "Follow Button"


Antes de mais nada precisaremos adicionar um script no código do template, que será responsável por gerar todas as funções do botão, para isso basta seguir os passos abaixo.

1. Faça login no Blogger e acesse o painel de controle do seu blog, depois vá no menu Modelo, clique no botão Fazer backup / Restaurar e faça uma cópia de segurança do seu template clicando no botão Fazer download do modelo completo.

2. Clique no botão Editar HTML, pressione Ctrl+F para abrir a janela Localizar do navegador, e procure o código abaixo.

</head>

3. Imediatamente acima deste código, adicione esse outro código.

<!-- Script do botão de Seguir do Twitter -->

<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

<!-- Fim do script do botão de Seguir do Twitter -->


4. Para finalizar clique no botão Visualizar e, se estiver tudo certo, clique no botão Salvar modelo.

Instalando o botão de seguir do Twitter


Passada a etapa de instalação do script, agora basta que você adicione o código do botão onde você quiser que ele apareça. O código é bem simples e pode ser adicionado em qualquer parte do seu blog que aceite HTML, como por exemplo: dentro de um artigo, de uma página, em gadgets ou diretamente no template. A estrutura do código é sempre a mesma para todos os tipos de botões, tendo apenas algumas particularidades. Veja abaixo a estrutura básica do código do botão.

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

No código acima, você deverá substituir as duas frases destacadas em vermelho pelo seu nome de usuário, como por exemplo: hdblogoficial. Esse código será responsável por exibir os botões, ou seja, aonde você colá-lo o "Botão de Seguir" aparecerá, como mostra o exemplo abaixo.


Você pode fazer algumas customizações adicionando outros códigos ao código que foi mostrado acima, veja as possibilidades abaixo.

Adicionar (ou remover) contagem ao botão


Caso queira, você pode adicionar à frente do botão a quantidade de seguidores você possui — se você possui bastante seguidores é uma boa opção para estimular outras pessoas a lhe seguirem. Para isso, basta adicionar ao código do seu botão a parte que foi destaca em rosa no código abaixo.

<a data-show-count="true" href="https://twitter.com/seu-nome-de-usuário" class="twitter-follow-button" data-lang="pt">Seguir @seu-nome-de-usuário</a>

Se você não quiser mostrar a contagem, mude a palavra "true" para "false". O resultado do botão com a contagem ativa será como o mostrado abaixo.


Adicionar (ou remover) nome de usuário ao botão


Você pode adicionar também o nome de usuário de quem a pessoa irá seguir ao clicar no botão, essa é uma boa opção para quem pretende adicionar mais de um botão de seguir, de forma a identificar cada um deles. Para isso, basta adicionar ao código do seu botão a parte que foi destaca em rosa no código abaixo.

<a data-show-screen-name="true" href="https://twitter.com/seu-nome-de-usuário" class="twitter-follow-button" data-lang="pt">Seguir @seu-nome-de-usuário</a>

Se não quiser mostrar o nome de usuário, mude a palavra "true" para "false". O resultado do botão com o nome de usuário ativo será como o mostrado abaixo.


Alterar o idioma do botão


Caso queira alterar o idioma do botão, você poderá fazê-lo alterando no código do seu botão a parte que foi destaca em rosa no código abaixo.

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

As letras "pt" indicam que o idioma do botão será português, você pode alterá-lo de acordo com a tabela de idiomas mostrada abaixo.

Tailandês th Hebraico he
Urdu ur Persa fa
Sueco sv Árabe ar
Chinês Tradicional zh-tw Inglês en
Hindí hi Italiano it
Coreano ko Japonês ja
Polonês pl Holandês nl
Filipino fil Turco tr
Indonésio id Dinamarquês da
Húngaro hu Malaio msa
Russo ru Português pt
Norueguês no Françês fr
Alemão de Finlandês fi
Chinês Simplificado zh-cn Espanhol es

Você pode ver dois exemplos de botão com outro idioma logo abaixo.


Posicionamento e tamanho (largura)


Você pode alterar o tamanho da área que o botão irá ocupar e o alinhamento dentro dessa área usando os códigos abaixo.

Código de tamanho: data-width="300px"
Código de alinhamento: data-align="right"

O tamanho da área do botão, pode ser especificado tanto em pixels quanto em porcentagem, por exemplo, se você adicionar o código de tamanho ao código do seu botão e especificar que o tamanho da área do botão deva ser 22px o resultado será o mostrado abaixo.



Caso você especifique um tamanho grande para a área do botão, como por exemplo 100%, de modo que ele ocupe totalmente a largura da área onde está, você poderá utilizar o código de alinhamento para alinhar o botão à esquerda (left) ou à direita (right), como no exemplo abaixo.



Alterar o tamanho (altura) do botão


Se você quiser adicionar um botão com uma altura maior (mais fácil de clicar), você poderá utilizar o código destacado em rosa no campo abaixo.

data-size="large"

Caso você utilize o código acima, o seu botão aparecerá como o mostrado no exemplo abaixo.


Essas são as customizações que você pode fazer no botão. Lembre-se que você pode utilizar mais de uma customização ao mesmo tempo, portanto, se você quer um botão alto, que mostre seu nome de usuário, a quantidade de seguires que possui e em outro idioma, você pode utilizar o código abaixo:

<a class="twitter-follow-button" data-lang="en" data-show-count="true" data-show-screen-name="true" data-size="large" href="https://twitter.com/seu-nome-de-usuário">Seguir @seu-nome-de-usuário</a>

...o resultado será o seguinte.


Se você gostou da dica, achou ela útil ou ficou com dúvidas, sinta-se a vontade para participar postando um comentário. E aproveite os botões acima para seguir nosso blog no Twitter e ficar por dentro das novidades.

Atualização — 02.05.2012 às 03h50
O artigo foi atualizado para refletir mudanças realizadas no painel de controle da plataforma Blogger, e para refletir mudanças realizadas pela equipe do Twitter nos códigos do botão.
É terminantemente proibida a cópia de nossos artigos sem nossa expressa autorização!
Plágio é crime previsto no artigo 184 do Código Penal brasileiro e na Lei 9.610/98.
As informações contidas neste artigo estão desatualizadas? Notifique-me! Editar artigo
Igor Sousa é dono e criador do blog Hdblog (antigo Bloggando Na Web). Tem 24 anos, é paulistano e atualmente cursa o 8° Semestre em Ciências Contábeis. Blogar era apenas um modo de melhorar sua redação de texto, mas unida a sua vontade de ajudar as pessoas passou a ser um hobby.

Foram postados 15 comentários neste artigo!

  1. Ótima dica, eu mesma pensei em personalizar o botão, mas a preguiça não deixou. Só não consegui mudar a cor dele, mas dos links sim.

    Não sei se você percebe um botão novo do Orkut - vi um no Tecnoblog. Ele é parecido com o do Twitter, só que é rosa. Sabe se é algum botão novo?

    Abraço!

    ResponderExcluir
  2. Sybylla, que bom que gostou da dica! Quanto à mudar a cor do botão, eu olhei o seu código fonte, e vi que você colocou o seguinte código: button="pink", esse código ai não vai funcionar, pelo menos não há nada na página do Twitter falando sobre esse atributo. As únicas cores disponíveis, são essas duas mesmo: azul e cinza, e para deixar o botão cinza, ao invés de usar o código que você usou, você deve usar esse: data-button="grey".

    Eu já vi o botão, rosa claro, de compartilhar no Orkut do tecnoblog também, e já até pesquisei como adicionar ele no blog, tive sucesso em achar um artigo falando sobre ele, mas o mesmo não é um botão oficial, portanto, você deve criar o script do botão e etc, é complicadinho, por isso deixei de lado e, se não me engano, o tecnoblog até parou de utiliza-lo.

    Agradeço a visita e o comentário!
    Abraços.

    ResponderExcluir
  3. Ah sim, eu coloquei e esqueci de tirar. rsrs Mas eu testei o grey também e não foi. Mas tudo bem, ficou bonitinho do jeito que está.

    Poxa, aquele botão do Orkut era legal... =(

    ResponderExcluir
  4. Nunca consegui achar, você "inventou" essa personalização a partir da criação de uma classe?

    ResponderExcluir
  5. João Neto, essa customização não foi invetada por mim. O botão de seguir é um recurso fornecido pela própria equipe do Twitter.

    ResponderExcluir
  6. como eu coloco o botão em certer...? consegui não...
    coloquei "center" no lutar de todos os left´s e hospedei de novo e mesmo assim não funfou...

    ResponderExcluir
  7. Mdoficial, tudo irá depender de onde você está colocando o botão. Mas tente, ao invés de mudar os lefts, adicionar o botão dentro de uma div, ficaria algo como o exemplo abaixo:

    <div align="center">código do botão</div>

    Talvez isso funcione. Agradeço a visita e o comentário, volte sempre!

    ResponderExcluir
  8. Giulia, em qual parte do tutorial você teve dificuldades?

    ResponderExcluir
  9. legal gostei entendi tudo usei a nova interface

    ResponderExcluir
  10. Perfeito! Consegui fazer sozinha! Uhuuu! kkkkkkkk

    ResponderExcluir
    Respostas
    1. Olá Alessandra, fico feliz que tenha conseguido instalar o botão no seu blog! Agradeço a visita e o comentário! Volte sempre.

      Excluir
  11. Eu ainda não consegui instalei o script e mudei o código com meus dados, mas onde eu coloco depois? No blogger os gadgets não aceitam HTML só pela URL

    ResponderExcluir
    Respostas
    1. Olá Sarah, após ter instalado o script em seu blog, basta que você substitua a parte destacada em vermelho no código pelos seus dados, e adicione-o dentro de um artigo (quando estiver escrevendo-o), de uma página ou de um gadget do tipo "HTML/JavaScript". Qualquer dúvida entre em contato novamente.

      Excluir
  12. Muito obrigada pelas informações Igor!!
    Abraço.

    ResponderExcluir