保存ボタン

保存ボタンがあれば、利用者は、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上で宣伝する製品のリストです。リスト内の各製品は固有の属性(製品ID、名前、説明、ランディングページのURL、画像URL、在庫状況など)を持っていて、この属性を使用することで広告を生成できます。

製品カタログの作成方法Facebookのダイナミックプロダクト広告

2. Facebook API ID

アプリダッシュボードの[設定]タブに移動し、「ウェブサイト」のプラットフォームを追加して、ご自身のウェブサイトドメインを指定します。

3. JavaScript SDKの読み込み

次の例のように、アプリIDを使ってJavaScript SDKを読み込みます。{your-app-id}はご自身のアプリ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を取得する

ビジネスマネージャ経由

製品の保存ボタンを使用するには、製品カタログIDと製品フィードからのアイテムIDの2つの情報が必要です。

  1. ビジネスマネージャでビジネスにログインします。
  2. [ビジネス設定] > [製品カタログ] に移動します。
  3. プラグインに使用する製品カタログをクリックします。
  4. 製品カタログの名前の下にある、製品カタログIDを書き留めます。この例では、768856339915012になります。
  5. このほかに、製品フィードにアップロードされたアイテムIDも必要になります。製品フィードからサンプルを表示するには、製品カタログIDをクリックします。
  6. 次のページで、上部にある[製品フィード]をクリックします。
  7. 使用するアイテムが含まれるフィードをクリックします。
  8. 次のページに、フィードからのサンプルアイテムが表示されます。プラグインが製品を識別するためには、各製品のフィードにリストされるアイテムIDが必要です。
  9. プラグインのURIは、product://<catalog_id >/{retailer_id}のようなパターンになります。したがって、上の例のProduct #45という名前の製品のURIを作成する場合は、次のようになります: product://768856339915012/45(製品のカタログIDは、ステップ5のIDになります)。

グラフAPI経由

製品のURIをGraph API経由で取得できます。1つまたは複数の製品アイテムを読み込む際は、次のURLフォーマットを作成し、<catalog_id>をご自身のカタログIDに、<retailer_id>を製品の販売店IDに置き換えます。

product://<catalog_id>/<retailer_id>

詳細は、製品アイテムに関するドキュメントをご覧ください。

5. 製品URI

保存ボタンコードでは、data-uriの製品URIを使用します。たとえば、product://949817451770475/143791832の製品URIでは、コードは次のようになります。

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

保存済みビュー

保存したリンクはすべて[保存済み]ビューに追加されます。このビューはwww.facebook.com/savedで確認できるほか、モバイルアプリの場合は[その他] -> [保存済み]からアクセスできます。

保存済みリンク

言語を切り換える

Facebook JavaScript SDKのローカライズバージョンを読み込むことで、保存ボタンの言語を変更できます。SDKを読み込む際のjs.srcの値を、使用する言語に変更します。たとえば、フランス語(フランス)の場合は、en_USfr_FRに置き換えます。

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

サポートされる言語については、FacebookLocales.xmlファイルをご覧ください。

使用する言語によっては、ソーシャルプラグインの幅の調整が必要になる場合があります。詳細は、「ローカライズと翻訳」ページをご覧ください。