Botão de twittar postagem, personalizado com título e link encurtado para Blogger e WordPress

Disponibilizar um botão de twittar as postagens do seu blog é uma das formas trabalhadas na divulgação do blog no Twitter. Então vamos aprender aqui a colocar um botão de twittar/retwittar. A diferença é que vamos personalizar a frase a ser postada no microblog, visando SEO e organização.

O funcionamento é simples! No botão simples disponibilizado pelo Twitter, a postagem vai ser bem simples, o título do post com o título do blog, link completo e no final “via @twitter_do_blog”. Com a personalização, o botão vai enviar somente o título da postagem, link encurtado ou não pelo Bitw.in e no final “via @twitter_do_blog”.

Exemplo de como vai ficar o twitte

Conheça o Bitw.in: Bitw.in – Encurte links, compartilhe imagens, textos e muito mais!

Blogger:

1) Faça login no Blogger, entre em “Modelo” – > “Editar HTML”. Depois marque a caixa “Expandir modelos de widgets”;

2) Procure (Ctrl + f) por <div id=”post-footer”> ou <div class=”post-footer-line post-footer-line-1″> ou a parte onde você quer exibir o botão de twittar.

3) Escolha um dos modelos de botão que você quer adicionar, copie o código, insira depois do código encontrado na etapa anterior e faça a modificação necessária:

Botão Vertical

com link encurtado pelo Bitw.in:

<script type='text/javascript'>
function encurtadorBitwin(obj) {
var link_tweet = obj.short_url;
document.write(&quot;<a class='twitter-share-button' data-count='vertical' data-url='&quot;+link_tweet+&quot;' data-via='SEU_TWITTER' expr:data-counturl='data:post.url' expr:data-text='data:post.title' href='http://twitter.com/share'>Twittar</a>&quot;);
}
</script>
<script expr:src='&quot;http://bitw.in/api/link/create.json?url=&quot; + data:post.url+ &quot;&amp;callback=encurtadorBitwin&quot;' type='text/javascript’></script>
<script src='http://platform.twitter.com/widgets.js' type='text/javascript'></script>

sem link encurtado:

<a class='twitter-share-button' data-count='vertical' expr:data-url='data:post.url' data-via='SEU_TWITTER' expr:data-text='data:post.title' href='http://twitter.com/share'>Twittar</a>
<script src='http://platform.twitter.com/widgets.js' type='text/javascript'></script>

Botão Horizontal

com link encurtado pelo Bitw.in:

<script type='text/javascript'>
function encurtadorBitwin(obj) {
var link_tweet = obj.short_url;
document.write(&quot;<a class='twitter-share-button' data-count='horizontal' data-url='&quot;+link_tweet +&quot;' data-via='SEU_TWITTER' expr:data-counturl='data:post.url' expr:data-text='data:post.title' href='http://twitter.com/share'>Twittar</a>&quot;);
}
</script>
<script expr:src='&quot;http://bitw.in/api/link/create.json?url=&quot; + data:post.url+ &quot;&amp;callback=encurtadorBitwin&quot;' type='text/javascript'></script>
<script src='http://platform.twitter.com/widgets.js' type='text/javascript'></script>

sem link encurtado:

<a class='twitter-share-button' data-count='horizontal' expr:data-url='data:post.url' data-via='SEU_TWITTER' expr:data-text='data:post.title' href='http://twitter.com/share'>Twittar</a>
<script src='http://platform.twitter.com/widgets.js' type='text/javascript'></script>

Botão Horizontal sem contador

com link encurtado pelo Bitw.in:

<script type='text/javascript'>
function encurtadorBitwin(obj) {
var link_tweet = obj.short_url;
document.write(&quot;<a class='twitter-share-button' data-count='none' data-url='&quot;+link_tweet +&quot;' data-via='SEU_TWITTER' expr:data-counturl='data:post.url' expr:data-text='data:post.title' href='http://twitter.com/share'>Twittar</a>&quot;);
}
</script>
<script expr:src='&quot;http://bitw.in/api/link/create.json?url=&quot; + data:post.url+ &quot;&amp;callback=encurtadorBitwin&quot;' type='text/javascript'></script>
<script src='http://platform.twitter.com/widgets.js' type='text/javascript'></script>

sem link encurtado:

<a class='twitter-share-button' data-count='none' expr:data-url='data:post.url' data-via='SEU_TWITTER' expr:data-text='data:post.title' href='http://twitter.com/share'>Twittar</a>
<script src='http://platform.twitter.com/widgets.js' type='text/javascript'></script>

Substitua SEU_TWITTER pelo nome de usuário do seu Twitter. Não coloque ‘@’!
Exemplo: data-via='codigosblog’.

4) Teste, se não der erro algum é porque está certo. Salve e faça o teste clicando em “tweet”!

WordPress:

1) Faça login no seu blog, entre em “Aparência” -> “Editor”, procure pela página “Post Único (single.php)".

2) Agora você tem que encontrar o melhor lugar para colocar o botão de twittar, geralmente é algo depois do título (<h1><?php the_title(); ?></h1>) ou (<h2><?php the_title(); ?></h2>) ou procure outro lugar, faça teste (é importante ter backup, caso ocorra algum erro você está seguro).

3) Escolha um dos modelos de botão que você quer adicionar, copie o código, insira depois do código encontrado na etapa anterior e faça a modificação necessária:

Botão Vertical

com link encurtado pelo Bitw.in:

