Кнопка «Сохранить»

Кнопка «Сохранить» позволяет людям сохранять товары или услуги в личном списке на Facebook, делиться им с друзьями и получать актуальные уведомления. Например, человек может сохранить интересующий предмет одежды, тур или ссылку в списке, чтобы потом приобрести его или получить уведомление о снижении цены.

Конфигуратор кнопки «Сохранить»Пример кодаНастройки

Пошаговые инструкции

1. Выберите ссылку на сайт

Выберите ссылку на сайт, где вы хотите использовать кнопку «Сохранить».

2. Помощник конфигурирования.

Вставьте ссылку в конфигуратор кода. Нажмите кнопку Получить код, чтобы сгенерировать код кнопки «Сохранить».

3. Скопируйте и вставьте фрагмент кода HTML.

Скопируйте и вставьте фрагмент кода в HTML-код сайта.

Конфигуратор кнопки «Сохранить»

Ссылка на веб-сайт или продукт для сохранения
Размер кнопки

Пример полного кода

Скопируйте и вставьте пример кода на свой сайт. Задайте значение параметра data-uri для ссылки на ваш веб-сайт. Затем используйте тег <title>, чтобы настроить заголовок "saved".

<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. ID API Facebook

Откройте вкладку настроек панели приложения, выберите в качестве платформы «Веб-сайт» платформы и укажите домен веб-сайта.

3. Загрузка JavaScript SDK

Загрузите JavaScript SDK с помощью ID своего приложения, как показано в примере ниже. Замените {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 продукта

Через Business Manager

Чтобы использовать кнопку «Сохранить» для товаров, вам потребуются ID каталога продуктов и ID элемента из вашей ленты продуктов:

  1. Войдите в свою компанию с помощью Business manager.
  2. Выберите «Настройки компании» > «Каталог продуктов».
  3. Нажмите каталог продуктов, который вы хотите использовать для плагина.
  4. Под названием каталога укажите его ID. В нашем примере это 768856339915012.
  5. Кроме того, вам потребуется ID элемента, который был загружен в ленту продуктов. Чтобы увидеть примеры из своей ленты продуктов, нажмите ID каталога продуктов.
  6. На следующей странице нажмите ленты продуктов вверху.
  7. Нажмите ленту с элементами, которые вы хотите использовать.
  8. На следующей странице вы увидите примеры элементов из своей ленты. Чтобы плагин мог идентифицировать ваш продукт, вы должны указать в ленте ID элемента для каждого продукта.
  9. URI для плагина соответствует шаблону product://<catalog_id >/{retailer_id}. Если мы хотим сделать URI для продукта под названием Product #45 в примере выше, он будет выглядеть так: product://768856339915012/45 (где ID каталога продуктов взят из шага 5).

Использование API Graph

Вы можете получить URI своего продукта через API Graph. При загрузке одного или нескольких элементов продукта, создайте следующий формат URL, заменив <catalog_id> ID каталога, а <retailer_id> — 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 SDK для JavaScript. При загрузке SDK задайте для js.src свою локаль. Замените en_US своей локалью, например fr_FR (французский язык (Франция)):

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

Список поддерживаемых локалей см. в файле Facebook Locales XML.

Возможно, вам понадобится изменить ширину Социального плагина, чтобы разместить локализованный текст. Подробную информацию см. на странице Локализация и перевод.