Botón "Me gusta" para la web
Cambios en los plugins sociales en la región europea
Es posible que veas cambios en los plugins sociales debido a la actualización de la solicitud de consentimiento para cookies, que se mostrará a las personas que usen productos de Facebook en la región europea. Dejaremos de ofrecer compatibilidad con los plugins sociales “Me gusta” y “Comentar” para usuarios de la región europea, a menos que 1) las sesiones de sus cuentas de Facebook se hayan iniciado y 2) hayan aceptado el control de las “cookies de apps y sitios web”. Si se cumplen estos requisitos, el usuario podrá ver plugins como los botones “Me gusta” o “Comentar” e interactuar con ellos. Si alguno de los requisitos anteriores no se cumple, el usuario no podrá ver los plugins.
La región europea está compuesta por una lista específica de países, entre los que se incluyen los siguientes:
La 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 Checa, República de Chipre, Rumania y Suecia.
Países que no son miembros de la UE, pero pertenecen al Espacio Económico Europeo (EEE) exclusivamente, la Asociación Europea de Libre Comercio (AELC) u otra unión aduanera: [EEE exclusivamente/AELC] Islandia, Liechtenstein y Noruega; Suiza; [Unión aduanera de la UE] todas las islas del Canal, isla de Man, Mónaco; Bases Soberanas Británicas en Chipre; [Unión aduanera de la UE] Andorra, San Marino, Ciudad del Vaticano.
- Países que no son miembros de la UE, pero son parte de las regiones ultraperiféricas de la UE (RUP):Martinica, Mayotte, Guadalupe, Guayana Francesa, Reunión, San Martín, Madeira, Las Azores, Islas Canarias.
- Reino Unido (todas las islas británicas)
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 dispondrá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"
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 |
|---|---|
| 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 de la página web que las personas indicarán que les gusta. |
| 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 |
| 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 algunos signos de puntuación (actualmente, +, /, =, -, ., : y _). Para obtener más información, consulta las preguntas frecuentes. |
| Especifica si se debe incluir el botón “Compartir” junto al botón “Me gusta”. Los valores son |
| 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. 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 |
|---|---|
| Ancho mínimo: 225 píxeles. |
| Ancho mínimo: 55 píxeles. |
| Ancho mínimo: 90 píxeles. |
| Ancho mínimo: 47 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 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} />"; Quizá debas ajustar el ancho del plugin social para adaptarlo a distintos idiomas.