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

Когда пользователь нажимает кнопку "Нравится" на вашей веб-странице, запускается событие в приложении, которое регистрирует эту отметку "Нравится" на Facebook.

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

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

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

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

  • Страны, входящие в Европейскую экономическую зону, Европейскую ассоциацию свободной торговли или Таможенный союз: [Европейская экономическая зона/Европейская ассоциация свободной торговли] Исландия, Лихтенштейн и Норвегия; Швейцария: [Таможенный союз ЕС] Монако, Нормандские острова, остров Мэн; заморские территории Великобритании на острове Кипр; [Европейский Таможенный союз] Андорра, Ватикан, Сан-Марино.

  • Особые территории государств-членов Европейского союза: Азорские острова, Гваделупа, Канарские острова, Мадейра, Майотта, Мартиника, Реюньон, Сен-Мартен, Французская Гвиана.
  • Великобритания (все Британские острова).

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

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

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

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

URL-адрес для отметки «Нравится»
Width
Композиция
Тип действия
Размер кнопки

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

Чтобы настроить предпросмотр ссылки, используйте метатеги 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}
             &autoLogAppEvents=1" 
        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} />"; 

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