Plugin para citações

O plugin para citações permite que as pessoas selecionem textos na sua página e os anexem a seus compartilhamentos, para contar uma história mais interessante. 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.

Compartilhamento de citações para Web móvel

Se você estiver criando um site para Web móvel ou se o botão fornecido não se adequar ao design do seu site, o recurso diálogo de compartilhamento da Web também permite adicionar uma citação em um compartilhamento de link.

Compartilhamento de citações para iOS e Android

Caso o seu aplicativo seja nativo do iOS ou do Android, use os recursos nativos diálogo de compartilhamento do iOS e diálogo de compartilhamento do Android.

Experimente o pluginExemplo de códigoConfigurações

Experimente o plugin

Selecione uma parte desta frase para ver o plugin em ação.

Exemplo de código

Mude o valor de data-href para a URL do seu site. Verifique se as metatags do Open Graph estão atualizadas e se a data-href do plugin corresponde à propriedade og:url.

<html>
<head>
  <title>Your Website Title</title>
  <!-- Comment #1: OG Tags -->
  <meta property="og:url"           content="http://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="http://www.your-domain.com/path/image.jpg" />
</head>
<body>

  <!-- Comment #2: SDK -->
  <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&version=v2.6";
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));</script>

  <!-- Comment #3: Content -->
  <h1>Your Headline</h1>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eget tristique nibh, 
    vel consequat purus. Praesent molestie, turpis ut ultrices commodo, felis arcu cursus enim, 
    vel porttitor ante quam vel lacus. Quisque at laoreet sapien. Proin nec purus dolor. Integer 
    pharetra nec ligula a condimentum. Fusce sem orci, porta ut felis id, commodo imperdiet risus. 
  </p>

  <!-- Comment #4: Plugin Code -->
  <div class="fb-quote"></div>

</body>
</html>
Experimente!

Comentários em código

  1. OG Tags: Você pode usar as marcações do Open Graph para personalizar prévias de link.
  2. SDK: Carregue o SDK do Facebook para JavaScript.
  3. Content: O conteúdo da sua Página.
  4. Plugin Code: O código do plugin para citações encontrado no configurador. Você pode colocá-lo em qualquer lugar no documento. Ele será exibido somente quando você realçar um texto dentro desse contêiner. Neste exemplo, ele só é exibido ao realçar um texto dentro do corpo.

Configurações

Você pode alterar as seguintes configurações:

Configuração Atributo HTML5 Descrição Padrão

href

data-href

A URL absoluta da página que será citada.

URL atual

layout

data-layout

  • quote: Ao selecionar um texto, um botão com um ícone azul do Facebook e o texto "Compartilhar citação" aparecem sobrepostos. Ao clicar nele surgirá um diálogo de compartilhamento com o texto realçado como uma citação.
  • button: Funciona da mesma maneira que a opção "citação", mas tem apenas o ícone azul do Facebook no botão.

quote

Áreas citáveis

Talvez seja melhor que algumas áreas da sua página não sejam citáveis, como menus, barras laterais e rodapés. Você pode definir as áreas citáveis da sua página com:

  • Elementos <article> HTML ou
  • qualquer elemento com nome de classe fb-quotable

Você pode combinar os dois como quiser para definir as áreas citáveis.

Se sua página não contém nem <article> nem class="fb-quotable", então a página inteira se torna citável.

Como mudar o idioma

É possível alterar o idioma do plugin de citações ao carregar uma versão localizada do SDK do Facebook para JavaScript. Quando você carregar o SDK, altere o valor de js.src para usar sua localidade. 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&amp;version=v2.6";

As localidades compatíveis estão listadas no arquivo XML de localidades do Facebook. Talvez você tenha que ajustar a largura do Plugin Social para acomodar idiomas diferentes. Para saber mais, consulte nossa página Localização e tradução.