Botón "Me gusta" para la web

Cuando una persona que visita tu página web hace clic en el botón "Me gusta", se activa un evento de la app para registrar el "Me gusta" en Facebook.

Personalizar el botón "Me gusta"

Usa el configurador del botón "Me gusta" para insertar el código de este botón en tu página web.

Establece la URL de la página web donde colocarás el botón "Me gusta"
Personaliza el botón "Me gusta"
Obtén una vista previa del botón
Haz clic en Obtener código y copia y pega dicho código en tu página web

Configurador del botón "Me gusta"

URL para indicar "Me gusta"

Width

Diseño

standard

Tipo de acción

Tamaño del botón

small

Incluir botón "Compartir"

Obtener código

Ten presente que, si ya registras eventos de la app, debes eliminar la instrucción autoLogAppEvents=1 del código del botón para evitar registros duplicados.

Usa metaetiquetas de Open Graph para editar la vista previa del enlace. Debes usar la misma URL para la etiqueta og:url y el atributo data-ref.

Ejemplo de código completo

El formato se modificó para facilitar la lectura.

<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={graph-api-version}
             &appId={your-facebook-app-id}
             &autoLogAppEvents=1" 
        nonce="FOKrbAYI">
  </script>

  <!-- Your like button code -->
  <div class="fb-like" 
       data-href="https://www.your-domain.com/your-page.html" 
       data-width=""
       data-layout="standard" 
       data-action="like" 
       data-size="small"  
       data-share="true">
  </div>

</body>
</html>

Atributos HTML5 del botón "Me gusta"

Atributo HTML5	Descripción
`data-action`	El verbo que se mostrará en el botón. Puede ser `like` (predeterminado) o `recommend`.
`data-colorscheme`	El esquema de colores que usará el plugin para el texto externo al propio botón. Puede ser `light` (predeterminado) o `dark`.
`data-href`	La URL de la página web que las personas indicarán que les gusta.
`data-kid-directed-site`	Si el sitio web, el servicio online o una parte de este están dirigidos a menores de 13 años, debes configurar el valor `true` para este elemento. El valor predeterminado es `false`.
`data-layout`	Selecciona uno de los diseños disponibles para el plugin. Puede ser `standard` (predeterminado), `button_count`, `button` o `box_count`. Para obtener más información, consulta las preguntas frecuentes.
`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).
`data-ref`	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.
`data-share`	Especifica si se debe incluir el botón "Compartir" junto al botón "Me gusta". Los valores son `true` o `false` (predeterminado). Solo funciona con la versión XFBML.
`data-size`	El botón está disponible en dos tamaños: `large` y `small` (predeterminado).
`data-width`	El ancho del plugin (solo con el diseño estándar), que depende de los valores de ancho mínimo y predeterminado. Consulta la tabla "Configuración del diseño" para obtener más detalles.

Configuración del diseño

Diseño	Tamaños predeterminados
`standard`	Ancho mínimo: 225 píxeles. Ancho predeterminado: 450 píxeles. Altura: 35 píxeles (sin fotos) u 80 píxeles (con fotos),
`box_count`	Ancho mínimo: 55 píxeles. Ancho predeterminado: 55 píxeles. Altura: 65 píxeles.
`button_count`	Ancho mínimo: 90 píxeles. Ancho predeterminado: 90 píxeles. Altura: 20 píxeles.
`button`	Ancho mínimo: 47 píxeles. Ancho predeterminado: 47 píxeles. Altura: 20 píxeles.

Cambiar el idioma

Para cambiar el idioma del botón "Me gusta", carga una versión localizada del SDK de Facebook para JavaScript. 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={graph-api-version} />";

Quizá debas ajustar el ancho del plugin social para adaptarlo a los distintos idiomas.