![[ Ferramentas Blog ]](/wordpress/wp-content/themes/fb5/images/logo.png){kind=logo}
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.
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:
- Widget Tweet Button oficial do Twitter para Blogs
- Adicionar botão “Curtir” (Like) do FaceBook nos artigos do Blog
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”:
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 == "item"'>
<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=" + data:post.url+ "&layout=button_count&show_faces=false&width=80&action=like&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)); ?>&layout=button_count&show_faces=false&width=80&action=like&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:
Lemos, ficou legal, muito bom, obrigado por estas dicas, deixam nossos blogs muito mais bonitos!
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!
Gostaria de colocar também nas páginas estáticas.
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:
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.
Só tenho uma coisa a dizer: VC É FODAAAAAAAAAAAAA![desculpe a expressão..rsrsrs]
Obrigaga por mais uma dica!
Bjos
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.
Cara muito boa a dica, tinha acabado de trocar meu template e nenhum que encontrava tava funcionando e esse me ajudo muito !
Abraços e Sucesso!
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?
Você sabe como personalizar esse botão no Blogger?
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?
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 .
Olá amigo o código “” e não está pegando no blog, o que pode está acontecendo? agradeço desde de já e parabéns pelo site!
Precisa ver se você colocou no local correto e se colocou todo o código.
Tente instalar novamente.
Entao amigo Claudio eu fiz tudo oq ensina o tutorial, coloquei este codigo claro sem espaços e no localizador o mesmo nao encontra!
Poxa o código nao pega aqui, mas é esse que tem no tuto: div class
pois é, no meu template do blogger não posui a linha , como faço?
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á.
Sim,
Basta seguir o tutorial e, na hora de mexer no código fonte do blog para adicionar os trechos indicados, escolha o local desejado.
Muito obrigada, depois de meses, finalmente encontrei esse post ensinando como adicionar o botão. Já estava pensando que estava demente.
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.
Luci,
Pesquise aqui mesmo no Blog que você encontrará os botões separados e em tutoriais específicos para cada rede social.
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.
Pode ter algum conflito com outro plugin ou código em seu blog.
Consegui colocar obrigada pela ajuda 😀
E como fazer esses flutuantes na lateral como o do seu blog?
Fernanda,
Esse é o plugin WordPress Social Count Plus – que você pode aprender como usar nesse artigo:
https://ferramentasblog.com/2011/12/contador-de-assinantes-seguidores-fas-posts-e-comentarios-wordpress-social-count-plus.html
Espero que ajude.