Widget Tweet Button oficial do Twitter para Blogs

Siga o Ferramentas Blog: Canal no Youtube | Facebook | Twitter | Google+
Acesse AGORA: https://blogueiro.pro e se torne um Blogueiro de Elite.

botao-tweet-twitter-oficialAgora o Twitter tem um sistema oficial de re-tweets e envio de links e notícias para serem compartilhadas no serviço. Você pode adicionar um botão de envio de tweets em seu blog ou site que inclusive funciona como um contador de RTs. Já existiam sistemas similares que funcionam muito bem, mas é sempre bom contar com algo oficial.

Já estou usando o novo modelo de botão e você pode testar clicando no botão azul “Tweet” que está contando quantas vezes esse post já foi retuitado. Funciona tanto no Blogger quanto no WordPress.org.

O link da página oficial do Twitter para os novos botões oficiais é:

http://twitter.com/goodies/tweetbutton

Ao clicar você verá três modelos de opções do botão para adicionar em seu blog. Também pode incluir link específico para cada RT e até tem opções de indicar seu perfil para ser seguido. Depois de criar as características desejadas, é gerado um código que você usará em seu blog. Vou mostrar uma forma de usar, incluindo o novo botão ao lado do primeiro parágrafo de seus posts.

tweet-button-page

Depois de criar o tipo de botão com as características que desejar, você ainda vê o modelo e é gerado o código que você deve incluir em seu blog. Pode ser incluído em qualquer parte. Aqui vou mostrar como incluir lado-a-lado com o texto do primeiro parágrafo de seu post, exatamente como faço aqui no [ Ferramentas Blog ].

Vou ensinar aqui como adicionar tanto no Blogger (Blogspot) quanto no WordPress.org.

1. Para o Blogger (Blogspot)

Abra o painel e clique no menu “Design” ~> “Editar HTML”, marcando a caixa “Expandir modelos de widgets”. Então procure pela seguinte linha:

<div class=’post-body entry-content’>

Imediatamente ACIMA, cole o seguinte trecho, só modificando o que for indicado:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<p style='display: inline; float: right; margin-left: 5px'>
Adicione aqui o código do botão que foi gerado na página do Twitter.
Não modifique nada nos códigos.
</p>
</b:if>

Onde está indicado, cole o trecho de código que foi gerado para o modelo de botão que você quer usar em seu blog.

Se quiser que fique alinhado à esquerda, mude o que está em vermelho para “left”.

Salve o modelo e veja o resultado em seu blog.

2. Para o WordPress.org

Mas se você tem um blog no WordPress.org (com hospedagem e domínio), o código é um pouco diferente.

Entre no painel, clique no menu “Aparência” ~> “Editor” e abra o arquivo do tema “Post único (single.php)”. Procure pela linha que indica o início do texto e cole o seguinte trecho:

<div style="float: right; margin-left: 10px;">
Adicione aqui o código do botão que foi gerado na página do Twitter.
Não modifique nada nos códigos.
</div>

Cole, onde está indicado no código, o trecho que foi gerado na página de botões do Twitter.

Para alinhar à esquerda do parágrafo, troque o que está em vermelho para “left”.

Salve para aplicar em seu blog e veja o resultado.

Nos dois casos, seja no Blogger ou no WordPress, o botão só aparecerá na página dos posts quando o visitante entrar no artigo para ler.

Outros artigos sobre compartilhamento e Gadgets:

Já pensou em ser um(a) Blogueiro(a) mais Profissional?

Está cansado(a) de ser um blogueiro mediano(a) e que não tem resultados com seu Blog, não ganha dinheiro e não recebe as visitas que gostaria?

Você chegou aqui procurando como aprofundar seus conhecimentos em Blog, como Ganhar Dinheiro com seu Blog, aplicar as melhores técnicas de SEO, divulgar seu Blog e fidelizar seu público alvo. E posso te ajudar com essas coisas e muito mais, elevando o nível de qualidade do seu projeto.

Desenvolvi um curso completo, totalmente online, cobrindo tudo o que é necessário para um Blog atingir seu potencial máximo, detalhe por detalhe, que vão te tornar um Blogueiro de Elite:
  • Técnicas de produção de conteúdo
  • Fidelização do Público alvo
  • Divulgação e Técnicas de SEO
  • Métodos e técnicas de Monetização
Acesse AGORA: https://blogueiro.pro e se torne um Blogueiro de Elite.

Esta é sua chance de ser mais profissional e ter um blog eficiente, completo e que pode ser sua fonte de renda permanente. Sou Blogueiro desde 2007 e condensei todo este conhecimento dentro do curso Blogueiro de Elite para entregar a você.

14 Comentários

  1. Olá Marcos,

    Funcionou, mas como o codigo do estava um pouco diferente, procurei ele e coloquei exatamente como estava descrito.

    Valeu!!!

    Abraço

    Responder

  2. Como havia passado no Ustream.tv, sobre a linha de código: não encontro no meu template, o "div class='post-body entry-content'" (já expandi os modelos de widget). O que devo fazer?

    Responder

  3. Muito interessante, e já estava mais do que na hora do Twitter ter um sistema próprio para isso.

    Parabéns também Marcos por agora sempre incluir dicas para WordPress.org.

    Responder

  4. Obrigado Marcos, já estou usando.

    Uma dica para quem usa blogger:

    Para que o botão twite exatamente o título do post e a sua url, é necessário essa pequena adaptação. A grande vantagem é que independente de estar na página do post (ex: estando na home), o botão twita o post.

    <a href="http://twitter.com/share&quot; class="twitter-share-button" expr:data-url="data:post.url" expr:data-text="data:post.title" data-count="horizontal" data-via="USERNAME_DO_TWITTER">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script&gt;

    (altere USERNAME_DO_TWITTER pelo seu)

    Responder

  5. @Erunerdo – yes, using the blogger varialbes is the best way to add the button on blogger and you are almost correct but there are lil errors on that code(probably a mistype). it should be expr:data-text="data:post.title" and there is no need to repeat the script on all the posts. Blogger Tweet Button

    And for wordpress also, it is better to add the code to the post loop with php codes for the post url and tweet text or use some plugin like WP Tweet Button

    Responder

  6. Só senti falta de uma coisa…
    O TweetMeme e outros similares, ao clicar no numero de pessoas você era redimensionado para uma pagina que mostrava quais pessoas twitaram e o que elas escreveram, o que é bem legal para o dono do blog.
    No sistema do twitter, você vai para a página de pesquisa em tempo real, mais é bem falho, até porque muita gente usa encurtador de links, não o link original, e também o tempo real só é interessante para quem tem um volume de público muito grande. Enfim, nesse parte estou frustado.

    Responder

  7. Olá! Obrigado pelas dicas Marcos. Vou colocar esta widget do twitter no meu blog, para fazer uns testes.

    Forte Abraço.

    Responder

  8. Pingback: Adicionar botão Linkedin no Blog para compartilhar seus posts | [ Ferramentas Blog ]

  9. Pingback: Adicionar botão do Twitter e Curtir do Facebook no Blog: WordPress.org e Blogger | [ Ferramentas Blog ]

  10. Pingback: Botões que o seu Blog tem que ter | [ Ferramentas Blog ]

  11. Olá Marcos
    Segui suas dicas e consegui colocar o botão em meu blog, então resolvi trocar de lugar e depois disso ele não apareceu mais.
    Já limpei tudo e comecei novamente, por várias vezes mas ele se recusa a aparecer… (sorrisos). Será que tem uma dica?
    Obrigada!
    Sandra

    Responder

Deixe um comentário

Ao comentar você concorda com nossa Política de Comentários.