Assine nosso Feed


Melhores Dicas para Blogueiros

Passe o mouse e veja qual o assunto do tutorial de cada imagem

Twitter button no seu blog - botão retweet

O Twitter lançou o seu próprio botão para enviar as postagens do blog para o Twitter (retweet), é muito fácil de usar principalmente porque não precisa alterar nada no código do botão que achamos nos Twitter Goodies >> Tweet Button. Você só precisa entrar no Twitter, escolher entre as opções de modelos de botão e pegar o código do seu retweet button e para colocar no seu blog também é muito fácil e rápido.

Entre na pagina do Tweet Button, escolha uma das opções de botão, sugerimos não alterar nada nas configurações: Tweet text, URL e Language, a única que seria interessante é o idioma, mas quando escrevemos esse tutorial ainda não tem a opção português (item language).

twitter button
Depois que escolheu seu modelo é só copiar o código no final da pagina e voltar ao blogger, entre na pagina designer >> editar html, clique para expandir o modelo e coloque o código logo junto com <data:post.body/>.

codigo do botao retweet

Escolha se prefere o botão retweet no inicio ou final do texto de sua postagem e coloque o código antes ou depois do trecho que citamos. Evidentemente colocar o código antes faz o botão aparece no inicio do texto e colocar depois o botão aparece no final do seu texto.

Podemos também escolher o lado que o botão aparecerá, colocando o código fornecido pelo Twitter dentro da tag div, deste jeito:

<div style="float:left; margin:2px">codigo do botao retweet</div>

Do jeito que está o código acima o botão aparecerá do lado esquerdo, se preferir do lado direito troque a palavra left por right.


Notamos uma diferença entre o numero de retweets mostrado pelo contador entre esse botão oficial do Twitter e os botões feitos pelos sites Meme e Topsy, mas esperamos que essa falha seja corrigida em breve. Embora seja um pouco difícil (trabalhoso) saber qual deles é o mais correto. Related Posts with Thumbnails
Link desta página
Comentários
76 Comentários

76 Comentários:

Anônimo disse...

Depois de qual trecho eu colo o código? Não foi citado o trecho...

Juliano disse...

colocar o codigo aonde?????

"Depois que escolheu seu modelo é só copiar o código no final da pagina e voltar ao blogger, entre na pagina designer >> editar html, clique para expandir o modelo e coloque o código logo junto com ." Não está faltando texto aqui?

Tuma disse...

"junto com ." ??

Anônimo disse...

Você poderia me ajudar numa coisa
eu keria saber se há alguma maneira de dxar fazer akela pagina de quando você entra nela diz que esta em manutenção.Obrigado
Seu blog é 10!

Renato Batista disse...

é para colocar o codigo junto de qeu extamente?

Fabiano Roberto disse...

é para colocar o código perto do trecho <data:post.body/>

Fabiano Roberto disse...

acho que ocorreu algum erro e o código não apareceu em alguns navegadores, mas republicamos a postagem e agora parece estar tudo certo

Fabiano Roberto disse...

Anônimo
não tem como deixar só um aviso de pagina em manutenção, o que pode é fazer uma postagem falando sobre isso ou adicionar um gadget no inicio do blog com o aviso.

Renato Batista disse...

Não to achando de jeito nenhum esse

alguem pode me ajudar?

Fabiano Roberto disse...

use o ctrl F, precisa clicar para expandir o modelo para achar.

pesquise por post.body, as vezes um espaço em branco atrapalha o ctrl f

Mônica Bustamante disse...

Oi, Fabiano, como eu coloco este botão à direita?
Obrigada.

http://www.coisasdepedralva.blogspot.com

Fabiano Roberto disse...

Mônica Bustamante, achei sua pergunta interessante e fiz uma atualização na postagem, agora ela mostra como colocar o botão do lado esquerdo ou direito

ʝuɦ disse...

