Botón "Compartir"

El botón "Compartir" permite agregar 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 para 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 web de contenido compartido. Ten en cuenta que puedes usar este plugin sin necesidad de implementar el inicio de sesión con Facebook ni de solicitar permisos adicionales a través de la revisión de aplicaciones.

Paso a paso

1. Elegir 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. Copiar y pegar el fragmento de código HTML

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

Configurador del botón "Compartir"

URL para 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, usa las metaetiquetas og:*** para modificar la vista previa del enlace. og:url y data-href deberán usar la misma 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>

Configuración

ConfiguraciónAtributo HTML5DescripciónValor 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 configura en true, el botón "Compartir" abrirá el cuadro de diálogo de contenido compartido en un iframe (en lugar de una ventana emergente), sobre tu sitio web en dispositivos móviles. Esta opción solo está disponible para dispositivos móviles (no para computadoras). 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