TweetMeme.com – Botão de retweet no seu site!
Há algumas semanas procurei na internet por um código que enviaria meus posts diretamente para o twitter, só com um botão de retweet. Achei o que procurava no blog Boombust. A instalação é muito fácil. Existe duas formas do botão, uma mais “compacta”, que eu utilizo, e outra maior. O botão funciona no Blogger e no WordPress.
Na imagem acima você pode ver o botão que utilizo aqui no Sem Preceito. Ele não ocupa muito espaço, o botão e a cor se adaptam a qualquer layout e o código é leve. Você pode efetuar três alterações no código que irão tornar seus retweets melhores:
- Pode inserir o seu nick (@nick) nos retweets.
- Pode escolher qual será o redutor de links utilizado. Exemplo o Bit.ly.
- E o estilo, se for “compactado” ou “inteiro”. Esse estilo não influenciará diretamente nos retweets, servirá apenas para a melhor exibição do botão no seu site/blog.
Instalando o botão:
Antes de instalarmos, vamos diferenciar os dois códigos dos botões. Abaixo você verá o botão completo, sem estar compactado.
<script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script>
O botão compactado tem o código um pouco diferente. Veja abaixo:
<script type="text/javascript">
tweetmeme_style = 'compact';
</script>
<script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script>
Percebeu a diferença entre os dois? Não? Repare novamente o código do compactado, veja o que está em vermelho.
<script type="text/javascript">
tweetmeme_style = 'compact';
</script>
<script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script>
Será nesta parte em vermelho onde iremos adicionar as outras duas mudanças que o botão permite, o seu username no twitter e um site que irá reduzir seu link. Se você quiser usar o compacto não mexa no código dele, acrescente o resto dos códigos abaixo e pronto, é só colocar no seu site/blog.
Se você quiser usar o “inteiro”, tire a parte tweetmeme_style = ‘compact’; e acrescente o resto dos códigos abaixo.
Adicionando o seu username:
Você deve estar se perguntando, por que devo adicionar o meu username? Pois bem, se você não acrescentar seu username no código, o retweet irá com o nick do tweetmeme (que criou o botão), acho que você não quer isso, quer? Compare as duas imagens abaixo:
Na primeira imagem (1.) você pode notar que não foi estabelecido um nick, dessa forma o TwitterMeme utiliza o próprio nick para os retweets. Na segunda imagem (2.) pode-se perceber que foi estabelecido um nick, no caso o nick do Sem Preceito (@sempreceito), sendo assim, todos os retweets irão conter o nick do Sem Preceito.
Para denominar o nick é muito fácil, basta acrescentar o código abaixo, na parte vermelha que mostrei logo acima:
tweetmeme_source = 'sempreceito';
Onde está escrito “sempreceito”, mude para o SEU nick no twitter. O código completo ficaria assim para o compactado:
<script type="text/javascript">
tweetmeme_style = 'compact';
tweetmeme_source = 'sempreceito';
</script>
<script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script>
E assim para o inteiro:
<script type="text/javascript">
tweetmeme_source = 'sempreceito';
</script>
<script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script>
Pronto. Os códigos com o username estão acima, escolha qual estilo é o melhor para o seu site, copie o código e instale. Abaixo você poderá escolher o redutor dos links das páginas.
Alterando o redutor de links:
Por padrão o redutor de links escolhido para os retweets é o Bit.ly, mas você poderá escolher entre os redutores desta lista, acesse ela aqui.
O código para escolher o redutor de links deve ser instalado no mesmo local onde foi instalado o código que alterou seu username nos retweets.
tweetmeme_service = 'bit.ly';
Escolha outro servidor, se quiser, e substitua o “bit.ly” pelo outro site escolhido. Infelizmente em alguns sites você não poderá adicionar sua API, que reduz os links e exibe as estatísticas na sua conta do site. Entretanto não vai mudar em nada as suas funções.
Com todas as mudanças, veja agora como ficou o código do botão compactado e do inteiro, respectivamente.
<script type="text/javascript">
tweetmeme_style = 'compact';
tweetmeme_source = 'sempreceito';
tweetmeme_service = 'bit.ly';
</script>
<script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script>
<script type="text/javascript">
tweetmeme_source = 'sempreceito';
tweetmeme_service = 'bit.ly';
</script>
<script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script>
Dica para a instalação:
Este 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 o funcionamento completo do botão, recomendo que você instale nas páginas individuais, ou seja, que só mostre o botão nos posts e páginas individualmente.
No WordPress, clique em “Aparência” > “Editor” e instale o botão na página “Post Único (single.php)“. No Blogger utilize um código que esconda o botão da página inicial do seu blog, vá até a aba “Layout” (ou “Design” > “Editar HTML“, marque a opção “Expandir modelos de widgets” e coloque o código do botão entre as tags abaixo e instale todo o código antes ou depois da tag <data:post.body/>.
<b:if cond='data:blog.pageType == "item"'>
CÓDIGO DO BOTÃO
</b:if>
Espero que tenha gostado do tutorial, dúvidas poderão ser esclarecidas pelos comentários.
Fonte de pesquisa: Boombust – Botão de Retweet para blogs
Oi, Luan!! Muito bom, você pegou o post no Boombust e dissecou em partes. Lá a explicação está bem superficial e os códigos dão resultados não de um único post, mas da somatória de todos as indicações (loucura!)
Até mesmo eu fiz confusão com os botões do http://www.retweet.com/ e http://tweetmeme.com/ – o site do tweetmeme para quem usa o blogger deixou de dar muitas informações.
Quanto à instalação, prefiro que fique aparecendo na página inicial e também na da postagem. O que acontece é que só está aparecendo na página inicial e quando acesso o post, ele some. Sabe porque isto acontece?
Obrigada!
@Luma, eu acho que sei o que está acontecendo. Você colocou o código do retweet ao lado do link dos comentários, certo? E esse link só aparece na home, tente mudar a posição do código. Entendeu?
@panicomania gostei do tutorial bem bacanda “)
Vlw pelo help
agora eu achei bem mais pratico e interessante esse do topsy
se tiver como postar um tutorial ficarei muito feliz abração
@Douglas, pode deixar, irei fazer um tutorial para o botão de retweet do topsy.
Obrigado pelo seu comentário.
Mais uma vez publicou um ótimo tutorial, está de parabéns! Apesar de seus tutoriais serem para o WordPress, este funcionou direitinho no Blogger, valeu Luan!
Obrigado Vinicius!
Meus tutoriais são tanto para o WordPress quanto para o Blogger. ;D
Ultimamente estou mais focado no WordPress, entretanto tentarei equilibrá-los.
Obrigado pelo seu comentário e pela sua visita. ;D
Volte sempre.
Olá,
Já instalei o botão em meu blog, mas gostaria de saber se é possível mudar a cor do botão para qualquer outra a meu gosto. Não acho que esta cor verde tenha muito a ver com o meu blog.
Desde já agradeço.
Obrigado e um abraço.
@Rascunho, infelizmente o TweetMeme não disponibiliza outras cores para o botão.
Obrigado pela sua visita! ;D
Volte sempre. =D
Estou querendo colocar no meu website que não é blog. Tem como?
@Matheus, Tem sim, é só copiar o código do botão e colocar no local que você quiser. ;D
Já havia colocado no meu blog, mas queria mudar o serviço e encurtamento, tirar do bit.ly e passar pro migre.me, mas não consegui, mesmo fazendo o que está aí no tutorial, o JS redireciona sempre pro bit.ly, pra mudar isso é só no JS mesmo.
coloquei no meu blog, porem está aparecendo apenas quando clica no post e mesmo assim lá em cima. como mudar ele de lugar?
gostaria q aparecesse assim http://www.blogdocampbell.com.br/
@Livia, você colocou exatamente como o tutorial ensina? É para aparecer exatamente como no link que você falou.
ué, acho q sim… pode colar em qualquer lugar? colei abaixo de body
@Livia, no tutoral acima está explicado detalhadamente qual código utilizar e em que lugar colocar. Você deve colocar o botão do TweetMeme antes ou depois da tag .
luan felipe eu fiz isto…achei o erro: eu n vi o local onde vc falou p colocar, pois achei q a tag era o q estava no quadrinho. O problema é q n me codigo n esxiste especificamente a tag q vc falou. Daí testei em vários locais e o mais proximo do titulo é o de agora, mas ainda n está bom….dá uma olhada
@Livia, você marcou a opção “Expandir modelos de widgets”?
q opção é esta? no blog?
Muito bom o post, parabéns! Uso o tweetmeme e para mim é o melhor sim, tem esse topsy mas não gostei muito dele não, o tweetmeme! O botão compactado é o melhor para mim, vlw!
Luan,
Apliquei tudo direitinho como vi neste tutorial, porém o botao esta retuitando cortando os acentos do titulo da minha pagina.
tem solucao isso ?
abs.
@Cael, olha eu nunca vi esse problema antes… Qual é a URL do seu blog?
estou testando aqui : http://srvhm.trip.com.br/revista/184/eu-como-uma-deusa.html
o titulo é Reportagens: ‘Eu como uma deusa – Edição 184 ‘
porem o retweet sai assim :
‘Reportagens: Eu como uma deusa – Edio 184 ‘
ve se entendeu…
@Cael, o problema é no botão então… Não sei qual seria a solução, talvez reinstalar o botão ou utilizar outro, como o Topsy.