Olá, Fabiano. Tudo bem? Adorei a dica. Gostaria de saber como faço para centralizar o button? Obrigada desde já. =)

Jéssica silva disse...

a postagem é realmente muito interessante,mas eu tenho medo e mudar e não saber voltar atrás!

Mônica Bustamante disse...

Em qual div> devo colocar isso? Não consegui.

Fabiano Roberto disse...

Mônica
no mesmo lugar que colocou o código do botão retweet

Lili disse...

Deu tudo certo, exceto que quando clico em retweet ele retweet link do meu blog e não para cada post dele. Você sabe como fazer para arrumar isso?

Obrigada

Tuma disse...

quando clico envia para o twitter o link da página inicial, não o link do post.

precisa clicar no link do post primeiro ou é algum problema mesmo?
como resolvo isso?

Fabiano Roberto disse...

para funcionar em cada postagem precisa colocar o código para aparece o botão somente nas paginas individuais, veja aqui como fazer: Conteúdo diferente nas paginas do blog

Saulo Sales disse...

Fabiano, sabe como posso inserir o botão na tela inicial dos post? Sem que os visitantes precisem entrar no post para acionar o botão!
O botão ficou dentro do post, daí o pessoal usa o botão do share que linka o post pelo via @AdThis. Queria que fosse pelo @santanasales (meu twitter) e o botão do twitter já está todo configurado!
Valeu

Fabiano Roberto disse...

pode tentar adicionar o botão como um gadget de html/javascript, assim ele funcionar para a pagina que está sendo visitada

Saulo Sales disse...

Tentei, mas não ficou legal!
Quero deixar os dois botões: Curtir e Twitter na tela inicial do post, sem que o visitante tenha que entra no título do post!
Exemplo: www.brainstorm9.com.br
Valeu

Fabiano Roberto disse...

Saulo Sales
veja o lugar que colocou esses códigos, deve ter algo assim perto antes deles <b:if cond='data:blog.pageType == &quot;item&quot;'>
codigos ....
</b:if>

é só colocar os códigos fora desta tag, veja mais detalhado aqui: Conteúdo diferente nas paginas do blog

Planeta Gestão disse...

Obrigado pela dica. Depois de procurar muito por diversos posts em diversos blogs na net, encontrei aqui a dica completa para colocar o botão do lado direito do post. Valeu mesmo!

Juliana Souza disse...

Deu tudo certo Fabiano.Obriga.Gostaria de saber como colocar de outra cor. Gostava mais do verde.

Fabiano Roberto disse...

esse botão oficial do Twitter só tem nesta cor, mas se quiser pode usar outro fornecido pelo topsy: Botão Retweet Personalizado - Topsy

Dustin Maia disse...

O botão apareceu lá em baixo do blog e não no pos :/

Fabiano Roberto disse...

o lugar que o botão aparece depende de onde colocou o código

Douglas C. R. Paes disse...

adicionei o botão aqui e funcionou perfeitamente
o único problema é o contador, que permanece em 0 mesmo depois de eu ter "tweetado" o post

meu código ficou assim
Tweet

procurei na net, mas até agora não encontrei nada pra resolver o problema

abraço

Fabiano Roberto disse...

Douglas C. R. Paes
nos testes que fiz o botão oficial do twitter sempre mostrou menos retweets que outros botões

Douglas C. R. Paes disse...

Mas o meu problema é maior, pois o que acontece não é que mostra "menos", ele não mostra nada.
O valor é sempre 0.

Fabiano Roberto disse...

o código do botão retweet feito pelo proprio twitter não tem como fazer alterações nele, então sugiro usar um botão de outro site como:meme(Colocar botão retweet no blog) ou topsy(Botão Retweet Personalizado - Topsy)

Douglas C. R. Paes disse...

Legal... vou testar

obrigado pela dica

depois posto aqui o resultado

abraço

Douglas C. R. Paes disse...

Usei a dica do meme(Colocar botão retweet no blog), e agora está funcionando perfeitamente...

