儲存按鈕

「儲存」按鈕可以讓用戶將物件或服務儲存至 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

即將儲存頁面的絕對網址。

目前連結/網址

產品專用的儲存按鈕

您也可以使用產品專用的「儲存」按鈕:

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 個資訊片段需要使用「儲存」按鈕:產品動態中的產品目錄編號和項目編號。

  1. 在企業管理平台登入您的企業帳戶。
  2. 前往「企業設定」>「產品目錄」。
  3. 點擊您要用於附加程式的產品目錄。
  4. 在產品目錄名稱的標題下方,記下產品目錄編號。在我們的範例中為 768856339915012
  5. 另一個會用到的資訊是項目編號,該編號會上載至您的產品動態。若要查看您產品動態的範例,請點擊產品動態編號。
  6. 在下一頁,點擊上方的「產品動態」。
  7. 點擊包含您要使用的項目的動態。
  8. 在下一頁,您會看到動態中的項目範例。為了讓附加程式辨識您的產品,請為動態中的每個產品列出項目標號。
  9. 附加程式的 URI 會按照 product://<catalog_id >/{retailer_id} 的樣式呈現。所以假設我們要為上方範例中名為 Product #45 的產品製作 URI,其樣式就會是:product://768856339915012/45(其中產品目錄編號來自步驟 5)。

透過 Graph API

您可以透過 Graph 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 檔中。

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