Botón “Guardar”

El plugin del botón “Guardar” se ha retirado. No obstante, continuará operativo y accesible hasta el 15 de septiembre de 2022. Después de esa fecha, dejará de estar disponible y operativo.

El botón “Guardar” permite a los usuarios guardar artículos o servicios en una lista privada de Facebook, compartirlos con amigos y recibir notificaciones pertinentes. Por ejemplo, un usuario puede guardar un artículo de ropa, un viaje o un enlace que le interese y volver a la lista para consumirlo en otro momento, o recibir una notificación cuando el artículo o el viaje estén de oferta.

Configurador del botón “Guardar”Ejemplo de código Configuración

Paso a paso

1. Elige el enlace de un sitio web

Elige el enlace de un sitio web que quieras utilizar con el botón “Guardar”.

2. Configurador de códigos

Pega el enlace en el configurador de códigos 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

large

Obtener código

Ejemplo de código completo

Copia y pega el ejemplo de código en el sitio web. Ajusta el valor data-uri al enlace del sitio web. A continuación, utiliza 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>

¡Pruébalo tú mismo!

Configuración

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

Configuración	Atributo HTML5	Descripción	Valor predeterminado
`uri`	`data-uri`	Enlace absoluto de la página que se guardará.	Enlace o dirección actual
`lazy`	`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).	`false`

Botón “Guardar” para productos

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

1. Configurar el catálogo de productos

Para utilizar el botón “Guardar” con tus productos, antes debes configurar un catálogo de productos.

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

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

2. Identificador de API de Facebook

Ve a la pestaña “Configuración” del panel de aplicaciones, añade la plataforma “Sitio web” y especifica el dominio de tu sitio web.

3. Cargar el SDK para JavaScript

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

Mediante Business Manager

A fin de utilizar el botón “Guardar” para productos, necesitas dos datos: el identificador del catálogo de productos y el identificador del artículo de la lista de productos:

Inicia sesión en la empresa desde Business Manager.
Ve a “Configuración de la empresa” > “Catálogo de productos”.
Haz clic en el catálogo de productos que quieras utilizar para el plugin.
Anota el identificador del catálogo de productos que aparece debajo del título del nombre del catálogo correspondiente. En nuestro ejemplo, es 768856339915012.
El otro dato que necesitas es el identificador de artículo que se subió en la lista de productos. Para ver ejemplos de la lista de productos, haz clic en el identificador del catálogo de productos.
En la página siguiente, haz clic en “Listas de productos” en la parte superior.
Haz clic en la lista que contiene los artículos que quieres utilizar.
En la página siguiente, verás una muestra de los artículos de la lista. Para que el plugin pueda identificar el producto, necesitaremos el identificador de artículo de cada producto de la lista.
El URI del plugin sigue el patrón de product://<catalog_id >/{retailer_id}. Así pues, si queremos crear un URI para el producto denominado Product #45 en el ejemplo anterior, tendría este aspecto: product://768856339915012/45 (donde el identificador del catálogo del producto procede del paso n.º 5).

Mediante la API Graph

Puedes obtener el URI del producto mediante la API Graph. Al cargar uno o varios productos, utiliza el siguiente formato de URL y sustituye <catalog_id> por el identificador del catálogo y <retailer_id> por el identificador del minorista del producto:

product://<catalog_id>/<retailer_id>

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

5. URI del producto

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

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

Vista “Guardado”

Todos los enlaces guardados se añadirán a la vista Guardado, disponible en www.facebook.com/saved o en Más -> Guardado en el caso de las aplicaciones para móviles.

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 utilizar tu configuración regional. 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&amp;version=v2.6";

Puedes consultar las configuraciones regionales 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.

Temas relacionados

Preguntas frecuentes sobre plugins sociales Acción “Compartir” para administradores de web SDK de Facebook para JavaScript