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&locale=pt_BR" 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:
Botão Recomendar
Em algumas páginas, ao invés do botão “Curtir” encontramos o botão “Recomendar”. Na verdade é exatamente o mesmo botão, com as mesmas funcionalidades, configurações e comportamento. A única diferença é o verbo: recomendar. Então você pode usar o mesmo código do botão curtir trocando apenas um parâmetro: action=recommend:
<iframe src="http://www.facebook.com/plugins/like.php?href=suaurl&layout=standard& show_faces=false&width=380&action=recommend&colorscheme=light&height=25&locale=pt_BR" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:250px; height:25px;" allowTransparency="true"></iframe>
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 php the_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 == "item"'> <iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&layout=button_count&show_faces=false&width=100& action=like&font=arial&locale=pt_BR&colorscheme=light"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:40px;'/> </b:if>
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.
