Adicionar botão do Twitter e Curtir do Facebook no Blog: WordPress.org e Blogger

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

Algumas pessoas se atrapalham com códigos de recursos importantes para o Blog. É indispensável exibir botões de compartilhamento das principais redes sociais, como o Twitter e o Facebook. Os mais usados são os Retweets (RT) e o Curtir (Like). Então vou mostrar aqui como adicionar os dois ao mesmo tempo junto ao texto do post.

Juntei os dois botões (Retweet e Curtir) para serem exibidos ao lado do primeiro parágrafo do texto.

Já ensinei algumas opções de botões de compartilhamento e, se você quer mais detalhes de como os códigos funcionam, recomendo que os leia:

Mas se você só quer colocar algo que funcione em seu blog, um tutorial bem simples e objetivo, então aqui está a solução.

1. Para quem usa o Blogger

Se você usa o Blogger, vá ao painel de controle, acessando a sua conta. Clique no menu “Design” ~> “Editar HTML” e marque a opção “Expandir modelos de Widgets”:

design-editar-html-widgets-blogger

Agora procure pela seguinte linha do código:

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

imediatamente ACIMA disso, cole o trecho que segue sem modificar nada nele:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<p style='display: inline; float: right; margin-left: 5px'>
<a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal">Tweet</a>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
<br/>
<iframe expr:src='"http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url+ &quot;&amp;layout=button_count&amp;show_faces=false&amp;width=80&amp;action=like&amp;colorscheme=light"' scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:80px; height:20px"></iframe>
</p>
</b:if>

Salve para ver o resultado em seu blog. Note que os botões só aparecem quando você está na página individual do post e fica escondido quando está na página principal do Blog.

2. Para quem usa o WordPress.org

Mas se você usa o WordPress.org (com domínio e hospedagem próprios), basta entrar em seu painel. Procure pelo 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;">
<div class="share-this">
<a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal">Tweet</a>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
<div class="facebook-share-button">
<iframe src="http://www.facebook.com/plugins/like.php?href=<?php echo urlencode(get_permalink($post->ID)); ?>&amp;layout=button_count&amp;show_faces=false&amp;width=80&amp;action=like&amp;colorscheme=light" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:80px; height:20px"></iframe>
</div>
</div>
</div>

Não modifique nada no código. Salve o modelo e veja o resultado em seu blog.

Os botões só aparecem nos posts individuais, ficando escondidos quando você está na página principal do Blog.

Outros códigos e gadgets para seu blog:

.

27 Comentários

  1. Olá amigo,passei mais uma vez para agradecer não só por este pots, mas por todos que têm sido de grande valia para o melhoramento do meu blog.
    Fico pensando se não fosse site (ou blogs) como o seu; o que seria de tantos outros blogueiros, iniciantes ou não, pois estamos sempre a precisar da ajuda ou orientação de alguém. Precisamos disso para melhorar!
    Parabéns mais uma vez pelos posts, eles atendem as minhas necessidades (acho que de todos que freqüentamos) com precisão cirúrgica. Que continuem assim!
    Até breve!

    Responder

  2. No wordpress, já encaixei em vários lugares e não conseguir exibir os ícones, tem como falar em que linha específica tem que encaixar o código. Esse é o código do meu blog:

    Responder

    • Clevis,

      Não dá pra saber em qual linha ou lugar exata colocar em blogs do WP, pois cada layout em uma configuração específica para fazer funcionar a barra lateral. É preciso mesmo testar para saber onde vai funcionar melhor.

      Responder

  3. Marcos Lemos,
    antes de mais nada, parabéns pelo blog! tu não faz ideia do quanto essas suas dicas nos ajudam cara, sério! olha só, gostaria de saber como colocar o botão “tweetar” na home do blog, em cada post, e não somente nas páginas individuais. para mim é mais interessante que seja assim. eu até consegui colocar, mas quando alguém tweeta algum post, a contagem daquele post vale para todos os outros, entendeu? eu gostaria de colocar a contagem individual de cada tweetada em cada post, assim como já vi em vários outros blogs. com o botão “curtir” do facebook isso deu certo, mas não tô conseguindo com o botão “tweetar”.
    me ajuda aí se possível, grande abraço.

    Responder

  4. Adicionei o código e funcionou direito, mas depois adicionei um outro código e não consigo tirar o primeiro. Daí ficou com dois botões de tweet. Como faço pra tirar?

    Responder

  5. Olá pessoal,
    Tenho uma dúvida cruel. Será que alguém pode me ajudar?
    Instalei os botoões do face e do twitter apenas nos posts individuais. Utilizei os códigos simplificados do addthis.com.
    Funciona direitinho.
    Quando coloco os botões e os contadores para aparecerem na página principal, os números exibidos são correlacionados aos cliques dessa página principal e não das páginais individuais.
    Gostaria que, na página principal, os contadores fossem exibidos com os cliques de ‘curtir’ das páginais individuais.
    Será que eu me fiz compreender?

    Responder

  6. MUITOOO OBRIGADAA MESMOOOOOO! Eu estava procurando muito sobre como colocar de isso no meu blog mais só encontrava formas muito difíceis , super adorei e é bom que é super simples de colocar e não aquele bicho de sete cabeças que tem nos outros sites que ensinam! bjs .

    Responder

  7. Olá!! tem como escolher o lugar onde vai ficar os botões? eu queria no rodapé dos posts, mas eles estão ficando perto do titulo das postagens! Obrigado desde já.

    Responder

  8. ola. preciso colocar o botao curtir e enviar do facebook no meu blog, mas nao quero colocar do twiter por enquanto. sou iniciante e nao entendo de programacao. pode me ajudar? aguardo contato obrgda.

    Responder

  9. Olá, tudo bem?
    Consegui colocar os botões do Facebook e Twitter tranquilamente. Mas na hora que alguém quer curtir em uma dessas duas redes sociais o botão está inativo. O que pode ser? Muito obrigado.

    Responder

Deixe um comentário

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