Botón "Compartir"

El botón "Compartir" permite añadir mensajes personalizados a los enlaces antes de compartirlos en la biografía, en grupos o con amigos a través de mensajes de Facebook.

Si la aplicación es nativa de iOS o Android, te recomendamos usar el cuadro de diálogo de contenido compartido en iOS y el cuadro de diálogo de contenido compartido en Android.

Si el sitio web no precisa un botón para abrir el cuadro de diálogo de contenido compartido o si el botón que proporciona Facebook no se adapta bien al diseño del sitio web, también puedes compartir enlaces con el cuadro de diálogo de contenido compartido para web. Ten en cuenta que puedes usar este plugin sin necesidad de implementar el inicio de sesión con Facebook ni de solicitar permisos adicionales al revisar la aplicación.

Instrucciones paso a paso

1. Elige una URL o una página

Elige la URL del sitio web o la página de Facebook que quieres compartir.

2. Configurador de código

Pega la URL en el configurador de código y ajusta el valor layout del botón "Compartir". Haz clic en el botón Get Code para generar el código del botón "Compartir".

3. Copia y pega el fragmento de código HTML

Copia y pega el fragmento en el código HTML del sitio web de destino.

Configurador del botón "Compartir"

URL que compartir
Tamaño del botón

Ejemplo de código completo

Copia y pega el ejemplo de código en el sitio web. Ajusta el valor data-href para la URL del sitio web. A continuación, ajusta la vista previa del enlace con las metaetiquetas og:***. Usa la misma URL para og:url y data-href.

<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="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>

  <!-- 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 = "//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="http://www.your-domain.com/your-page.html" 
    data-layout="button_count">
  </div>

</body>
</html>

Configuración

Opción Atributo HTML5 Descripción Valor predeterminado

href.

data-href.

La URL absoluta de la página que quieres compartir.

Las versiones XFBML y HTML5 ofrecen la URL actual de forma predeterminada.

layout.

data-layout.

Selecciona uno de los diseños disponibles para el plugin. Puede ser box_count, button_count o button.

icon_link.

mobile_iframe.

data-mobile_iframe.

Si se establece en true, el botón "Compartir" abrirá el cuadro de diálogo de contenido compartido en un iframe (en lugar de un elemento emergente), encima de tu sitio web en dispositivos móviles. Esta opción solo está disponible para dispositivos móviles (no para ordenadores). Para obtener más información, consulta Cuadro de diálogo de contenido compartido para web móvil.

false.

size.

data-size.

El botón está disponible en dos tamaños: large y small.

small.