Adicionar botão "Curtir" (Like) do FaceBook nos artigos do Blog – Blogger e WordPress

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

botao-curtir-facebookIntegrar seu blog e compartilhar informações na redes-sociais é de extrema importância para divulgar o conteúdo de seu blog e atrair mais visitas. As redes-sociais geram visitas consistentes, pois nascem da indicação de outras pessoas, o que aumenta suas chances de conversão. O FaceBook disponibilizou o botão “Curtir” para ser adicionado junto ao seu blog. Veja como integrar isso.

✅ Canal no Youtube | Inscreva-se AGORA ✅

Já ensinei aqui algumas opções de botões e links para compartilhar seus artigos nas diversas redes-sociais e recomendo que você dê uma olhada nisso também, inclusive o botão “Compartilhar” do FaceBook:

Como adicionar botão “Curtir” do Facebook

A novidade veio na página de desenvolvedores do Facebook e você pode acessar direto no link:

Aparece automaticamente em português identificando a língua do navegador.

Ao adicionar em seu blog o efeito é bem simples: o visitante pode marcar que gostou de seu conteúdo que aparecerá na lista dele no mural do Facebook indicando que ele gostou; exatamente como na própria página do serviço, como um voto. E aparecerá no seu blog como esse ícone seguido do número de “votos”, como ilustrado na imagem do início desse artigo.

Funciona tanto no Blogger (Blogspot) quanto no WordPress.org (para quem tem hospedagem e domínio próprio), e é bem simples de adicionar. Vou mostrar o modelo básico – como da figura – que ocupa pouco espaço. se quiser outros modelos veja na página deles, citada acima.

1. Para o Blogger (Blogspot)

Abra o painel e clique no menu “Modelo” e clique no botão “Editar HTML” para ver o código fonte do Blog, 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, sem modificar nada:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<p style='display: inline; float: right; margin-left: 5px'>
<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 o modelo e tudo já estará funcionando. Aparecerá o botão alinhado à direita do primeiro parágrafo de todos os seus posts, ocupando o mínimo de espaço, somente na página do artigo individualmente.

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;">
<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>

Salve e já estará funcionando em todos os posts de seu blog. Aparecerá alinhado à direita do primeiro parágrafo de cada página.

Observações sobre algumas mudanças:

  • Fiz alguma modificações no código original dado na página padrão de Desenvolvedores do Facebook para que funcionasse sem erros no Blogger e no WordPress e para que o código identificasse a URL de cada página onde está inserido.
  • Também mexi nas medidas de altura a largura do espaço ocupado pelo ícone e o contador. No original há uma largura de 460px e 600px de altura, que atrapalhava uma boa integração. Mudei aqui para apenas 80×20.

Outras boas opções de compartilhamento:

.

53 Comentários

  2. Marcos
    Já tenho o botão like no meu blog. É interessante mas não tenho a certeza das vantagens em termos de tráfego.

    Responder

  3. @Ramiro,
    Por ser algo novo, não foi possível determinar mesmo as reais vantagens desse recurso. Mas acredito que com um bom volume, isso se torne uma boa divulgação.
    Sem contar que é um sistema de classificação de seu conteúdo bem objetivo para os visitantes saberem o que outros gostaram.

    Responder

  4. Eu acho interessante pois o mesmo entra na timeline do usuario do facebook e isso pode gerar mais visitar, creio eu.

    Responder

  6. tenho uma duvida.. o Like fica em cada post.. porém na home do blog que contem o preview dos post… nao aparece o Like. E no caso do meu blog, o preview na home já é suficiente para avaliação. Muitos usuários não entram no post, pois as imagens já dizem muito. Como faço para que o botão apareça sob cada post mesmo na home do blog? Alguem pode me orientar?

    Responder

  7. Amigo,
    Esse modelo que ensino acima pega o endereço da página onde está adicionado o botão. Assim não é possível adicionar para aparecer na primeira página do blog, pois senão o link indicado será o dessa primeira página e não do link.

    Desculpa, mas aqui não tenho como te ajudar além disso.

    Responder

  12. Parabéns pela postagem. Muito esclarecedor. Só mesmo no Ferramentas Blog que encontramos tantas facilidades para nós bloqueiros. Melhor ainda que não precisamos mexer nos códigos, pois já vem com as melhorias. Valeu. Abraços

    Responder

  13. Instalei no meu blog do blogger, mas retirei, porque ao clicar no botão, a mensagem dentro do perfil do Facebook aparecia com uma imagem de um banner de parceria do blog, que está em um widget da barra lateral, e não com uma imagem da postagem em si.
    Ao clicar no botão “Compartilhar”, a pessoa pode escolher a imagem que irá ser mostrada. Mas com esse botão, a imagem é sempre a mesma, que está na barra lateral, que não tem nada a ver com a postagem.
    Alguém sabe como resolver esse problema?

    Responder

    • Só para quem usa o WordPress.org (com domínio e host próprios), como está explicado no post assim.
      Se você usa o WP.com nào terá como inserir tais códigos.

      Responder

  17. ::: Marcos, vc percebeu que o botão “curtir” está tendo problemas há alguns dias? Muitas vezes, quando se clica nele, não contabiliza. Tentei curtir um de seus posts e também aconteceu o mesmo bug…

    Responder

  21. Hi, for God sake i am getting crazy. In my wordpress there is no option: “Like Button”! (You can enable/disable the blog Like button in the sharing page) on Settings/sharing! What should i do fo fix that? I would like to make like yours, with the avatars of the people that “like”!

    Responder

  22. Eu achei legal ter um “Like box” do Facebook no meu blog. Percebi um grande aumento de “Curtiu” na Fan page do meu blog no Facebook. Mas analisando friamente (usando o Bugzilla e o Page Speed), percebi que esse Like box é extremamente pesado. Ele sozinho faz mais de 20 requests e baixa mais de 300 KB de arquivos apenas para ter o botão Like. Se eu quiser os ícones das pessoas que já curtiram então, esses números sobem ainda mais.

    É um grande desperdício, já que o Widget do Twitter e o do Google Plus fazem apenas 3 requests cada, e baixam menos de 30 KB JUNTOS.

    Existe uma forma mais simples, sem iframes ou sem scripts e CSS externos, para ter um link que “curte” automaticamente uma URL?

    Responder

  23. Olá Marcos!
    Instalei o botão, e ele apareceu, porém não estou conseguindo clicar nele, é como se ele fosse simplesmente uma imagem. Será que esqueci algum detalhe, não consigo arrumar.
    Obrigada,
    Débora

    Responder

  24. Olá, no meu site WordPress já fiz vários testes e sempre que clico no botão curtir do Facebook ele envia o link do Post + um trecho do texto que está na sidebar + miniaturas dos banners da sidebar. O correto seria enviar o link do Post + trecho do Post curtido + miniaturas das imagens do Post curtido. Não consegui corrigir isso, alguém tem uma idéia? O site é rm16.com.br

    Responder

  26. Olá mais uma vez.

    Fiz o procedimento, o botão apareceu nos posts exatamente como vocês disseram, mas, não aparece em todos os navegadores e no que aparece ele está apenas como uma imagem, não há ação nenhuma ao clicá-lo.

    Vocês tem uma sugestão para resolver isso?

    Obrigado.

    Responder

  27. Tenho a mesma dúvida do Daniel Ribeiro, não existe algum modo que ao abrir o link a página já seja automatimanete “curtida”, sem a necessidade de de clicar no “Like”?

    Responder

  28. Pingback: Novo botão Send do Facebook para compartilhar com Grupos | [ Ferramentas Blog ]

  29. Queria saber se para o botão contabilizar os likes é necessário que os usuários cliquem nele na página do blog ou se apenas curtir a página compartilhada no Facebook já contabiliza também. Obrigada!

    Responder

  30. Pingback: Novo Tumblr Button: Compartilhar conteúdo no Tumblr | [ Ferramentas Blog ]

  31. Olá, Marcos. Coloquei o botão curtir faz tempo e tinha dado tudo certo.
    Mas ontem, apenas no Firefox, ele não está funcionando.
    Em todos os outros navegadores está ok, mas no Firefox fica com erro.
    Você saberia me dizer o que acontece? É um bug?
    Obrigada.

    Responder

    • Josemara,
      Se você não fez nenhuma alteração, com certeza é um bug. Verifique se você não apagou nada ou não adicionou nada novo que esteja dando conflito para o botão ter parado de funcionar.

      Responder

  32. Pingback: Como criar página do Blog no Facebook

  35. Marcos,
    Estou com um blog no WordPress.com; tenho o plugin em questão e funcionava perfeitamente, com os botões de curtir e compartilhar em todos os posts aparecendo na pagina HOME, inclusive. Quando instalei o SEO WordPress, ele parou de funcionar. Não aparece mais no Home, somente quando entra no post, o que não era necessário, mesmo estando configurado para aparecer.
    O que pode estar acontecendo?
    Caso queira, pode visitar o blog para ver [link suprimido]

    Responder

  36. Sou aposentado, 64 anos e futuco isso, mesmo sem experiencia no assunto. Uso este Modelo o Inc.. Imagens de modelo por Nikada. Tecnologia do Blogger.
    e não acho a linha com os comandos que você cita acima para inserir o script antes, como faço?.ajude-me…
    Um Abraço…Sidinei Corrêa

    Responder

  40. Marcos,

    Estou usando um dos novos templates que o próprio blogger disponibiliza, entretanto não consigo achar o código html que você disponibilizou aqui… Existe algum outro ao qual eu possa tentar, sabe dizer?

    Grata,

    Anna.

    Responder

Deixe um comentário

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