Para indicar que te gusta un contenido determinado de la web y compartirlo en Facebook, solo tienes que hacer clic una vez en el botón "Me gusta". Si lo deseas, también puedes incluir el botón "Compartir" junto al botón "Me gusta". De este modo, las personas podrán agregar un mensaje personal y elegir con quién desean compartir el contenido.
Configurador del botón "Me gusta"Ejemplo de códigoConfiguraciónAjustar idiomaPreguntas frecuentesElige la página de Facebook o la URL del sitio web en donde quieres usar el botón "Me gusta".
Pega la URL en el configurador de código y ajusta la configuración de opciones, por ejemplo, el valor width del botón "Me gusta". Haz clic en el botón Get Code para generar el código del botón "Me gusta".
Copia y pega el fragmento de código en el texto HTML del sitio web de destino.
Si ya tienes código para activar el registro de eventos de la app, elimina la instrucción autoLogAppEvents=1 del código pegado para evitar registros duplicados.
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 async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v3.0"></script>
<!-- Your like button code -->
<div class="fb-like"
data-href="https://www.your-domain.com/your-page.html"
data-layout="standard"
data-action="like">
</div>
</body>
</html>Personalizar vista previa del enlaceAdemás de la configuración mencionada anteriormente, puedes cambiar los elementos siguientes:
| Configuración | Atributo HTML5 | Descripción | Valor predeterminado |
|---|---|---|---|
|
| El verbo que se mostrará en el botón. Puede ser |
|
|
| El esquema de colores que usará el plugin para el texto externo al propio botón. Puede ser |
|
|
| La URL absoluta de la página que las personas indicarán que les gusta. | La URL actual |
|
| Si el sitio web, el servicio en internet o una parte de este se dirigen a menores de 13 años, debes activar este elemento. |
|
|
| Selecciona uno de los diseños disponibles para el plugin. Puede ser |
|
|
| Una etiqueta para realizar el seguimiento de las referencias que debe tener menos de 50 caracteres y puede contener caracteres alfanuméricos y ciertos signos de puntuación (actualmente, +, /, =, -, ., : y _). Para obtener más información, consulta las preguntas frecuentes. | Ninguno |
|
| Especifica si se debe incluir el botón "Compartir" junto al botón "Me gusta". Solo funciona con la versión XFBML. |
|
|
| El botón está disponible en dos tamaños: |
|
|
| El ancho del plugin (solo con el diseño estándar), que depende de los valores de ancho mínimo y predeterminado. Para obtener más información, consulta Configuración del diseño a continuación. | Consulta |
Encontrarás las siguientes opciones:
| Diseño | Tamaños predeterminados |
|---|---|
| Ancho mínimo: 225 píxeles. |
| Ancho mínimo: 55 píxeles. |
| Ancho mínimo: 90 píxeles. |
| Ancho mínimo: 47 píxeles. |
Para cambiar el idioma del botón "Me gusta", carga una versión localizada del SDK de Facebook para JavaScript. Cuando lo hagas, cambia el valor de js.src para usar la configuración regional. Reemplaza en_US con la configuración regional. Por ejemplo, fr_FR para francés (Francia):
js.src = "https://connect.facebook.net/fr_FR/sdk.js#xfbml=1&version=v7.0";
Posiblemente, deberás ajustar el ancho del plugin social para adaptarlo a las distintas configuraciones regionales. Para obtener más información, visita la página Localización y traducción.
