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'>sem link encurtado:
function encurtadorBitwin(obj) {
var link_tweet = obj.short_url;
document.write("<a class='twitter-share-button' data-count='vertical' data-url='"+link_tweet+"' data-via='SEU_TWITTER' expr:data-counturl='data:post.url' expr:data-text='data:post.title' href='http://twitter.com/share'>Twittar</a>");
}
</script>
<script expr:src='"http://bitw.in/api/link/create.json?url=" + data:post.url+ "&callback=encurtadorBitwin"' type='text/javascript’></script>
<script src='http://platform.twitter.com/widgets.js' type='text/javascript'></script>
<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'>sem link encurtado:
function encurtadorBitwin(obj) {
var link_tweet = obj.short_url;
document.write("<a class='twitter-share-button' data-count='horizontal' data-url='"+link_tweet +"' data-via='SEU_TWITTER' expr:data-counturl='data:post.url' expr:data-text='data:post.title' href='http://twitter.com/share'>Twittar</a>");
}
</script>
<script expr:src='"http://bitw.in/api/link/create.json?url=" + data:post.url+ "&callback=encurtadorBitwin"' type='text/javascript'></script>
<script src='http://platform.twitter.com/widgets.js' type='text/javascript'></script>
<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'>sem link encurtado:
function encurtadorBitwin(obj) {
var link_tweet = obj.short_url;
document.write("<a class='twitter-share-button' data-count='none' data-url='"+link_tweet +"' data-via='SEU_TWITTER' expr:data-counturl='data:post.url' expr:data-text='data:post.title' href='http://twitter.com/share'>Twittar</a>");
}
</script>
<script expr:src='"http://bitw.in/api/link/create.json?url=" + data:post.url+ "&callback=encurtadorBitwin"' type='text/javascript'></script>
<script src='http://platform.twitter.com/widgets.js' type='text/javascript'></script>
<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>Substitua SEU_TWITTER pelo nome de usuário do seu Twitter. Não coloque ‘@’!
<script src='http://platform.twitter.com/widgets.js' type='text/javascript'></script>
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'>sem link encurtado:
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>
<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'>sem link encurtado:
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>
<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'>sem link encurtado:
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>
<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>Substitua SEU_TWITTER pelo nome de usuário do seu Twitter. Não coloque ‘@’!
<script src='http://platform.twitter.com/widgets.js' type='text/javascript'></script>
Exemplo: data-via='codigosblog’.
4) Salve as modificações e teste o botão de twittar.
Tutorial desenvolvido Por:
Paulo Estevão
0 comentários:
Postar um comentário
Deixe Seu Coméntario