Кнопка "Нравится" для сайтов

Нажав на кнопку "Нравится", пользователи смогут ставить контенту в Сети отметку "Нравится" и делиться им на Facebook. Рядом с кнопкой "Нравится" можно разместить кнопку "Поделиться", чтобы пользователи могли добавлять текст для публикации контента и выбирать, с кем поделиться им.

Конфигуратор кнопки «Нравится»Пример кода Настройки Изменение языка ЧаВо

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

1. Выберите URL или страницу.

Выберите URL сайта или Страницы Facebook, для которых вы хотите использовать кнопку "Нравится".

2. Воспользуйтесь конфигуратором кода.

Вставьте URL в конфигуратор кода и настройте параметры кнопки "Нравится" (например, width). Чтобы сгенерировать код кнопки, нажмите Get Code.

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

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

4. Отключите дублирование (если необходимо).

Если код для активации отслеживания событий в приложении уже внедрен, удалите из скопированного кода оператор autoLogAppEvents=1, чтобы избежать дублирования записей.

Конфигуратор кнопки "Нравится"

URL-адрес для отметки «Нравится»

Width

Композиция

standard

Тип действия

Размер кнопки

small

Включить кнопку «Поделиться»

Получить код

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

Скопируйте и вставьте пример кода на свой сайт. В качестве значения параметра data-href укажите URL своего сайта. Затем настройте предпросмотр ссылки с помощью метатегов og:***. В og:url и data-href должен использоваться один и тот же URL.

<html>
<head>
  <title>Your Website Title</title>
    <!-- You can use open graph tags to customize link previews.
    Learn more: https://developers.facebook.com/docs/sharing/webmasters -->
  <meta property="og:url"           content="https://www.your-domain.com/your-page.html" />
  <meta property="og:type"          content="website" />
  <meta property="og:title"         content="Your Website Title" />
  <meta property="og:description"   content="Your description" />
  <meta property="og:image"         content="https://www.your-domain.com/path/image.jpg" />
</head>
<body>

  <!-- Load Facebook SDK for JavaScript -->
  <div id="fb-root"></div>
  <script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v3.0"></script>

  <!-- Your like button code -->
  <div class="fb-like" 
    data-href="https://www.your-domain.com/your-page.html" 
    data-layout="standard" 
    data-action="like">
  </div>

</body>
</html>

Настройка предварительного просмотра ссылки

Настройки

Вы можете задать следующие настройки помимо указанных выше:

Настройка	Атрибут HTML5	Описание	По умолчанию
`action`	`data-action`	Слово (глагол), которое отображается на кнопке. `like` либо `recommend`.	`like`
`colorscheme`	`data-colorscheme`	Цветовая схема, которая используется плагином для текста за пределами кнопки. Может быть `light` или `dark`.	`light`
`href`	`data-href`	Абсолютный URL страницы, которой люди будут ставить отметки "Нравится".	Текущий URL
`kid_directed_site`	`data-kid-directed-site`	Если сайт или онлайн-сервис (либо часть сервиса) содержит контент для детей до 13 лет, необходимо активировать этот параметр.	`false`
`layout`	`data-layout`	Выбор компоновки из числа доступных для плагина. Может иметь значение `standard`, `button_count`, `button` или `box_count`. Подробнее см. в разделе Часто задаваемые вопросы.	`standard`
`ref`	`data-ref`	Ярлык для отслеживания переходов длиной не более 50 символов. Это могут быть буквы и цифры, а также некоторые знаки пунктуации (+/=-.:_). Подробнее см. раздел ЧаВо.	Нет
`share`	`data-share`	Указывает, размещать ли кнопку "Поделиться" рядом с кнопкой "Нравится". Только для версии XFBML.	`false`
`size`	`data-size`	Кнопка может быть двух размеров: `large` и `small`.	`small`
`width`	`data-width`	Ширина плагина (только в стандартном макете). По умолчанию выбирается минимальное значение. Подробнее см. в разделе Настройки макета ниже.	См. `standard` в разделе Настройки макета.

Настройки макета

Доступны следующие настройки:

Компоновка	Размеры по умолчанию
`standard`	Минимальная ширина: 225 пикселей. Ширина по умолчанию: 450 пикселей. Высота: 35 пикселей (без фото) или 80 пикселей (с фото).
`box_count`	Минимальная ширина: 55 пикселей. Ширина по умолчанию: 55 пикселей. Высота: 65 пикселей.
`button_count`	Минимальная ширина: 90 пикселей. Ширина по умолчанию: 90 пикселей. Высота: 20 пикселей.
`button`	Минимальная ширина: 47 пикселей. Ширина по умолчанию: 47 пикселей. Высота: 20 пикселей.

Изменение языка

Чтобы изменить язык кнопки "Нравится", загрузите локализованную версию Facebook SDK для JavaScript. При загрузке SDK задайте для js.src свою локаль. Замените en_US вашим языком, например fr_FR (французский язык (Франция)).

js.src = "https://connect.facebook.net/fr_FR/sdk.js#xfbml=1&version=v7.0";

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