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.

42 comentários:

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

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

    ResponderExcluir
  3. Ótimo poder personazar o botão Retweet .

    ResponderExcluir
  4. 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 :)

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

    ResponderExcluir
  6. 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

    ResponderExcluir
  7. coloque o código assim

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

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

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

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

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

    só se você especificar uma url para envio.

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

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

    ResponderExcluir
  14. 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!!

    ResponderExcluir
  15. 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"...

    ResponderExcluir
  16. 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.

    ResponderExcluir
  17. 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

    ResponderExcluir
  18. Tem como colocar ele a direita embaixo da postagem?

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

    ResponderExcluir
  19. 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>

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

    tem algum outro cod q eu possa procurar

    :D

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

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

    ResponderExcluir
  23. 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

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

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

    ResponderExcluir
  26. 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

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

    ResponderExcluir
  28. 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.

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

    ResponderExcluir
  30. 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!

    ResponderExcluir
  31. 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

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

    ResponderExcluir
  33. 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)

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

    ResponderExcluir
  35. 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";

    ResponderExcluir
  36. 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

    ResponderExcluir
  37. 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)

    ResponderExcluir
  38. 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.

    ResponderExcluir
  39. 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.

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

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

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

    ResponderExcluir