Botón "Guardar"

Se dispuso la obsolescencia del plugin del botón "Guardar". Este plugin seguirá activo y disponible hasta el 15 de septiembre de 2022. Después de esa fecha, este plugin se discontinuará y dejará de funcionar.

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é en oferta.

Configurador del botón "Guardar"Ejemplo de código Configuración

Paso a paso

1. Seleccionar el enlace del sitio web

Elige el enlace de un sitio web en el que quieras usar el botón "Guardar".

2. Configurador de código

Pega el enlace al 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

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

¡Pruébalo!

Configuración

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

Configuración	Atributo HTML5	Descripción	Valor predeterminado
`uri`	`data-uri`	El enlace absoluto de la página que se guardará.	Dirección/enlace actual
`lazy`	`data-lazy`	`true` significa que usas el mecanismo de carga diferida del navegador mediante la configuración del atributo `loading="lazy"` del iframe. Como consecuencia, el navegador no muestra el plugin si no está cerca del visor, y quizás nunca se vea. Puede ser `true` o `false` (predeterminado).	`false`

Botón "Guardar" para los productos

También puedes usar el botón "Guardar" para los productos:

1. Configura el catálogo de productos

Para usar el botón "Guardar" con tus productos, primero debes configurar un catálogo de productos.

Un catálogo de productos, también llamado lista de productos, incluye los 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, un identificador, un nombre y una descripción, la URL de la página de destino, la URL de la imagen, la disponibilidad, etc.

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

2. Agrega el identificador de la API de Facebook

Ve a la pestaña "Configuración" del panel de apps, agrega la plataforma "sitio web" y proporciona el dominio de tu sitio web.

3. Carga el SDK para JavaScript

Carga el SDK para JavaScript con el identificador de la app que se muestra en el siguiente ejemplo. Reemplaza {your-app-id} con el identificador de la app.

<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 administrador comercial

A fin de usar el botón "Guardar" para los productos, necesitas dos datos: el identificador del catálogo de productos y el identificador del artículo de tu lista de productos:

Inicia sesión en tu negocio en el administrador comercial.
Ve a "Configuración del negocio" > "Catálogo de productos".
Haz clic en el catálogo de productos que deseas usar para el plugin.
Debajo del título del nombre del catálogo de productos, anota el identificador del catálogo de productos. En nuestro ejemplo es 768856339915012.
La otra información necesaria es el identificador del artículo que se subió a tu lista de productos. Para consultar ejemplos de tu 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 deseas usar.
En la página siguiente, verás un ejemplo de artículos de tu lista. A fin de que el plugin identifique tu producto, necesitaremos el identificador del artículo que aparece en tu lista para cada producto.
El URI del plugin sigue el patrón de product://<catalog_id >/{retailer_id}. Entonces, si quisiéramos hacer un URI para el producto denominado Product #45 en el ejemplo anterior, se vería así: product://768856339915012/45 (donde el identificador del catálogo del producto proviene del paso n.º 5).

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 productos, crea el siguiente formato de URL mientras reemplazas <catalog_id> por tu identificador de catálogo y <retailer_id> por el identificador del comercio minorista de tu producto:

product://<catalog_id>/<retailer_id>

Obtén más información en los documentos del producto.

5. URI del producto

En el código del botón "Guardar", usa el URI del producto 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>

Visualización guardada

Todos los enlaces guardados se agregarán a la visualización guardada, que se puede encontrar en www.facebook.com/saved o, en la app para celulares, en Más -> Guardado.

Ejemplo

Enlace guardado

Cambiar el idioma

Si deseas 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 tu idioma. Reemplaza en_US con tu idioma. Por ejemplo, reemplázalo con fr_FR para usar el francés (Francia):

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

El archivo XML de idiomas de Facebook incluye los idiomas admitidos.

Quizá debas ajustar el ancho del plugin social para adaptarlo a los diferentes idiomas. Si quieres obtener más información, visita la página de localización y traducción.

Temas relacionados

Preguntas frecuentes sobre los plugins sociales Función de compartir para webmasters SDK de Facebook para JavaScript