Botão Compartilhar

O botão Compartilhar permite que a pessoa acrescente uma mensagem personalizada ao link antes de compartilhá-lo na própria Linha do Tempo, em grupos ou com amigos, por mensagem do Facebook.

Caso seu aplicativo seja nativo do iOS ou Android, recomendamos usar o diálogo de compartilhamento do iOS e o diálogo de compartilhamento do Android nativos.

Se o seu site não tiver um botão para abrir o diálogo de compartilhamento ou se o botão oferecido pelo Facebook não couber no design do seu site, a opção diálogo de compartilhamento na Web também será oferecida para compartilhar links. Para usar esse plugin não é necessário implementar o login do Facebook ou solicitar outras permissões através da revisão do aplicativo.

Passo a passo

1. Escolha o URL ou a Página

Use o URL do site ou da Página do Facebook que pretende compartilhar.

2. Configurador de código

Cole o URL no Configurador de código e ajuste o layout do botão Compartilhar. Clique no botão Get Code para gerar o código do seu botão Compartilhar.

3. Copie e cole o trecho de código no HTML

Copie e cole o trecho de código no HTML do site de destino.

Configurador do botão Compartilhar

URL para compartilhar
Tamanho do botão

Exemplo de código completo

Copie e cole o exemplo de código no seu site. Mude o valor de data-href para a URL do seu site. Depois, use as metatags og:*** para alterar a prévia do link. og:url e data-href devem usar a mesma URL.

<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>(function(d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s); js.id = id;
    js.src = "https://connect.facebook.net/en_US/sdk.js#xfbml=1";
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));</script>

  <!-- Your share button code -->
  <div class="fb-share-button" 
    data-href="https://www.your-domain.com/your-page.html" 
    data-layout="button_count">
  </div>

</body>
</html>

Configurações

ConfiguraçãoAtributo HTML5DescriçãoPadrão

href

data-href

O URL absoluto da Página que será compartilhada.

As versões XFBML e HTML5 usam o URL atual por padrão.

layout

data-layout

Seleciona um dos diversos layouts disponíveis para o plugin. Pode ser box_count, button_count ou button.

icon_link

mobile_iframe

data-mobile_iframe

Se definido como true, o botão Compartilhar abrirá o diálogo de compartilhamento em um iframe (em vez de em um pop-up) na parte superior do seu site no dispositivo móvel. Essa opção só está disponível para dispositivos móveis, não para desktops. Para saber mais, consulte Diálogo de compartilhamento da Web móvel.

false

size

data-size

Disponibilizamos o botão em dois tamanhos: large e small.

small