Este documento foi atualizado.
A tradução para Português (Brasil) não foi concluída ainda.

Atualização em inglês: 5 de out de 2023

Botão Curtir para a web

Mudanças nos Plugins Sociais na região europeia

Você pode começar a perceber alguns impactos nos Plugins Sociais devido a um aviso de consentimento sobre cookies atualizados que será exibido para as pessoas que usarem os produtos do Facebook na região europeia. Não daremos mais suporte aos Plugins Sociais "Curtir" e "Comentar" para usuários da região europeia, a menos que eles 1) estejam conectados à conta do Facebook e 2) tenham dado o consentimento ao controle de “Cookies do site e do aplicativo”. Se esses dois requisitos forem atendidos, o usuário poderá ver e interagir com plugins, como os botões "Curtir" ou "Comentar". Se um dos requisitos acima não for atendido, o usuário não poderá ver os plugins.

A região europeia abrange uma lista específica de países, incluindo os seguintes:

União Europeia (UE): Áustria, Bélgica, Bulgária, Croácia, República do Chipre, República Tcheca, Dinamarca, Estônia, Finlândia, França, Alemanha, Grécia, Hungria, Irlanda, Itália, Letônia, Lituânia, Luxemburgo, Malta, Países Baixos, Polônia, Portugal, Romênia, Eslováquia, Eslovênia, Espanha e Suécia
Não membros da União Europeia, mas incluídos no Espaço Econômico Europeu/Associação Europeia de Comércio Livre ou na união aduaneira: [somente Espaço Econômico Europeu/Associação Europeia de Comércio Livre] Islândia, Liechtenstein, Noruega e Suíça; [União aduaneira da União Europeia] todas as Ilhas do Canal, Ilha de Man, Mônaco; e bases soberanas do Reino Unido em Chipre; [União Aduaneira Europeia] Andorra, San Marino e Cidade do Vaticano.
Não membros da União Europeia, mas parte das Regiões Ultraperiféricas da União Europeia: Martinica, Maiote, Guadalupe, Guiana Francesa, Reunião, São Martinho, Madeira, Açores e Ilhas Canárias.
Reino Unido (todas as ilhas britânicas)

Obter um botão Curtir personalizado

Use o configurador para obter o código do botão Curtir e inseri-lo na sua página da web.

Defina a URL da página da web onde você está inserindo o botão Curtir.
Personalize o botão Curtir.
Veja uma prévia do botão.
Clique em Obter código. Depois, copie o código e cole na página da web.

Configurador do botão Curtir

href

Width

layout

standard

action

size

small

Receber código

Use as metatags 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}" 
        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 o texto, e não para o próprio 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 seu site ou serviço online seja total ou parcialmente voltado a menores de 13 anos, defina 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-lazy`	`true` significa que o navegador usará o mecanismo de carregamento lento ao definir o atributo `loading="lazy"` do iframe. O efeito é que o navegador não renderizará o plugin se ele não estiver próximo à área visível da página e não puder ser visto. Pode ser `true` ou `false` (padrão).
`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 saber mais.

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 um idioma diferente.