Topsy.com – Botão de retweet no seu site!
Há algum tempo escrevi um tutorial para o botão de retweet do TweetMeme, utilizei ele durante certo tempo, mas depois que conheci a ferramenta do Topsy efetuei logo a mudança. O botão do Topsy permite enviar seus posts para o twitter mais de uma vez, além de exibir o total das vezes que seus posts foram enviados (essa última também está presente no botão do TweetMeme).
Esse tutorial vai ensinar você a instalar através do código HTML, entretanto se você tiver um blog no WordPress (em servidor próprio) você poderá utilizar o plugin (que irá facilitar sua vida). A instalação do plugin é rápida e fácil. Entre na página do plugin, no Topsy, baixe e instale.
Algumas mudanças que você poderá fazer no código do botão:
- Escolher o nick para o retweet
- Escolher o tamanho (estilo) do botão de retweet
Pelo que vi, não se pode escolher o redutor dos links, por padrão o Topsy.com utiliza o Bit.ly.
Instalando o botão:
Todos os botões para a instalação podem ser encontrados nessa página.
Abaixo segue o botão compactado, ideal para colocar em lugares com pouco espaço. Eu prefiro esse estilo de botão por ser mais atraente. Basta copiar o código abaixo da imagem e instalar no seu blog.
<script type="text/javascript" src="http://cdn.topsy.com/button.js"></script>
Além do botão compactado você pode utilizar outro estilo de botão, copie o código e instale em qualquer lugar do seu blog.
<script type="text/javascript">
var topsy_style = "big";
</script>
<script type="text/javascript" src="http://cdn.topsy.com/button.js"></script>
Ambos os códigos podem ser instalados em qualquer área do seu site. Abaixo vou especificar uma área, tanto no Blogger quando no WordPress, para a instalação do botão.
Identificando o nick do twitter:
O código que identifica o nick é esse:
var topsy_nick = "TopsyRT";
Código compactado e completo, respectivamente, com a especificação do nick:
<script type="text/javascript">
var topsy_nick = "SEUNICK";
</script>
<script type="text/javascript" src="http://cdn.topsy.com/button.js"></script>
<script type="text/javascript">
var topsy_style = "big";
var topsy_nick = "SEUNICK"
</script>
<script type="text/javascript" src="http://cdn.topsy.com/button.js"></script>
Altere a área em vermelho, coloque seu nick SEM o @.
Onde instalar no código?
Você poderá colocar dentro dos posts, ou fora deles. Para colocar dentro utilize esse código para exibir o botão à esquerda:
<div style="float: left; margin: 5px;">
COLOQUE O CÓDIGO DO BOTÃO AQUI!
</div>
Para alinhar à direita:
<div style="float: right; margin: 5px;">
COLOQUE O CÓDIGO DO BOTÃO AQUI!
</div>
Basta substituir a área em vermelho pelo código do botão, compactado ou não.
No WordPress (se você for instalar sem o plugin):
Vá na aba “Aparência” » ”Editor” e escolha editar a página “Post único (single.php)“. Procure pelo termo “the_content”, que será expressado assim:
<?php the_content … ?>
Cole o código ANTES do <? ou DEPOIS do ?>. (As reticências (…) significam que vai haver mais coisas dentro do código). Salve e pronto.
No Blogger:
Assim como no WordPress, eu indico que o botão só seja instalado nas páginas individuais dos posts. Por quê? Pois o botão recolhe a URL e o título da sua postagens automaticamente, entretanto se o botão estiver instalado em sua homepage, ele irá exibir o link e o título da sua homepage.
Para instalar acesse o painel e abra a aba “Layout” » “Editar HTML“. Assinale a opção “Expandir modelos de widgets” e procure pelo código <data:post.body/>. Cole o código abaixo ANTES ou DEPOIS da tag procurada (<data:post.body/>). Salve e pronto.
<b:if cond='data:blog.pageType == "item"'>
COLOQUE O CÓDIGO DO BOTÃO AQUI!
</b:if>
Você poderá alinhar na direita ou na esquerda colocando o código acima entre os códigos abaixo. Para alinhar à esquerda:
<div style="float: right; margin: 5px;">
<b:if cond='data:blog.pageType == "item"'>
COLOQUE O CÓDIGO DO BOTÃO AQUI!
</b:if>
</div>
Alinhar à direita:
<div style="float: right; margin: 5px;">
<b:if cond='data:blog.pageType == "item"'>
COLOQUE O CÓDIGO DO BOTÃO AQUI!
</b:if>
</div>
Espero que você tenha entendido e que a implementação do código tenha sido um sucesso!
Vlw amigo fico grato pela dica, logo aplicarei no meu blog
O redutor de links pode ser alterado sim, ele possui 3 opções
bit.ly
is.gd
tr.im
Consegui alterar apenas no plugin, não pelo código.
Obrigado pelo seu comentário!
O post foi uma ótima ajuda! Acabei de instalar no meu blog. Thx =o*
@Julianna Steffens, que bom que você gostou! Volte sempre. ;D
Olá, eu uso o Blogger no meu caso eu gostaria de colocar ele na página inicial junto com os posts…
tem como você me falar como?
@Paulo Ronny, Experimentei colocar na página inicial também, entretanto não funcionou. Mas se quiser é só copiar o código do botão e colar antes ou depois da tag , como fala no post.
Olá Luan!
Já tentei de todas as formas utilizar esse botão até agora sem sucesso.
@Alexandre, confesso que não sei o motivo deste problema. Porém você não é o único a reportá-lo. Acredito que o erro não esteja no tutorial, já que segui ele e instalei o botão sem problemas.