Como adicionar o Tweet Button em um blog do Blogger

Olá querido leitor, neste artigo eu mostrarei a você como adicionar o botão de compartilhamento do Twitter, mais conhecido como: Tweet Button. Esse botão já não é mais uma novidade na blogosfera e muitos blogueiros já o estão utilizando em seus blogs. A vantagem de usar esse botão é que, diferente de muitos outros que existem por ai, tais quais: TweetMeme, Topsy etc., o Tweet Button é nativo do Twitter, ou seja, a própria equipe do Twitter o criou, sendo assim podemos concluir que ele é totalmente seguro e não há o risco de você ter sua privacidade ou conta invadida — como andou acontecendo com algumas pessoas.


O Tweet Button sem sombra de dúvidas é indispensável em um blog, pois permite que o leitor possa compartilhar o artigo em questão com seus seguidores do Twitter, o que pode trazer mais visitas para o blog. Sem contar que ele mostra quantas vezes o artigo foi compartilhado na rede social. Para instalar o botão em seu blog, siga os passos abaixo.

Adquirindo e configurando o código do Tweet Button


1. Primeiramente precisamos adquirir o código do botão, então faça login no seu perfil do Twitter e, em seguida, acesse o endereço: https://twitter.com/about/resources/buttons#tweet. Na página que se abrir, você verá quatro opções de botão. Nesse artigo, veremos apenas o primeiro: "Compartilhe um link", que é o botão utilizado para permitir o compartilhamento dos artigos, portanto, selecione-o.

2. Após ter acessado o endereço acima, você verá a seção Opções do botão. Nessa seção você deverá fazer as configurações de como o botão irá funcionar. Veja uma explicação da cada opção logo abaixo.

Compartilhe URL


  • Use a URL da página: marcando essa opção, quando o leitor clicar no botão para compartilhar o artigo, o link da página que aparecerá no tweet do leitor será o link da página onde estava o botão.
  • HTTP: através dessa opção você pode especificar o link padrão de uma página para ser compartilhada sempre que o leitor clicar no botão, independente de onde o botão estiver.

Tweetar texto


  • Utilize o título da página: marcando essa opção, quando o leitor clicar no botão para compartilhar o artigo, o nome da página (geralmente o título do artigo) aparecerá no tweet do leitor.
  • Texto: através dessa opção você pode especificar um texto padrão para aparecer no tweet quando o artigo for compartilhado, como por exemplo: "Confira esse artigo...".

Exibir contagem


Como o próprio nome já sugere, através dessa opção você pode escolher entre mostrar ou não a contagem de quantas vezes o artigo foi compartilhado no Twitter, ao lado do botão.

Via


Através dessa opção você pode especificar o nome de usuário de um perfil do Twitter (geralmente o perfil do blog) para ser citado quando o leitor clicar no botão. A citação aparecerá no final do tweet com o formato: "via @nome-de-usuário".

Recomendado


Essa opção tem uma função parecida com a citada acima, porém, ao invés do nome de usuário ser citado junto ao tweet, ele será mostrado como uma opção para o leitor seguir.

Marcador


Através dessa opção você pode especificar uma hashtag padrão, que aparecerá no tweet quando o leitor clicar no botão. Pode ser alguma hashtag que identifique o seu blog, ou qualquer outra que você quiser.

Botão grande


Essa opção permite que você escolha o tamanho (altura) do botão.

Idioma


Como o nome dessa opção já diz, atravé dela você poderá escolher em qual idioma o botão irá aparecer.

3. Enquanto você faz as devidas configurações, poderá ver uma prévia do botão na seção "Pré-visualização e código". Qualquer mudança feita na seção "Opções do botão", serão mostradas automaticamente na seção de prévia. Após ter feito todas as configurações que achou necessárias, clique no campo do código, copie-o e cole-o no bloco de notas.

Adicionando o Tweet Button em um blog do Blogger


Agora que você já possui o código do botão, chegou a hora de adicioná-lo ao blog. Você pode adicionar o botão praticamente em qualquer lugar do seu blog, desde que esse lugar aceite HTML. Neste artigo veremos como adicionar o botão abaixo e no topo dos artigos. A inserção do script do botão é igual para os dois processos, portanto, veremos como adicionar o script e em seguida você deverá seguir os passos de acordo com o local aonde deseja colocar o botão.

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 apenas a parte referente ao script do botão do Twitter, que está presente no código que você salvou no bloco de notas. A parte do script será semelhante a destacada em vermelho no código abaixo.

<a href="https://twitter.com/share" class="twitter-share-button" data-via="hdblogoficial" data-lang="pt">Tweetar</a>
<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>


4. Agora devemos adicionar o código do botão ao blog, para que o leitor possa compartilhar os artigos. Veja abaixo aonde você quer adicionar o botão, e siga os respectivos passos.

Adicionar o Tweet Button no rodapé dos artigos


1. Ainda no menu Editar HTML, marque a caixa Expandir modelos de widgets. Em seguida, pressione Ctrl+F para abrir a janela Localizar do navegador, e procure o código abaixo.

<div class='post-footer-line post-footer-line-3'/>
</div>


