儲存按鈕

儲存按鈕外掛程式已過時停用。在 2022 年 9 月 15 日前,此外掛程式將保持在可運作及可存取的狀態下。之後,此外掛程式將終止服務,再也無法運作。

「儲存」按鈕可以讓用戶將商品或服務儲存至 Facebook 上的私人清單,並與朋友分享清單、接收相關通知。例如,用戶若認為某服裝、旅遊行程或連結的資料可供日後使用,可以在清單中儲存該項目並於日後再返回瀏覽,或是在該商品或旅遊行程舉辦促銷優惠時收到通知。

儲存按鈕配置器程式碼範例設定

逐步說明

1.選擇網站連結

挑選要使用「儲存」按鈕的網站連結。

2.程式碼配置器

將連結貼至程式碼配置器,然後點擊「取得程式碼」按鈕,即可產生您的「儲存」按鈕程式碼。

3.複製並貼上 HTML 程式碼片段

複製該程式碼片段,然後貼至目的地網站的 HTML。

儲存按鈕配置器

網站連結或欲儲存的產品
按鈕大小

完整程式碼範例

複製該程式碼範例,然後貼至您的網站。將 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 屬性來使用瀏覽器的消極式載入機制。其效果為,如果外掛程式沒有靠近檢視區,瀏覽器將不會呈現該外掛程式,並且可能永遠不會顯示。可為 truefalse(預設值)其中之一。

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

透過企業管理平台

您需要兩項資訊才能對產品使用「儲存」按鈕:商品目錄編號和來自產品摘要的項目編號:

  1. 企業管理平台上登入您的企業。
  2. 前往「企業管理平台設定」>「商品目錄」。
  3. 點擊想要用於外掛程式的商品目錄。
  4. 記下「商品目錄」名稱標題下方的「商品目錄編號」。此範例中為 768856339915012
  5. 另一項所需資訊是產品摘要上傳的「項目編號」。若要查看來自您產品摘要的範例,請點擊「商品目錄編號」。
  6. 在下一頁,點擊頂端的「產品摘要」。
  7. 點擊包含想要使用項目的摘要。
  8. 在下一頁,您會看到來自摘要的項目範例。為了讓外掛程式識別產品,我們需要每項產品列於摘要中的「項目編號」。
  9. 外掛程式的 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

在「儲存」按鈕程式碼中,使用產品 URI 做為 data-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 檔案中。

您可能需要調整社交外掛程式的寬度來配合不同語言。您可在本地化和翻譯頁面找到更多資訊。