Плагин «Страница»

Плагин «Страница» позволяет без труда встраивать и продвигать любую Страницу Facebook на сайте. Люди смогут отмечать Страницу как понравившуюся и делиться ей (как они это делают на Facebook) прямо на вашем сайте.

Настройки

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

Настройка Атрибут HTML5 Описание По умолчанию

href

data-href

URL Страницы Facebook

Нет

width

data-width

Ширина плагина (в пикселях). Минимальное значение — 180, максимальное — 500

340

height

data-height

Высота плагина (в пикселях). Минимальное значение — 70

500

tabs

data-tabs

Вкладки, которые вы хотите показывать, например timeline, events, messages. Используйте список с элементами, разделенными запятой, чтобы добавить несколько вкладок. Например, timeline, events.

timeline

hide_cover

data-hide-cover

Скрывать фото обложки в заголовке

false

show_facepile

data-show-facepile

Показывать фото профиля, когда друзья ставят отметку «Нравится»

true

hide_cta

data-hide-cta

Скрывать индивидуально настроенную кнопку призыва к действию (если такая кнопка используется)

false

small_header

data-small-header

Использовать маленький заголовок

false

adapt_container_width

data-adapt-container-width

Адаптировать по ширине контейнера

true


Устаревшие атрибуты

  • Атрибут data-show-posts больше не используется. Используйте атрибут tabs/data-tabs и значение timeline для показа публикаций из Хроники Страницы.

Добавление плагина «Страница» на сайт

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

<div class="fb-page" 
  data-href="https://www.facebook.com/facebook"
  data-width="380" 
  data-hide-cover="false"
  data-show-facepile="false"></div>

Призыв к действию

Если вы настроите кнопку призыва к действию, она будет отображаться на вашей Странице вместо кнопки призыва к действию по умолчанию («Поделиться»).

Однако если ширина плагина меньше 280 пикселей, мы будем отображать кнопку «Поделиться», чтобы элементы Страницы не смещались.

Вкладки Страницы: Хроника, События и Сообщения

В плагине доступны вкладки Хроника, События и Сообщения.

  • Вкладка «Хроника»: в этой вкладке отображаются новейшие публикации из Хроники вашей Страницы Facebook.
  • Вкладка «События»: здесь люди могут следить за событиями вашей Страницы и подписаться на них из плагина.
  • Вкладка «Сообщения»: люди могут отправить сообщение со ссылкой на Страницу прямо с вашего сайта. Для этого человек должен выполнить вход на Facebook.

Отправка сообщений со Страницы

Чтобы активировать функцию отправки сообщений, на своей Странице Facebook перейдите в раздел Settings. В строке Messages отметьте Разрешить людям отправлять личные сообщения моей Странице, сделав доступной кнопку «Сообщения» (прямая ссылка: https://www.facebook.com/{your-page-name}/settings/?tab=settings&section=messages&view).

Добавление нескольких вкладок

Чтобы добавить несколько вкладок, используйте список с элементами, разделенными запятой, в атрибуте data-tabs.

<div class="fb-page" 
  data-tabs="timeline,events,messages"
  data-href="https://www.facebook.com/YoloBookStore"
  data-width="380" 
  data-hide-cover="false"></div>

Одна вкладка

Вы также можете добавить одну вкладку — timeline, events или messages.

<div class="fb-page" 
  data-tabs="events"
  data-href="https://www.facebook.com/YoloBookStore"
  data-width="380"></div>

Автоподстройка ширины

По умолчанию плагин адаптируется к ширине (width) своего родительского контейнера при загрузке страницы (мин. 180px/макс. 500px). Это может быть полезно при изменении макета.

<div style="width: 190px;">
  <!-- Page plugin's width will be 190px -->
  <div class="fb-page" data-href="{url}" data-width="420"></div>
</div>

Если ширина (width) родительского элемента больше, чем ширина (width) плагина «Страница», определяющим будет значение параметра data-width.

<div style="width: 600px;">
  <!-- Page plugin's width will be 500px -->
  <div class="fb-page" data-href="{url}" data-width="500"></div>
</div>

Ширина плагина не может быть меньше 180px.

<div style="width: 100px;">
  <!-- Page plugin's width will be 180px -->
  <div class="fb-page" data-href="{url}" data-width="320"></div>
</div>

Вы можете отключить автоподстройку ширины плагина. Для этого снимите галочку Адаптировать по ширине контейнера плагина. Тогда плагин будет отображаться с указанной шириной независимо от ширины родительского контейнера.

Отключение динамического изменения размеров

Плагин «Страница» работает с адаптивными, «резиновыми» и статичными макетами. Вы можете использовать медиазапросы или другие методы для настройки ширины (width) родительского элемента, но при этом:

  • Этот плагин будет определять его ширину (width) при загрузке страницы.
  • Он не будет реагировать на изменения блочной моделипосле загрузки страницы.

Если вы хотите настроить ширину (width) плагина при изменении размера окна, вам потребуется повторно создать плагин вручную.

Показывать лица друзей

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

Если вы хотите показывать фото профиля, отметьте Show Friend's Faces в конфигураторе.

<div class="fb-page"
  data-href="https://www.facebook.com/imdb" 
  data-width="340"
  data-hide-cover="false"
  data-show-facepile="true"></div>

Страницы с ограниченным доступом

Страницы Facebook с ограниченным доступом встроить нельзя.

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

Чтобы изменить язык плагина «Страница», загрузите локализованную версию Facebook SDK для JavaScript. При загрузке SDK задайте для js.src свою локаль. Замените en_US вашим языком, например ru_RU (русский язык (Россия)).

Пример
js.src = "https://connect.facebook.net/ru_RU/sdk.js#xfbml=1&amp;version=v2.5";

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