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

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.

Leia também: