Como adicionar o botão ‘Curtir’ do Facebook ao seu site

Hoje em dia a integração com redes sociais é importante para qualquer site, não apenas por ser uma boa fonte de tráfego mas também por criar uma forma de interatividade com os leitores. E uma maneira interessante de fazer isso é através do botão“Curtir” do Facebook. Com configuração simples e rápida, o botão possibilita que qualquer usuário que tenha uma conta no Facebook recomende sua página para outras pessoas.

O que é o botão “Curtir”?

O botão “Curtir” (“Like” na versão em inglês) é esse com o sinal de positivo, que substituiu o antigo botão “Tornar-se fã” (“Become a fan”), muito usado dentro do Facebook e que há algum tempo pode também ser usado dentro de outros sites e páginas.
Sites reconhecidos como modelos de boa utilização de Social Media como ferramenta de relacionamento com seus leitores fazem uso dessa ferramenta. Um bom exemplo é o Mashable.

Qual a vantagem em usá-lo?

Quando o usuário “curte” a sua página clicando sobre o botão é como se ele “dissesse” que acha aquele conteúdo interessante o bastante para indicá-lo à outras pessoas. Assim, sua página pode aparecer como sugestão para os amigos desse usuário, dentro do Facebook.
Além da questão prática, de trazer novos visitantes, adicionar possibilidades de interação estimula o relacionamento dos usuários com o seu site.

Como usar

Existem várias formas de inserir o botão na sua página. A mais simples delas, que tem o menor potencial de causar lentidão no carregamento da página ou conflito com outros scripts, é através de um pequeno iframe. Basta incluir o seguinte código no seu html:

<iframe src="http://www.facebook.com/plugins/like.php?href=suaurl&
layout=standard&show_faces=false&width=380&action=like&colorscheme=light&height=25" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:250px; height:25px;" allowtransparency="true"></iframe>

As duas principais alterações que você precisa fazer são: colocar a URL da sua página logo após a variável “href” (substituindo o “sua url”) e ajustar a largura do iframe para que ele se encaixe no seu layout, alterando a propriedade “width”. Pronto, basta incluir este trecho de código à sua página e você terá um resultado semelhante ao que aparece abaixo:

Adicionando a um blog WordPress

Para aqueles que utilizam WordPress como ferramenta de publicação e gostariam de adicionar o botão Curtir ao seus posts a mecânica é praticamente a mesma. A única diferença é que você precisará editar o arquivo “single.php” do seu tema para incluir o código do iframe.

Como fazer isso:
1 - Acesse o painel de controle do seu blog WordPress;
2 – No menu vertical esquerdo, clique no link do Editor dentro do box Aparência (Appearance);
3 – Na tela do editor, procure pelo arquivo single.php (Post único) na lista de arquivos que fica à direita da tela. Clique para editá-lo.
4 – Um bom local para colocar o botão é logo abaixo do título do post. Então procure pelo trecho de código phpthe_title(); e insira o código do botão logo após a sua tag.
5 – No lugar da URL (suaurl) use o código <?php the_permalink() ?> que o WordPress substituíra pelo link de cada post.
6 – Salve o arquivo e teste um dos seus posts.

Pronto, agora é uma questão de acertar o posicionamento do botão usando CSS até ficar como você deseja.

Adicionando a um blog do Blogger

Para quem usa o Blogger para hospedar e publicar seu blog o código é um pouco diferente. Para adicionar o botão ao seus posts siga os seguintes passos:
1 - Acesse o painel de controle do seu blog no Blogger;
2 – No menu superior clique na aba Design
3 – Depois clique no link Editar HTML (Edit HTML) no sub menu;
4 – Nesta página, logo acima da caixa de texto, marque a opção Expandir modelos de widgets (Expand Widget Templates);
5 – Procure pelo seguinte trecho de código <data:post.body/>;
6 – Imediatamente depois, inclua este código:

<b:if cond='data:blog.pageType == &quot;item&quot;'>  <iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=button_count&amp;show_faces=false&amp;width=100&amp;
action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:40px;'/>  </b:if>
<p>

7 – Salve o modelo e você deverá ver o botão abaixo do texto de cada um dos posts (na página do post);

Assim como no caso do WordPress, talvez seja necessário fazer algumas alterações no CSS ou HTML apenas para acertar a sua exibição de acordo com o seu layout.

Fonte: Top rated

Related Posts with Thumbnails

12 Respostas para “Como adicionar o botão ‘Curtir’ do Facebook ao seu site”

  1. Vinícius Fonseca da Costa 24 de abril de 2011 at 20:40 #

    Vlw pela dica,isso me serviu muito bem e parabéns pelo site!!!

  2. Victor 11 de setembro de 2011 at 12:12 #

    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

  3. Apulko 19 de dezembro de 2011 at 15:41 #

    Olá!

    Deu certo, era exatamente o que eu queria.

    Porém quando vai no facebook e ver que curtiu, ele pega uma imagem qualquer do site.

    Tem como selecionar qual imagem ele deve puxar quando curtido pra aparecer a logo da empresa (por ex.) no facebook?

  4. Webtopia 10 de janeiro de 2012 at 12:54 #

    Sobre a personalização do botão acessem o artigo http://webtopia.com.br/blog/adicionar-botao-de-recomendar-do-facebook/. Se mesmo assim, tiverem dúvida, entre em contato.

  5. Math 12 de maio de 2012 at 16:40 #

    E para simplificar, não dá pra por um código em um Gadget?
    Gostaria de uma opção simples, na vertical. Não obtive sucesso ainda

  6. Webtopia 14 de maio de 2012 at 10:49 #

    Pode utilizar a área para desenvolvedores: http://developers.facebook.com/docs/reference/plugins/like/

  7. thiago 4 de junho de 2012 at 13:08 #

    Fui fazer o Adicionando a um blog do Blogger, mas sempre dá erro, o que eu tenho que mudar no código?
    obrigado

  8. Webtopia 4 de junho de 2012 at 13:36 #

    Vai no site (http://developers.facebook.com/docs/reference/plugins/like/) para gerar o código. Selecione o código com iframe.

    No painel do blogger vai em: “Layout->Edit HTML” . Marque “Expand widget templates“.

    Procure a linha < div class= ' post-header-line-1 ' > no seu tema.

    Cole o código copiado dentro de < div class= ' post-header-line-1 ' > e < / div>.

  9. sara de almeida 16 de julho de 2012 at 0:33 #

    siga sempre sorrindo. tu tristeza terminara.

  10. Monique Dias 22 de março de 2013 at 8:35 #

    Bom dia!

    Sempre que tento colocar este codigo conforme instrução da o seguinte erro:
    Erro de análise : erro de sintaxe, ‘<' inesperado / home/storage/e/e5/85/hollywu/public_html/jumpup/wp-content/themes/corona/single.php na linha 29
    não consigo encontrar o coigo the_title() o que devo fazer?

  11. Danilo Soares 8 de junho de 2013 at 16:11 #

    Ha muito tempo estava procurando essa forma de colocar o botao do facebook, obrigado !

  12. Aline 8 de setembro de 2013 at 1:36 #

    Finalmente achei um artigo que explica literalmente ONDE inserir o código no WordPress de verdade! Estou há horas procurando e só achava gente falando de plugins, e eu queria inserir manualmente!
    Muito obrigada! Finalmente!
    P.S.: Não achei o “php thetitle()” no single.php, mas sim no loop-single.php. Não sei se tem diferença, mas foi assim que deu! :) Valeu o/

Deixe uma resposta