se quiserem conferir, o endereço do blog é http://hotwheelsaddiction.blogspot.com

obrigado

Daniel Cunha Rêgo disse...

Não tem a entrada no HTML do meu blog.

P.S: eu uso o blogspot

Fabiano Roberto disse...

o blogspot tem a pagina designer e nela tem uma guia para editar o html

Luanda Vieira disse...

Obrigada pelas informações, foram muito úteis! Já estou usando no meu blog.

Valeu!

Joao N disse...

Deu certo!!
Obrigado mais uma vez. Seu blog é ótimo.
Parabéns!

amigoZen disse...

Meu blog amigoZen já tem 1 ano na net e sempre que decido acrescentar ou mudar algo na sua página, sempre pesquiso por aqui. Valeu pelas dicas, obrigado pelas postagens. Como forma de agradecimento, postei o seu banner,ok? Abração

savingheroes.org disse...

Ola... nao consigo colocar nenhum botao no meu blog.. nem do twitter, nem do facebook, nem de nada :( meu blog e do wordpress.. eh porque eu tenho que comprar o ccs ou eh possivel colocar-los sem comprar o ccs? espero que obtenha uma resposta, ja fiz de tudo mas nao consigo.... obrigada

Fabiano Roberto disse...

os sites tem intruções para usar os botões no wordpress... que é diferente que usar no blogger

Memes da Net disse...

fabiano, boa tarde

Coloquei o botão certinho no meu blog, mas ao inves dele encurtar o link da postagens, ele encurta a pagina inicial do meu blog, porque?

Fabiano Roberto disse...

se colocar como um gadget ele vai usar a pagina atual não importa qual seja ela.

para enviar as postagens precisa colocar pela pagina editar html

Memes da Net disse...

Fabiano eu coloquei logo apos no html, ai beleza o botão aparece, depois clico para postar no twitter ele aparece lá que ira encurtar a pagina inicial do meu blog e alem disto quando entro no twitter o endereço do meu blog sai normal sem o endereço encurtado, pior que eu baixei outro template e da este mesmo problema

Fabiano Roberto disse...

isso é algo interno dos códigos do Twitter, não temos como alterar nada...

infelizmente o jeito é usar o botão feito por outro site caso não goste de como o twiitter faz o dele.

Botão Retweet Personalizado - Topsy


TweetMeme - Colocar botão retweet no blog

O PANTANAL ON LINE - PROFESSOR RENATO PANTANAL disse...

Testado e aprovado Amigão, muito obrigado!

O TIO SUKITA disse...

perfeito!

Mel disse...

FABIANO COMO COLOCAR O TWITTER COM TODAS AS POSTAGENS DAS PESSOAS Q ME SEGUEM E Q EU SIGO NO BLOG? NAO SÓ AS MINHAS. JA VI EM UM BLOG MAIS NEM LEMBRO QL FOI. SE SOUBER ME ENSINA. OBG!

Fabiano Roberto disse...

Mel, não me lembro de ter visto algo assim, mas veja aqui: Ferramentas e Acessórios para o Twitter, lá tem praticamente de tudo para o twitter

XaNdE disse...

Olá Fabiano, tem como eu deixar no centro?

Fabiano Roberto disse...

no código onde falamos para colocar float:left; margin:2px use text-align:center e o botão ficará centralizado

XaNdE disse...

Obrigado.

Luan Vieira (Adiministrador do Blog) disse...

Fabiano gostaria de saber pq o meu botao nao esta contando direito tipo o twitter vai mais o cantador nao sai do 2 o mesmo e pro face bok eu tenho o codigo daquele addthis www.hamuleque.co.cc

Fabiano Roberto disse...

o botão as vezes demora um pouco para contar os envios... mas não adianta você mesmo enviar varias vezes, ele só conta uma

Geog. José Carlos Jr. disse...

Infelizmente eu instalei mas quando eu fui testar, percebi que enviava o endereço do blog, mas não a notícia em questão, como em outros blogs que usam.

Yudji disse...

ei cara eu coloquei talz ai começa com 14 tweets sendo que eu nao twittei nada --' e quando twito fica 14

Lumagga disse...

Fabianooo, eu coloquei o botão mais ja apareceu com 86 tweet! como mudar isso?

Fabiano Roberto disse...

Yudji e Lumagga
quando li o primeiro comentário pensei que fosse erro no colocar o código, mas como são duas pessoas falando sobre o assunto deve ser erro do site que gera o botão, acho que devem corrigir isso em breve..

Peter disse...

não acho o no meu HTML

Fabiano Roberto disse...

Peter
clique para expandir o modelo de widgets e use o ctrl f para procurar

Blog Paocommorttadela disse...

Olá!
Eu coloquei o codigo e aparentemente estava tudo certo... mas notei algo estranho
Quando eu clico para retweet aparece o titulo do blog+ url encurtada + via
sendo que deveria aparecer titulo do post+ url encurtada + via
Vc sabe como arrumar??
OBS: peguei o código do site do twitter mesmo!
Obrigado pela atenção
No aguardo.

Fabiano Roberto disse...

Blog Paocommorttadela
depende de como era o código.. . veja aqui um deste tipo que falou: Links das redes sociais em forma de menu

Buccini disse...

Salve galera.
É o seguinte
Coloquei o código no fim da postagem e deu tudo certo, mas o problema é que quando alguém usa o botão a contagem soma em todos os posts. Exceto quando eu entro em um post específico. Ai sim a contagem é individual. Mas do contrário em todos os meus posts o numeros de retweets é o mesmo.
O que eu estou fazendo de errado?

Valew.
Excelente blog...

Fabiano Roberto disse...

Buccini
na verdade esse código mostra os twitts da pagina atual... ou seja na pagina inicial do seu blog provavelmente será maior, mas não é uma soma

Paloma disse...

Ajude-me, eu consegui colocar o botão no meu blog, mas não consigo mudar o lado onde ele vai aparecer, porque não achei a linha de código que vc citou no post :/

Fabiano Roberto disse...

Paloma

no código onde está div style="float:left; margin:2px

se trocar left por right o botão ficará do lado direito

Alex Nunes disse...

Sim encontrei o . e apos isto coloco que codigo???alguem pode ajudar?

Fabiano Roberto disse...

depois do post.body que você coloca o código

Mateus Back disse...

boa tarde fabiano...
eu coloquei no meu blog ao lado.. em html/javascrip...
mais o button começou a contagem do numero 12 e sobe a contagem sem ngm twittar... que bug eh este?
obg desde ja.

www.backdiz.blogspot.com

Fabiano Roberto disse...

Mateus Back
dizer qual é a contagem certa é complicado... mesmo se usar botões retweet de outros sites(topsy ou meme) verá diferenças na contagem

ŦØRçΛ ßIЄßЄR✔ disse...

OI!Estou precisando de uma ajuda!E logo pensei no seu blog. Não tem a ver com o twitter. Tenho um blog fã clube, e queria promover o fã do mês,os usuários tem que enviar a foto e uma frase. Tem como os visitantes enviar uma foto ou frase? Por favor me ajude.

Tuis disse...

Preciso De ajuda. o Botão fico antes do resumo da postagem nao tem como fica so no final?

Fabiano Roberto disse...

Tuis
precisa trocar o lugar do código do botão no seu html.

ache o código do resumo e coloque o código do botão depois dele

Tuis disse...

sabe dizer qual o codigo?

Fabiano Roberto disse...

Tuis
tem varias formas de fazer o resumo da postagem, mas procure por class='jump-link' acho que todos os códigos tem isso.

veja aqui: Fazer Resumo da Postagem com Miniaturas das Imagens

Tuis disse...

Cosegui! muito obrigado mais 1 vez. Sempre nois ajuda

Postar um comentário