Botão Curtir para a web

Quando uma pessoa visitando sua página da Web clica no botão Curtir, um Evento do aplicativo é acionado para registrar essa curtida no Facebook.

Obter um botão Curtir personalizado

Use o Configurador de botão Curtir para obter o código do botão Curtir e inseri-lo em sua página da Web.

  1. Defina a URL da sua página da Web onde você está colocando o botão Curtir
  2. Botão Curtir personalizado
  3. Veja uma prévia do botão
  4. Clique em Obter código e copie e cole o código em sua página da Web

Configurador do botão Curtir

URL para curtir
Width
Layout
Tipo de ação
Tamanho do botão

Se você já tiver o registro de eventos do aplicativo ativado, remova a instrução autoLogAppEvents=1 do código do botão para evitar a duplicação do registro.

Use as meta tags do Open Graph para editar prévias de link. A tag og:url e o atributo data-ref devem ter a mesma URL.

Exemplo de código completo

Formatado para leitura.

<html>
<head>
  <title>Your Website Title</title>
    <!-- You can use open graph tags to customize link previews.
    Learn more: https://developers.facebook.com/docs/sharing/webmasters -->
  <meta property="og:url"           content="https://www.your-domain.com/your-page.html" />
  <meta property="og:type"          content="website" />
  <meta property="og:title"         content="Your Website Title" />
  <meta property="og:description"   content="Your description" />
  <meta property="og:image"         content="https://www.your-domain.com/path/image.jpg" />
</head>
<body>

  <!-- Load Facebook SDK for JavaScript -->
  <div id="fb-root"></div>
  <script async defer crossorigin="anonymous" 
        src="https://connect.facebook.net/en_US/sdk.js#xfbml=1
             &version={graph-api-version}
             &appId={your-facebook-app-id}
             &autoLogAppEvents=1" 
        nonce="FOKrbAYI">
  </script>

  <!-- Your like button code -->
  <div class="fb-like" 
       data-href="https://www.your-domain.com/your-page.html" 
       data-width=""
       data-layout="standard" 
       data-action="like" 
       data-size="small"  
       data-share="true">
  </div>

</body>
</html>

Atributos HTML5 do botão Curtir

Atributo HTML5 Descrição

data-action

O verbo que será mostrado no botão. Pode ser like (padrão) ou recommend.

data-colorscheme

O esquema de cores usado pelo plugin para qualquer texto fora do botão. Pode ser light (padrão) ou dark.

data-href

A URL da página da Web que será curtida.

data-kid-directed-site

Caso o seu site ou serviço online seja total ou parcialmente voltado a menores de 13 anos, você deve definir essa opção como true. O padrão é false.

data-layout

Seleciona um dos diversos layouts disponíveis para o plugin. Pode ser standard (padrão), button_count, button ou box_count. Consulte as Perguntas frequentes para saber mais.

data-ref

Identificador para rastrear referências. Deve ter menos de 50 caracteres; pode conter caracteres alfanuméricos e alguns sinais de pontuação (no momento, +/=-.:_). Consulte as Perguntas frequentes para saber mais.

data-share

Especifica se será incluído um botão Compartilhar além do botão Curtir, true ou false (padrão). Funciona apenas na versão XFBML.

data-size

O botão é disponibilizado em dois tamanhos: large e small (padrão).

data-width

A largura do plugin (somente no layout padrão), sujeita à largura mínima e à padrão. Veja a tabela de configurações de layout para mais detalhes.

Configurações de layout

As configurações de layout são opcionais.

Layout Dimensões padrão

standard

Largura mínima: 225 pixels.
Largura padrão: 450 pixels.
Altura: 35 pixels (sem fotos) ou 80 pixels (com fotos).

box_count

Largura mínima: 55 pixels.
Largura padrão: 55 pixels.
Altura: 65 pixels.

button_count

Largura mínima: 90 pixels.
Largura padrão: 90 pixels.
Altura: 20 pixels.

button

Largura mínima: 47 pixels.
Largura padrão: 47 pixels.
Altura: 20 pixels.

Alterar o idioma

É possível alterar o idioma do botão Curtir carregando uma versão localizada do SDK do Facebook para JavaScript. Substitua en_US pela sua localidade, por exemplo, fr_FR para usar francês (França).

js.src = "https://connect.facebook.net/fr_FR/sdk.js#xfbml=1&version={graph-api-version} />"; 

Talvez a largura do Plugin Social tenha que ser ajustada para acomodar idiomas diferentes.