Save Button

The Save Button Plugin has been deprecated. This plugin will remain operational and accessible until September 15, 2022. After that point, this plugin will be discontinued and no longer operational.

The Save button lets people save items or services to a private list on Facebook, share it with friends, and receive relevant notifications. For example, a person can save an item of clothing, trip, or link that they're thinking about and go back to that list for future consumption, or get notified when that item or trip has a promotional deal.

Save Button Configurator Code Example Settings

Step-by-Step

1. Choose Website Link

Pick the link of a website you want to use with the Save button.

2. Code Configurator

Paste the link to the code configurator and click the "Get Code" button to generate your Save button code.

3. Copy & Paste HTML snippet

Copy and past the snippet into the HTML of the destination website.

Save Button Configurator

Link of a website or product to save

Button Size

large

Get Code

Full Code Example

Copy & paste the code example to your website. Adjust the value data-uri to your website link. Next use the <title> tag to adjust the "saved" title.

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

Try it yourself!

Settings

In addition to the settings above, you can also change the following:

Setting	HTML5 Attribute	Description	Default
`uri`	`data-uri`	The absolute link of the page that will be saved.	Current Link/Address
`lazy`	`data-lazy`	`true` means use the browser's lazy-loading mechanism by setting the `loading="lazy"` iframe attribute. The effect is that the browser does not render the plugin if it's not close to the viewport and might never be seen. Can be one of `true` or `false` (default).	`false`

Save Button for Products

You can also use the Save button for products:

1. Set up Product Catalog

To use the Save button with your products you first need to set up a product catalog.

A product catalog sometimes called a product feed, is a list of products you would like to advertise on Facebook. Each product in the list has specific attributes which can be used to generate an ad, a product ID, name, description, landing page URL, image URL, availability, and so on.

How to Create a Product Catalog Facebook Dynamic Product Ads

2. Facebook API ID

Go to the settings tab of the app dashboard, add the platform "Website", and provide your website domain.

3. JavaScript SDK Loading

Load the JavaScript SDK using your app ID as shown in the example below. Replace {your-app-id} with your app ID.

<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. Get Product URI

Via Business Manager

There are 2 piece of information that you need to to use the Save button for products: the product catalog ID and the the item ID from your product feed:

Log into your business on business manager.
Go to "Business Settings" > "Product Catalog".
Click on the product catalog you wish to use for the plugin.
Under the title of the name of the Product Catalog, note down the Product Catalog ID. In our example it is 768856339915012.
The other information needed is the Item ID that was uploaded in your product feed. To see examples from your product feed, click on the Product Catalog ID.
On the next page, click on Product Feeds on the top.
Click on the feed that contains the items you wish to use.
On the next page, you will see a sample of items from your feed. For the plugin to identify your product, we will need the Item ID listed in your feed for each product.
The URI for the plugin follows the pattern of product://<catalog_id >/{retailer_id}. So if we wanted to make a URI for the product named Product #45 in the example above it would look like this: product://768856339915012/45 (where the product's catalog ID came from step #5).

Via Graph API

You can get the URI of your product via Graph API. When loading a single or multiple product items build the following URL format while replacing <catalog_id> with your catalog ID and <retailer_id> with the retailer ID of your product:

product://<catalog_id>/<retailer_id>

Learn more in the product item docs.

5. Product URI

In the Save button code use the product URI for data-uri. For example for the product URI product://949817451770475/143791832 your code would look like this:

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

Saved View

All saved links will be added to the Saved view, which can be found at www.facebook.com/saved or for mobile apps via navigating to More -> Saved.

Example

Saved Link

Changing the Language

You can change the language of the save button by loading a localized version of the Facebook JavaScript SDK. When you load the SDK, change the value of js.src to use your locale. Replace en_US with your locale, e.g., fr_FR for French (France):

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

Supported locales are referenced in the Facebook Locales XML file.

You may need to adjust the width of a Social Plugin to accommodate different languages. You may find more information on our Localization & Translation page.