<script type='text/javascript'>
function encurtadorBitwin(obj) {
var link = obj.short_url;
document.write("<a class='twitter-share-button' data-count='vertical' data-url='"+link+"' data-via='SEU_TWITTER' data-counturl='<?php the_permalink();?>' data-text='<?php the_title();?>' href='http://twitter.com/share'>Twittar</a>");
}
</script>
<script src='http://bitw.in/api/link/create.json?url=<?php the_permalink();?>&callback=encurtadorBitwin' type='text/javascript'></script>
<script src='http://platform.twitter.com/widgets.js' type='text/javascript'></script>

sem link encurtado:

<a class='twitter-share-button' data-count='horizontal' data-url='<?php the_permalink();?>' data-via='SEU_TWITTER' data-text='<?php the_title();?>' href='http://twitter.com/share'>Twittar</a>
<script src='http://platform.twitter.com/widgets.js' type='text/javascript'></script>

Botão Horizontal

com link encurtado pelo Bitw.in:

<script type='text/javascript'>
function encurtadorBitwin(obj) {
var link = obj.short_url;
document.write("<a class='twitter-share-button' data-count='horizontal' data-url='"+link+"' data-via='SEU_TWITTER' data-counturl='<?php the_permalink();?>' data-text='<?php the_title();?>' href='http://twitter.com/share'>Twittar</a>");
}
</script>
<script src='http://bitw.in/api/link/create.json?url=<?php the_permalink();?>&callback=encurtadorBitwin' type='text/javascript'></script>
<script src='http://platform.twitter.com/widgets.js' type='text/javascript'></script>

sem link encurtado:

<a class='twitter-share-button' data-count='horizontal' data-url='<?php the_permalink();?>' data-via='SEU_TWITTER' data-text='<?php the_title();?>' href='http://twitter.com/share'>Twittar</a>
<script src='http://platform.twitter.com/widgets.js' type='text/javascript'></script>

Botão Horizontal sem contador

com link encurtado pelo Bitw.in:

<script type='text/javascript'>
function encurtadorBitwin(obj) {
var link = obj.short_url;
document.write("<a class='twitter-share-button' data-count='none' data-url='"+link+"' data-via='SEU_TWITTER' data-counturl='<?php the_permalink();?>' data-text='<?php the_title();?>' href='http://twitter.com/share'>Twittar</a>");
}
</script>
<script src='http://bitw.in/api/link/create.json?url=<?php the_permalink();?>&callback=encurtadorBitwin' type='text/javascript'></script>
<script src='http://platform.twitter.com/widgets.js' type='text/javascript'></script>

sem link encurtado:

<a class='twitter-share-button' data-count='none' data-url='<?php the_permalink();?>' data-via='SEU_TWITTER' data-text='<?php the_title();?>' href='http://twitter.com/share'>Twittar</a>
<script src='http://platform.twitter.com/widgets.js' type='text/javascript'></script>

Substitua SEU_TWITTER pelo nome de usuário do seu Twitter. Não coloque ‘@’!
Exemplo: data-via='codigosblog’.

4) Salve as modificações e teste o botão de twittar.

11 Comentários

Ian Filipe dez 12, 2011 08:13 PM

Ótima Dica! Tava precisando…

Responder
Saidy Lopes dez 13, 2011 12:31 AM

Paulo, você é fera no mundo da blogosfera.
Abraços e obrigado por esta dica.

Responder
Rafael Lucas jan 02, 2012 01:51 AM

parabens coloquei no meu blog novo e deu certo recomendo flw parabens pelo site um dos melhores que ja vivitei

Responder
EnigmA jan 05, 2012 10:02 PM

Cara…. Depois de muuuita pesquisa o melhor botão de compartilhamento no twitter eu encontrei aqui! Bem completo!

Parabéns pelo blog!

Responder
johnny jun 10, 2012 06:33 PM

como faco pra coloca o Bit.ly no lugar o Bitw.in ?

Responder
- Paulo Estevão jun 10, 2012 07:47 PM
  
  Tem que desenvolver outro código amigo.
  abraços
  
  Responder
Marcos ago 04, 2012 12:17 PM

Amigo Paulo, não teria como colocar um outro encurtador, tipo o Migre? Nos últimos dias, meu blog e de outros conhecidos ficou com lentidão pra carregar por conta do Bitw.in.
Agradeceria demais se você criasse um código pra usar o encurtador Migre.

Responder
- Paulo Estevão ago 05, 2012 06:28 PM
  
  Marcos, tudo bem? O Migre.me não tem como, mas o Bit.ly tem, pode ser? Me manda essa sugestão em: http://www.codigosblog.com.br/sugestoes-de-postagens
  abraços
  
  Responder
Dav7 ago 12, 2012 10:58 AM

Há alguma maneira para não utilizar o encurtador bitw.in ? Na minha template feita pelo Paulo o blog está a demorar muito a abrir, muito mesmo, e diz que está à espera de bitw.in….

Fui procurar no código e tive a certeza que estava relacionado com o widget do Twitter que utiliza este expr:src=’"http://bitw.in/api/link/create.json?url=" + data:post.url+ "&callback=encurtadorBitwin"’/

:\

Responder
- Paulo Estevão ago 13, 2012 09:40 AM
  
  Há sim, mas tem que criar Dav. Se quiser eu tiro pra você, me manda um email pra gente negociar.
  abraços
  
  Responder
  - Dav7 ago 14, 2012 02:04 PM
    
    Para já voltou ao normal, mas se continuar a dar problemas envio o email!
    
    Responder