Botón "Guardar"

El botón "Guardar" 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ódigoConfiguración

Paso a paso

1. Elegir 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. Copiar y pegar el fragmento de código HTML

Copia y pega el fragmento de código en el texto 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>
Probar

Configuración

Además de la configuración mencionada anteriormente, puedes cambiar los elementos siguientes:

Configuración Atributo HTML5 Descripción Valor predeterminado

uri

data-uri

El 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. Configurar 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, disponibilidad, etc.

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 de configuración en el panel de aplicaciones, agrega la plataforma "Sitio web" y proporciona tu dominio del sitio web.

3. Carga del SDK para JavaScript

Carga el SDK para JavaScript con tu identificador de la aplicación como se muestra en el ejemplo siguiente. Reemplaza {your-app-id} con 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. Obtener URI del producto

A través del administrador comercial

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 desde el administrador comercial.
  2. Ve a "Configuración del negocio" > "Catálogo de productos".
  3. Haz clic en el catálogo de productos que quieres usar para el plugin.
  4. Debajo del título del nombre del catálogo de productos, encontrarás su identificador. En nuestro ejemplo es el 768856339915012.
  5. El otro dato que necesitas es el identificador del artículo que se subió a tu lista de productos. Para ver ejemplos de tu lista de productos, haz clic en el identificador del catálogo de productos.
  6. En la siguiente página, haz clic en "Listas de productos" en la parte superior.
  7. Haz clic en la lista que contiene los artículos que quieres usar.
  8. En la siguiente página verás una muestra de los artículos de tu lista. Para que el plugin identifique tu producto, necesitaremos el identificador del artículo en la lista para cada producto.
  9. El URI del plugin sigue este patrón: product://<catalog_id >/{retailer_id}. Por lo tanto, si quisiéramos obtener el URI del producto denominado Product #45 en el ejemplo de arriba, se vería así: product://768856339915012/45 (el identificador del catálogo de productos se obtuvo en el paso cinco).

A través de la API Graph

Puedes obtener el URI de tu producto a través de la API Graph. Cuando cargues uno o varios artículos de productos debes crear el siguiente formato de URL, al reemplazar <catalog_id> con el identificador de catálogo y <retailer_id> con el identificador de establecimiento de tu producto:

product://<catalog_id>/<retailer_id>

Obtén más información en Documentación sobre productos.

5. URI del producto

En el código del botón "Guardar" usa el URI del producto para data-uri. Por ejemplo, para el URI del producto product://949817451770475/143791832, tu código se vería así:

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

Vista "Guardado"

Todos los enlaces guardados se agregarán a la vista Guardado, que se encuentra en www.facebook.com/saved. En aplicaciones para celulares hay que navegar a 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, cambia el valor de js.src para usar la configuración regional. Reemplaza en_US con la configuración regional. Por ejemplo, fr_FR para francés (Francia):

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

El archivo Facebook Locales XML contiene las configuraciones regionales que se admiten.

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