Adicionando um botão no seu site de curtir (Like) no Facebook

Explicarei neste post como adicionar um botão no seu site de curtir no Facebook (Like button) que permitirá aos seus visitantes recomendarem seu conteúdo no Facebook.

1. Vamos configurar a forma como os dados do curtir apareceram no Facebook.

Insira o seguinte código entre o HEAD da sua página:

1
2
3
<meta property="og:site_name" content="Nome do seu site" />
<meta property="og:title" content="Titulo da página" />
<meta property="og:image" content="http://www.seusite.com.br/imagem.jpg" />

Na primeira meta tag você deve indicar o nome do seu site.

Já na segunda meta tag você deve indicar o título da página.

E na terceira meta tag você deve indicar uma imagem ilustrativa do seu site. Se for usar o botão em várias páginas diferentes do seu site você pode preferir usar algo mais prático, por exemplo, o logo do seu site.

2. Insira no local aonde deverá ser exibido o botão de curtir do Facebook:

1
<iframe src="http://www.facebook.com/plugins/like.php?href=http://www.seusite.com.br&layout=button_count&show_faces=false&width=80&action=like&font=lucida+grande&colorscheme=light" allowtransparency="true" style="border: medium none; overflow: hidden; width: 80px; height: 21px;" frameborder="0" scrolling="no"></iframe>

Em “http://www.seusite.com.br” indique o endereço do seu site.

Você ainda pode mexer nas propriedades de tamanho do botão (altere o width e o height).

Configure um botão no seu site de curtir (Like) no Facebook online

Se preferir você pode gerar um botão de curtir (Like) no Facebook totalmente customizado online:

http://developers.facebook.com/docs/reference/plugins/like

Leia também:

Autor: Sandro J. S. Souza

3 comments

  1. Carlos Costa says:

    Meu, parabéns mesmo!!!!!

    Para mim, que estou procurando a um tempo e estou escrevendo por códigos mesmo,
    foi o ÚNICO que funcionou… sério, parabéns mesmo… muito bom!!!!!

    Quero um igual dos botões “+1″ (Google) e “Compartilhar”(Orkut).. usuasuahsuashaus

    • xkurts says:

      Carlos, dá uma conferida nos links ao final do post que ensina como colocar um esquema do tipo no seu site para compartilhar no Facebook e Twitter. Depois vejo de fazer um do Orkut também.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>