2. Imediatamente abaixo deste código, adicione este outro código.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style="border: 1px solid #EEEEEE;-webkit-border-radius: 6px;border-radius: 6px;margin: 10px 0 10px;">
<table border='0' cellpadding='5' cellspacing='0' style='width:100%'>
<tr>
<td style='width:80%;text-align:left;'>
Gostou do artigo? Então clique no botão ao lado e compartilhe-o!
</td>
<td style='width:20%;text-align:right;'>
Cole o código do botão aqui.
</td>
</tr>
</table>
</div>
</b:if>


Você pode mudar a frase destacada em azul, no código acima, para qualquer outra que lhe agrade, pode colocar também o código de algum anúncio do AdSense ou qualquer outra coisa que você queira. Substitua o que foi destacado em rosa pelo código do botão que você salvou no bloco de notas. O código do botão, será semelhante ao destacado em azul no código abaixo.

<a href="https://twitter.com/share" class="twitter-share-button" data-via="hdblogoficial" data-lang="pt">Tweetar</a>
<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>


3. Para finalizar, clique em Visualizar e, se estiver tudo certo, clique no botão Salvar modelo. O resultado final deverá ser como o ilustrado na imagem abaixo.


Adicionar o Tweet Button no topo dos artigos


1. Ainda no menu Editar HTML, marque a caixa Expandir modelos de widgets. Em seguida, pressione Ctrl+F para abrir a janela Localizar do navegador, e procure o código abaixo.

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

2. Imediatamente abaixo deste código, adicione este outro código.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style="border: 1px solid #EEEEEE;-webkit-border-radius: 6px;border-radius: 6px;margin: 10px 0 10px;">
<table border='0' cellpadding='5' cellspacing='0' style='width:100%'>
<tr>
<td style='width:80%;text-align:left;'>
Gostou do artigo? Então clique no botão ao lado e compartilhe-o!
</td>
<td style='width:20%;text-align:right;'>
Cole o código do botão aqui.
</td>
</tr>
</table>
</div>
</b:if>


Você pode mudar a frase destacada em azul, no código acima, para qualquer outra que lhe agrade, pode colocar também o código de algum anúncio do AdSense ou qualquer outra coisa que você queira. Substitua o que foi destacado em rosa pelo código do botão que você salvou no bloco de notas. O código do botão, será semelhante ao destacado em azul no código abaixo.

<a href="https://twitter.com/share" class="twitter-share-button" data-via="hdblogoficial" data-lang="pt">Tweetar</a>
<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>


3. Para finalizar, clique em Visualizar e, se estiver tudo certo, clique no botão Salvar modelo. O resultado final deverá ser como o ilustrado na imagem abaixo.


Pessoalmente, eu aconselharia que você adicionasse o botão logo abaixo dos artigos, que é o contrário do que a maioria das pessoas fazem (colocam no topo). Esse conselho se dá, pelo fato que ninguém entra em um artigo e simplesmente clica no botão de compartilhar para divulgá-lo, primeiro a pessoa lê o artigo e, se ela gostar, ai sim ela poderá considerar divulgá-lo. Então, colocando o botão abaixo dos artigos, o botão ficará mais próximo para a pessoa clicar sobre ele quando terminar de lê-lo; colocando o botão no topo, a pessoa terá que voltar até o início da página para clicar no botão, o que realmente muitas pessoas não fazem — ainda mais se o artigo for muito extenso.

Na dúvida, adicione o botão no topo e no rodapé dos artigos — melhor sobrar do que faltar. Se você gostou do artigo, achou ele útil ou ficou com dúvidas, sinta-se a vontade para participar postando um comentário. E não se esqueça de divulgar o artigo! ;)

Atualização — 23.08.2011 às 04h10
Recentemente, o Twitter adicionou o idioma Português ao seu sistema, e o Blogger lançou um novo painel de controle para a plataforma, portanto, o artigo foi atualizado para refletir tais mudanças.

Atualização — 15.04.2012 às 17h00
O artigo foi atualizado para refletir as mudanças realizadas na página de obtenção do código do botão Tweet Button.
É 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 4 comentários neste artigo!

  1. Gostei muito desse post, adicionei no meu blog, vlw!

    ResponderExcluir
  2. Olá Andreza, fico feliz que você tenha gostado do artigo!
    Agradeço a visita e o comentário.

    Volte sempre!

    ResponderExcluir
  3. Olá,

    Gostei muito do tutorial, mas fiquei com uma dúvida.
    Na página principal do meu blog aparece apenas uma parte do post, com a opção de "leia mais", e quando adicionei o botão do twitter, ele apareceu nos posts nesta página principal, e não na página do post, quando aberto.
    Tem uma forma de fazer com que o botão apareça apenas quando o post estiver aberto?

    Obrigada!

    ResponderExcluir
  4. Elis: o que faz com que o botão apareça somente na página dos artigos é a primeira e a última linha do código do passo 5, tudo o que estiver entre essas duas linhas de código aparecerão somente quando o artigo estiver aberto, certifique-se de que o código não tenha sido modificado, ele deve estar como o mostrado abaixo:
    <b:if cond='data:blog.pageType == "item"'>
    CONTEÚDO
    </b:if>

    Espero que isso ajude, mas se o problema persistir, informe o endereço do blog onde está ocorrendo o problema! Volte sempre!

    ResponderExcluir