Botón “Compartir”

Con el botón “Compartir” las personas pueden añadir mensajes personalizados a los enlaces antes de compartirlos en su 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 utilizar 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 ningún 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 utilizar este plugin sin necesidad de implementar el inicio de sesión con Facebook ni de solicitar permisos adicionales al revisar la aplicación.

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

Paso a paso

1. Elige una URL o una página

Elige la URL del sitio web o la página de Facebook que deseas 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

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, ajusta la vista previa del enlace con las metaetiquetas og:***. Utiliza 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="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

Ajuste	Atributo HTML5	Descripción	Valor predeterminado
`href`	`data-href`	URL absoluta de la página que deseas compartir.	Las versiones XFBML y HTML5 ofrecen la URL actual de forma predeterminada.
`lazy`	`data-lazy`	`true` significa que se utilizará el mecanismo de carga diferida del navegador al establecer el atributo iframe en `loading="lazy"`. Como resultado, el navegador no mostrará el plugin si no está cerca del área de visualización y podría no verse nunca. Puede ser `true` o `false` (valor predeterminado).	`false`
`layout`	`data-layout`	Selecciona uno de los distintos diseños disponibles para el plugin. Puede ser `box_count`, `button_count` o `button`.	`icon_link`
~~`mobile_iframe`~~ Obsoleto	~~`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), en la parte superior 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` (grande) y `small` (pequeño).	`small`

Temas relacionados

Preguntas frecuentes sobre plugins sociales Cuadro de diálogo de contenido compartido Acción “Compartir” para administradores de web SDK de Facebook para JavaScript