Plugins sociales

Botón “Me gusta” para la web

Cambios en los plugins sociales en la región europea

Es posible que observes algún efecto en los plugins sociales debido a un mensaje de consentimiento de cookies actualizado que se mostrará a las personas que utilizan productos de Facebook en la región europea. Ya no admitiremos los plugins sociales “Me gusta” y “Comentar” para los usuarios de la región europea, salvo que hayan 1) iniciado sesión en su cuenta de Facebook y 2) hayan proporcionado su consentimiento para el control de “cookies de aplicaciones y sitios web”. Si se cumplen ambos requisitos, el usuario podrá ver los plugins, como el botón “Me gusta” o “Comentar”, e interactuar con ellos. Si no se cumple alguno de los requisitos anteriores, el usuario no podrá ver los plugins.

La región europea está formada por una lista específica de países, entre los que se incluyen los siguientes:

  • Unión Europea (UE): Alemania, Austria, Bélgica, Bulgaria, Croacia, Dinamarca, Eslovaquia, Eslovenia, España, Estonia, Finlandia, Francia, Grecia, Hungría, Irlanda, Italia, Letonia, Lituania, Luxemburgo, Malta, Países Bajos, Polonia, Portugal, República de Chipre, República Checa, Rumanía y Suecia.

  • Países no miembros de la UE, pero del EEE, la AELC o la Unión Aduanera: [EEE/AELC] Islandia, Liechtenstein y Noruega; Suiza: [Unión Aduanera de la UE] todas las islas del Canal, Isla de Man, Mónaco; bases soberanas del Reino Unido en Chipre; [Unión Aduanera Europea] Andorra, Ciudad del Vaticano y San Marino.

  • Países que no son miembros de la UE, pero que forman parte de las Regiones Ultraperiféricas Europeas: Azores, Canarias, Guadalupe, Guayana Francesa, Madeira, Martinica, Mayotte, Reunión y San Martín.
  • Reino Unido (todas las islas británicas).

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, copia y pega el código en tu 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
Obtener código

Utiliza metaetiquetas de Open Graph para editar la vista previa del enlace. La etiqueta og:url y el atributo data-ref deben ser 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}" 
        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 (valor predeterminado) o recommend.

data-colorscheme

El esquema de colores que usará el plugin para el texto externo al propio botón. Puede ser light (valor predeterminado) o dark.

data-href

La URL de la página web que recibirá “me gusta”.

data-kid-directed-site

Si el sitio web, 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 uno de los valores 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 va a incluir un botón “Compartir” junto al botón “Me gusta”, true o false (valor predeterminado). Solo funciona con la versión XFBML.

data-size

El botón se ofrece en dos tamaños: large y small (valor 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 información.

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.
Alto: 35 píxeles (sin fotos) u 80 píxeles (con fotos).

box_count

Ancho mínimo: 55 píxeles.
Ancho predeterminado: 55 píxeles.
Alto: 65 píxeles.

button_count

Ancho mínimo: 90 píxeles.
Ancho predeterminado: 90 píxeles.
Alto: 20 píxeles.

button

Ancho mínimo: 47 píxeles.
Ancho predeterminado: 47 píxeles.
Alto: 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. Solo tienes que reemplazar 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.

Más información