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

Изменения в социальных плагинах для Европейского региона

Вы можете заметить некоторые изменения в социальных плагинах, связанные с тем, что запрос согласия на использование файлов cookie для пользователей Продуктов Facebook в Европейском регионе был обновлен. Мы прекращаем поддержку социальных плагинов "Нравится" и "Комментировать" для пользователей в Европейском регионе, если они 1) не вошли в свой аккаунт Facebook и 2) не предоставили согласие на управление файлами cookie для приложений и сайтов. Если оба эти требования соблюдены, пользователь сможет видеть такие плагины, как кнопки "Нравится" и "Комментировать", и пользоваться ими. Если какое-либо из перечисленных выше требований не выполнено, пользователь не увидит эти плагины.

Ниже перечислены страны, относящиеся к Европейскому региону.

Европейский союз (ЕС): Австрия, Бельгия, Болгария, Венгрия, Германия, Греция, Дания, Ирландия, Испания, Италия, Кипр, Латвия, Литва, Люксембург, Мальта, Нидерланды, Польша, Португалия, Румыния, Словакия, Словения, Финляндия, Франция, Хорватия, Чехия, Швеция, Эстония.
Страны, входящие в Европейскую экономическую зону, Европейскую ассоциацию свободной торговли или Таможенный союз: [Европейская экономическая зона/Европейская ассоциация свободной торговли] Исландия, Лихтенштейн и Норвегия; Швейцария: [Таможенный союз ЕС] Монако, Нормандские острова, остров Мэн; заморские территории Великобритании на острове Кипр; [Европейский Таможенный союз] Андорра, Ватикан, Сан-Марино.
Особые территории государств-членов Европейского союза: Азорские острова, Гваделупа, Канарские острова, Мадейра, Майотта, Мартиника, Реюньон, Сен-Мартен, Французская Гвиана.
Великобритания (все Британские острова).

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

С помощью конфигуратора кнопки "Нравится" можно получить ее код для веб-страницы.

Укажите URL страницы, на которой вы хотите разместить кнопку "Нравится".
Настройте кнопку.
Воспользуйтесь предпросмотром кнопки.
Нажмите Получить код, скопируйте код и вставьте его на свою веб-страницу.

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

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

Width

Композиция

standard

Тип действия

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

small

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

Получить код

Чтобы настроить предпросмотр ссылки, используйте метатеги Open Graph. Тег og:url и атрибут data-ref должны содержать одинаковый 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={graph-api-version}
             &appId={your-facebook-app-id}" 
        nonce="FOKrbAYI">
  </script>

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

</body>
</html>

Атрибуты HTML5 кнопки "Нравится"

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

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

Настройки макета необязательны.

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

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

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

js.src = "https://connect.facebook.net/fr_FR/sdk.js#xfbml=1&version={graph-api-version} />";

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