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

URL para curtir

Width

Layout

standard

Tipo de ação

Tamanho do botão

small

Incluir botão Compartilhar

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.