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 app 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 apps.

Configurador del botón "Compartir"
Ejemplo de código
Configuración
Preguntas frecuentes

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

Diseño

button_count

Tamaño del botón

small

Obtener código

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 deben 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&version=v3.0";
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ó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.
`lazy`	`data-lazy`	`true` significa que uses el mecanismo de carga diferida del navegador mediante la configuración del atributo del iframe `loading="lazy"`. Como consecuencia, el navegador no muestra el plugin si no está cerca del área de visualización, por lo que quizás nunca se vea. Puede ser `true` o `false` (predeterminado).	`false`
`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`~~ Obsoleto	~~`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`

Temas relacionados

Preguntas frecuentes sobre plugins sociales Cuadro de diálogo de contenido compartido Función de compartir para webmasters SDK de Facebook para JavaScript