“收藏”按钮

“收藏”按钮插件已停用。在 2022 年 9 月 15 日之前，您仍可运行和访问此插件。但在此之后，此插件将被停用且不能再运行。

用户可使用“收藏”按钮，将商品或服务收藏到 Facebook 私人列表，与好友分享该列表，以及接收相关通知。例如，用户可收藏自己感兴趣的服饰、行程或相关链接，以便之后返回此列表进行消费，或者在收藏的商品或行程有促销优惠活动时收到通知。

“收藏”按钮配置器代码示例设置

分步说明

1.选择网站链接

选择您想为其使用“收藏”按钮的网站链接。

2.代码配置器

将链接粘贴到代码配置器，然后点击“获取代码”按钮以生成“收藏”按钮代码。

3.复制并粘贴 HTML 代码片段

复制代码片段并将其粘贴到目标网站的 HTML 中。

“收藏”按钮配置器

要保存的网站或产品链接

按钮大小

large

获取代码

完整代码示例

复制代码示例并将其粘贴到您的网站。将 data-uri 值调整为您的网站链接。接下来，使用 <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>

亲身体验一下吧！

设置

除了上述设置外，您还可更改以下设置：

设置	HTML5 属性	描述	默认值
`uri`	`data-uri`	待收藏页面的绝对链接。	当前链接/地址
`lazy`	`data-lazy`	`true` 表示您可通过设置 `loading="lazy"` iframe 属性来使用浏览器的延迟加载机制。其效果是，如果插件不在视窗附近，则浏览器不会显示插件，且您可能始终无法看到该插件。可以是 `true` 或 `false`（默认）的其中一个。	`false`

商品“收藏”按钮

您也可对商品使用“收藏”按钮：

1.设置商品目录

如要对商品使用“收藏”按钮，首先需要设置商品目录。

商品目录（有时也称为“商品信息库”）是您希望在 Facebook 发布广告的商品清单。清单中的每件商品都具有特定的属性，利用此属性可生成广告、商品编号、名称、描述、落地页网址、图片网址、供货情况等。

如何创建商品目录 Facebook 动态商品广告

2.Facebook API 编号

前往应用面板的设置选项卡，添加平台“网站”，然后提供网域。

3.JavaScript SDK 加载

如以下示例所示，使用应用编号加载 JavaScript SDK。将 {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.获取商品 URI

通过商务管理平台

如要对商品使用“收藏”按钮，需要提供 2 条信息：商品目录编号和商品信息库中的商品编号：

在商务管理平台上登录您的公司。
前往“业务设置”>“商品目录”。
点击要用于插件的商品目录。
在商品目录名称的标题下，记下商品目录编号。在本示例中，此编号为 768856339915012。
此外，您还需要提供已上传至商品信息库的商品编号。如要查看商品信息库中的示例，请点击商品目录编号。
在下一页面上，点击顶部的“商品信息库”。
点击包含您要使用的商品的信息库。
在下一页面上，您将看到此信息库中的商品示例。为使插件能够识别您的商品，我们需要提供信息库中列出的每件商品的商品编号。
插件 URI 采用 product://<catalog_id >/{retailer_id} 格式。因此，如果我们要为上述示例中名为 Product #45 的商品创建 URI，此 URI 应为：product://768856339915012/45（其中商品目录编号来自步骤 5）。

通过图谱 API

您可通过图谱 API 获取商品 URI。加载单个或多个商品时，构建以下网址格式，同时将 <catalog_id> 替换为您的目录编号，并将 <retailer_id> 替换为商品的零售商编号：

product://<catalog_id>/<retailer_id>

如需了解更多信息，请参阅商品文档。

5.商品 URI

在“收藏”按钮代码中，需在 data-uri 中使用商品 URI。例如，如果商品 URI 为 product://949817451770475/143791832，您的代码应如下所示：

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

“收藏夹”视图

系统会将收藏的所有链接添加到收藏夹视图，如需访问此视图，请前往 www.facebook.com/saved，或导航至更多 -> 收藏夹（适用于移动应用）。

示例

收藏夹链接

更改语言

您可通过加载 Facebook JavaScript SDK 的本地化版本，更改“收藏”按钮的语言。加载 SDK 时，更改 js.src 的值以使用您的语言。例如，将 en_US 替换为您的语言 fr_FR，此代码表示法语（法国）：

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

如需了解支持的语言，请参阅 Facebook 语言 XML 文件。

您可能需要调整社交插件的宽度，以适应不同的语言。如需了解更多信息，请参阅本地化与翻译页面。