Botón "Me gusta" para la web

Cuando una persona que visite tu página web haga clic en el botón "Me gusta", se activará un evento de la aplicación para registrarlo en Facebook.

Personalizar un botón "Me gusta"

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

  1. Define la URL de la página web en la que colocas el botón "Me gusta".
  2. Personaliza el botón "Me gusta".
  3. Obtén una vista previa del botón.
  4. Haz clic en Obtener código y, a continuación, cópialo y pégalo en la página web.

Configurador del botón "Me gusta"

URL que las personas deben indicar que les gusta
Width
Diseño
Tipo de acción
Tamaño del botón

Ten en cuenta que, si ya registras eventos de la aplicación, debes eliminar la instrucción autoLogAppEvents=1 del código del botón para evitar la duplicación de registros.

Utiliza metaetiquetas de Open Graph para editar la vista previa del enlace. La etiqueta og:url y el atributo data-ref deben tener la misma URL.

Ejemplo de código completo

Se ha aplicado formato para mejorar la legibilidad.

<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 utilizará 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 recibirá “me gusta”.

data-kid-directed-site

Si el sitio web o el servicio en internet, o una parte de este, se dirigen a menores de 13 años, debes establecerlo en true. El valor predeterminado es false.

data-layout

Selecciona uno de los distintos 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 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).

data-ref

Una etiqueta para realizar un 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" (true o false [predeterminado]). Solo funciona con la versión XFBML.

data-size

El botón está disponible en dos tamaños: large (grande) y small (pequeño; opción predeterminada).

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 de configuración del diseño para obtener más detalles.

Configuración del diseño

La configuración del diseño es opcional.

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 de Facebook SDK for JavaScript. Reemplaza en_US por tu 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} />"; 

Es posible que debas ajustar el ancho del plugin social para adaptarlo a los distintos idiomas.