Botão Retweet Personalizado - Topsy

O site Topsy faz um serviço semelhante ao tweetmeme (botão retweet), mas ele tem algumas opções de cores a mais e ainda faz uma pagina onde você poderá ver quais foram suas postagens enviadas para o Twitter recentemente.

Topsy no blogger - Retweet

Você pode visitar o site Topsy e achará vários modelos de botão. Para colocar esse botão de retweet no blog temos duas opções: pode ser no final ou inicio de cada postagem ou na sidebar do blog, em ambos os casos funciona muito bem. Primeiro vamos falar sobre o modo mais fácil, colocar na sidebar do blog: entre na pagina layout, adicionar gadget, html/javascript e colocar esse código:

<script type="text/javascript">
var topsy_nick = "dicasparablogs";
var topsy_style = "big";
var topsy_theme = "jade";
</script>
<script type="text/javascript" src="http://cdn.topsy.com/button.js"></script>

Onde está dicasparablogs coloque o seu nome (link) no Twitter. A linha var topsy_theme = "jade"; serve para escolher a cor do botão que você pode ver neste link as opções de cores para o botão retweet.
Personalizar botão retweet
A vantagem de colocar isso na sidebar é que qualquer uma das paginas do seu blog poderá ser enviada para Twitter e não somente as postagens, ou seja, será possível enviar a pagina inicial e paginas dos marcadores.

A segunda opção é colocar junto com cada uma das postagens para fazer isso entre na pagina editar html, clique para expandir o modelo e procure por <post.body> e coloque o código que está logo abaixo:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type="text/javascript">
var topsy_nick = "dicasparablogs";
var topsy_style = "big";
var topsy_theme = "jade";
</script>
<script type="text/javascript" src="http://cdn.topsy.com/button.js"></script>
</b:if>

Antes de inserir o código você deve decidir se quer o botão no inicio ou final da postagem, se colocar o código antes de <post.body> o botão ficará no inicio e se colocar depois o botão retweet ficará no final d e cada postagem.

As configurações do seu nome e cores do botão são feitas do mesmo modo que falamos na primeira parte quando mostramos como inserir o botão do retweet no menu do seu blog.

Uma coisa interessante que podemos fazer é criar um link (isso na sidebar, não importa qual foi sua opção de colocar o botão retweet) no blog para mostrar os Retweets Recentes, veja as postagens enviadas recentemente ao Twitter. Se colocar o endereço do seu blog no código abaixo ele levará para uma pagina como essa do link, mas sobre o seu blog.

<a href="http://topsy.com/s/site:dicasparablogs.com.br?order=date&amp;window=m" target="_blank">Retweets Recentes</a>

Isso pode ser uma boa maneira de incentivar as pessoas a visitarem e talvez retweetar mais paginas do seu blog. Veja aqui outras dicas uteis para o Twitter. Related Posts with Thumbnails


Link desta Pagina

42Comentários:

Alexandre Lima disse...

Uma belo botão. Comecei utilizar o twitter agora e essse artigo caiu como uma luva pra mim.

Portal Militar disse...

ESSE NAO TEM NO MEU TEMPLATE. =/

Fabiano Roberto disse...

se não encontrar a tag, pode colocar na sidebar(menu) que funciona perfeitamente

Joaobob disse...

Ótimo poder personazar o botão Retweet .

L. Tadeu disse...

Esse botão e bom mais e possivel alinhar ele a esquerda como o botão retweet que você postou anteriormente ? Eu utilizei esse pos ja envia direto para o twitter o antigo abri primeiro uma pop-up alem disso esse e personalizado e o tema monochrome caiu bem no meu template :D. Eu tentei utilizar < div style="text-align: right;" >
< /div >
mais não funcionou...

Obrigado pelas dicas, esse blog ajuda muitos bloggueiros :)

Fabiano Roberto disse...

somente no botão do tamanho grande consegui mudar o alinhamento no botão pequeno não tem jeito ele fica mesmo a esquerda

L. Tadeu disse...

Sim, e o grande
No meu blog utilizei esses dois tipos:
var topsy_style = "big";
var topsy_theme = "monocrhome";
Então, Como fazer pra ficar a direita ?
Obrigado pela ajuda Fabiano :D

Fabiano Roberto disse...

coloque o código assim

<p align="right">código do topsy</p>

Natália disse...

Fabiano, há alguma objeção em usar o botão no gadget e na postagem?
Bijinho.

Fabiano Roberto disse...

Natália
não tem problema, apenas vai carregar duas vezes a mesma coisa, mas não deve causar problema algum no blog

Anderson Rodrigues disse...

Eu coloquie e deu certo, mas mas quando eu retwito o post ele conta(acrescenta) para todos os post.

Fabiano Roberto disse...

Anderson Rodrigues
tem certeza, nunca vi esse problema de contar em todos os posts juntos.

só se você especificar uma url para envio.

Principe Encantado disse...

Amigo meu template não encontro o tem outro código?
Abraços forte

Fabiano Roberto disse...

procure por post.body ou line post-footer-line-1

NeToO disse...

Ia te perguntar se tinha como colocar o botão do lado direito, mas já foi respondido (y)

Ótimo post Fabiano, aqui deu tudo certo. Vlw!!

Francisco de Assis Martins disse...

Fabiano, não encontrei o "post.body" e você disse que podia encontrar outro, ou line post-footer-line-1, mas nesse caso, eu coloco o código acima, abaixo, ou ao lado, que eu coloquei a baixo e deu erro por casuda do "span"...

Fabiano Roberto disse...

Francisco de Assis Martins
mas não tem span neste código.

