ソーシャルプラグイン

保存ボタン

保存ボタンプラグインは廃止されています。このプラグインは、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属性を設定してブラウザーの遅延読み込みメカニズムを使用します。こうすると、プラグインがビューポートの近くにない場合、ブラウザーはプラグインをレンダリングしないので、プラグインは表示されないかもしれません。true または false (デフォルト)を指定できます。

false

商品の保存ボタン

商品の保存ボタンも使用できます。

1. 商品カタログを設定する

商品の保存ボタンを使用するには、まず商品カタログを設定する必要があります。

商品カタログは、Facebookで宣伝する商品のリストであり、商品フィードとも呼ばれます。リスト内の各商品には、それぞれ固有の属性があります。広告、商品ID、名前、説明、ランディングページURL、画像URL、在庫などを生成するためにこれらの属性を使用することができます。

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

2. Facebook API ID

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

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. 必要なもう1つの情報は、商品フィードでアップロードされたアイテムIDです。商品フィードのサンプルを見るには、商品カタログIDをクリックします。
  6. 次のページの上部にある[商品フィード]をクリックします。
  7. 使用するアイテムが含まれるフィードをクリックします。
  8. 次のページに、該当するフィードのアイテムのサンプルが表示されます。プラグインで商品が特定されるようにするため、各商品に、フィードにリストされているアイテムIDが必要です。
  9. プラグインのURIは、product://<catalog_id >/{retailer_id}のパターンに従います。そのため、上記の例でProduct #45という名前の商品のURIの場合は、product://768856339915012/45となります(商品のカタログIDはステップ5のもの)。

グラフAPIを使用する場合

グラフAPIにより、商品のURIを取得することができます。単一または複数の商品アイテムを読み込む際に、次のURL形式を構成します。ただし、<catalog_id>は実際のカタログIDに、<retailer_id>は実際の商品の小売店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ファイルをご覧ください。

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

関連トピック

ソーシャルプラグインのよくある質問ウェブ管理者向けシェア機能JavaScript用Facebook SDK