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

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

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

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

  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-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} />"; 

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