a pagina editar html é mesmo complicada de mexer, precisa achar o trecho certo para colocar os códigos.


se quiser envie para meu email o trecho do html do seu blog e darei uma olhada nele.

Monique Botelho disse...

Rapaaaazzz, obrigada!!!Já tentei por nas postagens e deu a maior confusão!!Mesmo apagando fica aparecendo as consequencias nos posts!!!Segui seu conselho, exelente de postar no sidebar e ficou PERFEITO!!!!Bjus

Jhonny Hawkys disse...

Tem como colocar ele a direita embaixo da postagem?

se tiver algum codigo me envie por e-mail se puder dionatan2309@hotmail.com

Fabiano Roberto disse...

Jhonny Hawkys
se colocar o código do botão deste jeito ele ficará a direita:


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<p align="right">
<script type="text/javascript">
var topsy_nick = "dicasparablogs";
var topsy_style = "big";
var topsy_theme = "jade";
</script>
<script type="text/javascript" src="http://cdn.topsy.com/button.js"></script></p>
</b:if>

Daniele disse...

olaaa, eu nao consegui achar isso no meu blog, mesmo axpandindo o modelo lá

tem algum outro cod q eu possa procurar

:D

Fabiano Roberto disse...

Daniele, não achou o post.body? acho que todos os templates tem isso

Daniele disse...

Num achei nao
achei isso: data:post.body mas tem 4, aí nao sei onde colocar pois nao entendo mto.

Fabiano Roberto disse...

não tem como eu saber qual deles é o correto, o html aparece diferente na pagina do blogger.

mas salve uma cópia do seu modelo e faça testes para achar o lugar certo

Daniel disse...

Desisto , eu axei depois de milhoes de tentativas e quando axei perdí-o de vista, ai axei denovo quando botei , nao pegou!

Fabiano Roberto disse...

Daniel
mexer com html as vezes é muito chato e irrita muito quando as coisas não dão certo, mas não desista

já não me vejo sem BANDA CALYPSO disse...

Olá Fabiano adoro o blog visito todos os dias e gostaria de saber se tem como no lugar do botão colocar essa imagem do passarinho escrito retweet,que tá nessa postagem? Pq o botão mostra quantas vezes a postagem foi retwitada e eu queria uma imagem em vez do botão.Valeu

Fabiano Roberto disse...

vou escrever um tutorial sobre como fazer o botão retweet com imagens ou texto, devo publicar até o final da semana

Rafael Belomo disse...

Olá,

Sei que o post não é recente, mas gostaria de saber se é possível usar esse Retweet na Home... Pois ele da rt da home, e do link da home, e não do post...

Obrigado!

Rafael Belomo.

Fabiano Roberto disse...

sim, esse código pode ser usado na pagina inicial do blog

Anônimo disse...

Caro companheiro a tres dia tenho visitado este blog,tenho tetado copiar os gadget utilizando as dicas e nao tenho conseguido aparece ´´caracteres invalidos`` o que esta acontecendo,?me ajude,pois acabei de cria o meu blog e estou cheios de novidades.Umberto BRITO.ABRAÇOS!

Fabiano Roberto disse...

troque as aspas por ' geralmente é isso..

ou então coloque o código antes neste site para converter: http://blogcrowds.com/resources/parse_html.php

Memes da Net disse...

Fabiano, mesma coisa que o botão do tweet, só encurta a pagina inicial do meu blog, porque?

Fabiano Roberto disse...

no site tem varios códigos um deles tem para incluir o endereço do blog no código do botão, se colocar isso o botão só vai usar o endereço que digitou(retire aquela linha com o endereço)

http://levealuz.blogspot.com/ disse...

Vocês estão de Parabéns estas dicas ajudam muito

Marina Vianna de Souza disse...

Olá,

eu coloquei o botão e ficou certinho, mas ele da rt na página inteira do blog e não na postagem. É isso mesmo? tem como eu colocar para dar rt só na poestagem?
Outra coisa ele fica aparecendo em todos os posts o número 65 antes do tweet, o que é isso?

Obrigada,
var topsy_theme = "jade";

Fabiano Roberto disse...

Marina Vianna de Souza
para usar somente na postagem o jeito mais facil é usar o código para mostrar somente na pagina individual

aquele codigo <b:if con.... isso faz aparecer só na pagina da postagem... e claro não deve colocar o endereço do blog no código do botão, ele identifica a pagina automaticamente

Matheus disse...

Fabiano, sei que não tem nada a ver com o assunto, mas foi o único artigo que eu achei pesquisando 'post footer' por aqui. Eu queria perguntar uma coisa, é muito difícil criar um rodapé da postagem nesse estilo? (http://lh6.googleusercontent.com/-kk0kMS4ZYRU/TrBddUqw5BI/AAAAAAAAB4k/XMxlcPJvIeA/s200/quem%252520postou.jpg)

Fabiano Roberto disse...

Matheus
a idéia é basicamente a mesma deste outro tutorial: Personalizar Contador de Visitas - Contador com Outra Imagem

você pode ver e tentar adaptar com os códigos do facebook, twitter.

Gabinajm disse...

Olá, coloquei o botão de RT no meu blog um tempinho atrás e tirei, quero colocar novamente mas não acho , queria saber o que fazer para colocar agora, obrigada.

Rádio Felipe e Guilherme disse...

como coloca-lo na horizontal? pois está na vertical . Obrigado

Fabiano Roberto disse...

acho que o site não tem mais essas opções.

tente entrar no http://topsy.com/ e criar o botão

Postar um comentário

Gostou? Compartilhe!