O Twitter atualmente é o principal meio de compartilhamento de links na Internet, e cabe aos blogueiros aproveitar-se disso. Uma das formas mais eficientes é adicionar um link que facilite ao usuário indicar sua postagem no serviço. E para atender essa demanda, o site de encurtamento de URLs Bit.ly desenvolveu um script para facilitar o envio de links (já encurtados) para o Twitter, o qual podemos adicionar ao Template do Blogger/Blogspot, como você verá a seguir.
Este Hack utiliza um arquivo JavaScript externo. O uso excessivo de scripts no seu blog pode torná-lo lento. Portanto, não exagere!
Para adicionar o link “Tweet This!” ao final das postagens do seu Blogger, faça o seguinte:
Não se esqueça de fazer o backup do seu template antes de realizar as alterações no código, clicando em Baixar modelo completo.
<div class='post-footer-line post-footer-line-1'>
<b:if cond='data:blog.pageType == "item"'><span style='float: left; background: url(http://lh3.ggpht.com/_QocHY3CSRM0/ScI9h6TlvdI/AAAAAAAACZ8/lG_6Odnu1ok/s144/twittericon.png) left no-repeat; padding-left: 20px;'><script charset='utf-8' src='http://bit.ly/javascript-api.js?version=latest&login=tweettrackjs&apiKey=R_7e9987b2fd13d7e4e881f9cbb168f523' type='text/javascript'/>
<script charset='utf-8' src='http://s.bit.ly/TweetAndTrack.js?v=1.01' type='text/javascript'/>
<a expr:onclick='"return TweetAndTrack.open(this, \"" + data:post.url + "\");"' href='#'>
<span style='display:none;'>Estou lendo: <data:post.title/></span>Tweet this!</a></span></b:if>
A parte em verde é a URL do ícone que aparecerá à esquerda do link – por padrão está o favicon do Twitter. A parte em vinho é o texto que vai preceder o título do seu post no Tweet. Já a parte em laranja é o texto do link em si. Em alternativa à “Tweet This”, você pode usar “Twittar isso!” ou “Enviar para o Twitter”. A URL é encurtada automaticamente pelo Bit.ly.
Por exemplo, esta postagem ficaria assim depois que enviada através do link “Tweet This!”: “http://bit.ly/I7wZi Estou lendo: Adicionando o link “Tweet This!” ao final das postagens, que envia o link encurtado ao Twitter”.
Visualize para ver se não há erros no template e clique em Salvar Modelo. Após salvar, você pode testar o Hack clicando em alguma postagem do seu blog.
Se o Hack não funcionar ou causar erros no seu template, utilize o backup que você criou e clique em Fazer Upload, então refaça todo o processo.
Referências:
Blogger Buster
Anterior
Assine o Feed
Adicione ao Google
Receba por Email
Twitter
Fiz de tudo e não consegui colocar o hack do twitter.
Pode me ajudar?
Oi,
tem algo errado no seu codigo, tentei e deu erro. :(
Fui no blog da Amanda e copiei de lá e tá tudo certo. :D
Abraço. :)
Tentei e aparece isso:
Não foi possível visualizar o modelo
Corrija o erro abaixo e envie o seu modelo novamente.
Não foi possível analisar o seu modelo, pois sua formatação é inadequada. Certifique-se de que todos os elementos XML estão fechados adequadamente.
Mensagem de erro em XML: The reference to entity "login" must end with the ';' delimiter.
Valeu! Abraço!
Agradeço a todos que reportaram o erro e peço desculpas pela minha falha.
Agora o Hack já foi corrigido e está funcionando normalmente.
Bem, no meu código nem tem essa linha.
O mais parecido que tem é usa a tag 'p'. O que não tem nada a ver, né?
Eu posso simplesmente inserir esta linha? Isso resulta em algum problema?
::: No meu blog de testes funcionou legal, Sérgio. Só achei estanho que o texto do twitter ficou colado com o "Postado por Zemarcos". Ideia massa, parabéns!!!
é, no meu blog não funcionou de maneira alguma.
Fiz 2 vezes o processo e não aparece nada, nenhum botão, nem erro nada, como se o código nao estivesse ali..
ainda grato; o Ice breaker me foi muito útil!
Sérgio,
Vou reiterar. Funcionou! Porém, o hack aparece bem no início do primeiro parágrafo da postagem, antes da primeira letra do texto e também no fim; como retiro do início e deixo apenas no final do post?
obrigado!
Gabriel, como esse link é colocado no "post-footer" que é rodapé da postagem, teoricamente ele só pode ficar...no rodapé do post! Talvez você tenha usado algum Hack que alterou a ordem dos elementos e colocou o post-footer na parte superior.
E cuidado pra não confundir "post-footer-line-1" com "post-header-line-1"
Perfeito Sérgio, muito grato.
Seu comentário sobre a linha post-header foi fundamental, eu tinha duplicado o hack, acho que na tentativa de inseri-lo no blog.
Porém, no navegador do meu pc (firefox) só de vez em quando aparece a ferramenta, geralmente em posts antigos; já em outros, ele aparece normal. vc sabe o que pode ser?
brigado mesmo.
um abraço!
no meu não estava funcionando o codigo, não aparecia nada. Dai eu tirei as tags...
b:if
e
/b:if
funcionou blz. Não sei se prejudica em algo, só sei que ta funcionando.
falow
Opa...
Show...funcionaou na boa, mas vc poderia me dizer como faço (se é possível) usar Target="_blank" pra ele ir pro twitter e nao sair do meu blog..
Valeu!
MUito bom! Estava procurando esse hack tem um tempão. Só tá dando alguns problemas...
1- Como faço para ele aparecer na página principal também?
2- Gostaria de colocá-lo no fim da linha.
3- Como separa-lo do das outros links?
Grande abraço!
Olá Sérgio, tudo bem? Coloquei o código e funcionou beleza. Porém o link aparece antes do "Estou lendo", como faço para o link ficar nos finais posts do twitter?
Grande abraço e parabéns pelo excelente Blog!
Ensina colocar igual no seu blog , ja aproveita e tenta ensinar a colocar img , em baixo dos nomes comentarios , pra implementa o template !
Uso botões sociais no rodapé da postagem e um deles é do twitter. Existe alguma forma de usar o script para encurtar url neste botão? Já pesquisei um bocado aqui e não achei nada no google, nem em inglês nem em português.
Saudações!
Aqui funfou belezinha,dica muito boa, parabens!
tive o mesmo problema que o Italo André e aconteceu a mesma coisa q o ZMarcos com o meu blog de teste!!
o q faço??
Aconteceu o mesmo com o meu BLOG ficou em cima e não no fim da postagem.
Fale, no meu caso, o link funcionou ao editar HTML, salvei, mas no post em si aparece tudo legal da forma como foi ensinada aqui, e quando clica no link pra poder postar no twitter, não abre página pra poder colocar no twitter, clico e clico e nada. Me ajude cara...
Gostaria de saber um jeito de mudar esse código para que a imagem vire um botão clicável. Não gostei do esquema do link ao lado da imagem.
Queria também saber se dá para modificá-lo para que a gente coloque a imagem do tamanho que quiser.
Fiz algumas alterações no código:
www.acasaquedaasa.blogspot.com
Não consegui postar aqui... porque está dando como span.
Não consegui fazer abrir em uma nova janela corretamente... Esperimentem e vejam se dá certo com vocês... não sei se é porque o pop up está sendo bloqueado...
Se conseguirem abrir numa nova janela me avisem...
PS: O código está com alguns elementos desnecessários... mas não atrapalham em nada o funcionamento dele pelo que vi até agora. Quem souber e tiver diposição para limpar, limpe e poste aqui. Obrigado a todos!