Botón "Me gusta" para la web

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 a "Me gusta". De este modo, las personas podrán añadir un mensaje personal y elegir con quién desean compartir el contenido.

Configurador del botón "Me gusta"Ejemplo de códigoAjustesAjustes de idiomaPreguntas frecuentes

Paso a paso

1. Elige una URL o una página

Elige la página de Facebook o la URL del sitio web con los que quieres usar el botón "Me gusta".

2. Configurador de código

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".

3. Copia y pega el fragmento de código HTML

Copia y pega el fragmento en el código HTML del sitio web de destino.

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

Ejemplo de código completo

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, ajusta la vista previa del enlace con las metaetiquetas og:***. Usa la misma URL para og:url y data-href.

<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>(function(d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s); js.id = id;
    js.src = "https://connect.facebook.net/en_US/sdk.js#xfbml=1";
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));</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" 
    data-show-faces="true">
  </div>

</body>
</html>
Personalizar vista previa del enlace

Ajustes

Además de los valores anteriores, también puedes cambiar los siguientes:

Ajuste Atributo HTML5 Descripción Valor predeterminado

action

data-action

El verbo que se mostrará en el botón. Puede ser like o recommend.

like

colorscheme

data-colorscheme

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

light

href

data-href

La URL absoluta de la página que te gusta.

La URL actual

kid_directed_site

data-kid-directed-site

Si el sitio web, el servicio en internet o una parte de este se dirigen a menores de 14 años, debes activar este elemento.

false

layout

data-layout

Selecciona uno de los diseños disponibles para el plugin. Puede ser standard, button_count, button o box_count. Para obtener más información, consulta las preguntas frecuentes.

standard

ref

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.

Ninguno

share

data-share

Especifica si se debe incluir el botón "Compartir" junto al botón "Me gusta". Solo funciona con la versión XFBML.

false

show_faces

data-show-faces

Especifica si deben mostrarse fotos del perfil debajo del botón (solo con el diseño estándar). No actives este elemento en sitios dirigidos a niños.

false

size

data-size

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

small

width

data-width

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 la configuración del diseño más adelante.

Consulta la opción standard en el apartado Configuración del diseño.

Configuración del diseño

Encontrarás las siguientes opciones:

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. Cuando lo hagas, ajusta el valor js.src para usar tu idioma: solo tienes que reemplazar en_US con tu código de idioma. Por ejemplo, fr_FR para francés (Francia):

js.src = "https://connect.facebook.net/fr_FR/sdk.js#xfbml=1&version=v2.11"; 

Posiblemente, deberás ajustar el ancho del plugin social para adaptarlo a los distintos idiomas. Para obtener más información, visita la página Localización y traducción.