Botón “Guardar”

Este botón permite a las personas guardar artículos o servicios en una lista privada de Facebook, compartirlos con amigos y recibir notificaciones relevantes. Por ejemplo, una persona puede guardar un artículo de ropa, un viaje o un enlace a algún servicio que le interese y volver a la lista para consumirlo en otro momento, o recibir una notificación cuando esté de oferta.

Configurador del botón “Guardar”Ejemplo de códigoAjustes

Paso a paso

1. Elige un enlace al sitio web

Elige el enlace del sitio web con el que quieres usar el botón “Guardar”.

2. Configurador de código

Pega el enlace en el configurador de código y haz clic en el botón Obtener código para generar el código del botón “Guardar”.

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 “Guardar”

Enlace de un sitio web o producto para guardar
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-uri para el enlace del sitio web. A continuación, usa la etiqueta <title> para ajustar el título “guardado”.

<html>
<head>
  <title>Your Website Title</title> 
</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&version=v2.6";
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));</script>

  <!-- Your save button code -->
  <div class="fb-save" 
    data-uri="http://www.your-domain.com/your-page.html">
  </div>

</body>
</html>
Probarlo

Ajustes

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

Ajuste Atributo HTML5 Descripción Valor predeterminado

uri

data-uri

Enlace absoluto de la página que deseas guardar.

Dirección/enlace actual

Botón “Guardar” para productos

También puedes usar el botón “Guardar” para productos:

1. Configura el catálogo de productos

Para usar el botón “Guardar” con los productos, primero necesitas configurar un catálogo.

Un catálogo de productos, a veces denominado lista de productos, es precisamente la lista de productos que te gustaría anunciar en Facebook. Cada producto de la lista tiene atributos específicos que se pueden usar para generar un anuncio: identificador del producto, nombre, descripción, URL de la página de destino, URL de la imagen y disponibilidad, entre otros.

Cómo crear un catálogo de productosAnuncios de productos dinámicos de Facebook

2. Identificador de la API de Facebook

Ve a la pestaña "Configuración" del panel de aplicaciones, añade la plataforma "Sitio web" e introduce el dominio del sitio web.

3. Carga el SDK para JavaScript

Carga el SDK para JavaScript mediante el identificador de la aplicación, como se indica en el siguiente ejemplo. Reemplaza {your-app-id} por el identificador de la aplicación.

<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&version=v2.6&appId={your-app-id}";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

4. Obtén el URI del producto

A través de Business Manager

Necesitas dos datos para usar el botón “Guardar” con los productos, el identificador del catálogo de productos y el identificador del artículo de la lista de productos:

  1. Inicia sesión en tu negocio en Business Manager.
  2. Ve a “Configuración del negocio” > “Catálogo de productos”.
  3. Haz clic en el catálogo de productos que quieras usar para el plugin.
  4. Bajo el título, donde aparece el nombre del catálogo de productos, verás su identificador; anótalo. En nuestro ejemplo es el 768856339915012.
  5. El otro dato necesario es el identificador del artículo que hayas subido a tu lista de productos. Para ver ejemplos de tu lista de productos, haz clic en el identificador del catálogo de productos.
  6. Pasa a la página siguiente y haz clic en "Listas de productos", en la parte superior.
  7. Haz clic en la lista que contenga los artículos que quieras usar.
  8. En la página siguiente verás una muestra de artículos de tu lista de productos. Para que el plugin pueda identificar el producto, necesitamos que proporciones el identificador del artículo para cada producto de tu lista.
  9. El URI para el plugin tiene la siguiente estructura: product://<catalog_id >/{retailer_id}. Por lo tanto, si quisiéramos obtener el URI del producto denominado Product #45 en el ejemplo de arriba, el aspecto sería el siguiente: product://768856339915012/45 (el identificador del catálogo de productos se ha obtenido en el paso cinco).

A través de la API Graph

Puedes obtener el URI de tu producto mediante la API Graph. Cuando subas productos, usa el siguiente formato de URL y reemplaza <catalog_id> por el identificador del catálogo y <retailer_id> por el identificador de establecimiento de tu producto:

product://<catalog_id>/<retailer_id>

Obtén más información en Documentos de productos.

5. URI del producto

En el código del botón “Guardar” usa el URI del producto para el valor de data-uri. Por ejemplo, para el URI del producto product://949817451770475/143791832, tu código tendría este aspecto:

<div class="fb-save" 
  data-uri="product://949817451770475/143791832">
</div>

Vista “Guardado”

Todos los enlaces guardados se añadirán a la vista Guardado, que se encuentra en www.facebook.com/saved o, en aplicaciones para móviles, en la ruta Más > Guardado.

Ejemplo

Enlace guardado

Cambiar el idioma

Para cambiar el idioma del botón “Guardar”, 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&amp;version=v2.6";

Puedes consultar los idiomas que se admiten en el archivo FacebookLocales.xml.

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.