Плагин "Страница"

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

URL-адрес Страницы 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`
`lazy`	`data-lazy`	Если задать значение `true`, в браузере будет использоваться механизм отложенной загрузки. Для этого требуется атрибут iframe `loading="lazy"`. При отложенной загрузке браузер отображает плагин, только если тот расположен достаточно близко к окну просмотра и велик шанс, что пользователь его увидит. Возможные значения настройки: `true`, `false` (используется по умолчанию).	`false`

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

Атрибут 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.

Обмен сообщениями со Страницей

Чтобы включить функцию обмена сообщениями, перейдите в раздел Settings на своей Странице Facebook. В строке 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. Возможно, потребуется изменить ширину социального плагина, чтобы вместить локализованный текст. Подробную информацию см. на странице Локализация и перевод.