Приветствую вас на сайте Impuls-Web!
На сегодняшний день cоциальные сети являются одной из наиболее востребованных площадок для продвижения своего бренда. У некоторых организаций весь бизнес построен только на продвижении в соц. сетях, но если у вас есть свой сайт, то вы можете связать его со своими группами и личными страницами при помощи специальных виджетов.
В сегодняшней статье мы с вами рассмотрим, как сделать facebook-виджет для сайта. Как настроить его и правильно подключить. Facebook-виджет для сайта позволит вам расширить обхват аудитории вашего сайта и вашей страницы на Facebook.
Навигация по статье:
Как получить код facebook-виджет для сайта?
Итак, для размещения на страницах нашего сайта facebook-виджета, нам нужно, как и для всех сторонних встраиваемых элементов, получить его код. Для этого делаем следующее:
- 1.Переходим на Facebook.com и заходим в свою учетную запись.
- 2.Переходим по этой ссылке «Создание facebook-виджета для сайта». У вас в новой вкладке откроется страница для разработчиков, на которой мы будем настраивать наш виджет.
- 3.Пролистав немного ниже нам нужно задать параметры отображения виджета на станице. В первую очередь указываем высоту (минимум 70 px) и ширину (минимум 180px) виджета, исходя из размеров блока в который вы хотите его поместить.
- 4.Далее, включаем, при необходимости дополнительные параметры:
- Использовать маленький заголовок – будет использоваться уменьшенная версия шапки страницы.
- Скрыть фото профиля – позволяет скрыть фото в шапке профиля.
- Адаптировать под ширину контейнера плагина – делает виджет адаптивным.
- Показывать лица друзей – можно скрыть или показать друзей, поставивших отметку «Нравиться»
- 5.В окне предпросмотра смотрим, что у нас получилось, и нажимаем на кнопку «Получить код»
- 6.В открывшемся окошке в случае если вы собираетесь вставлять виджет, например, в сайдбере WordPress, выбираем вкладку «IFrame». В разделе «Шаг 1» проверяем, что был выбран идентификатор нужной страницы, после чего выделяем и копируем в разделе «Шаг 2».
- 7.Если же вам нужен код для вставки facebook-виджета в тело страницы, то вам нужно взять код из открывшегося окошка с вкладки «SDK JavaScript»:
В разделе «Шаг 1» выбираем нужную страницу и язык, а в разделе «Шаг 2» копируем два фрагмента кода.
Как вставить код facebook-виджета на сайт WordPress?
Если вы хотите вставить facebook-виджет для сайта в сайдбаре, то вам нужно:
- 1.В административной панели WordPress переходим в раздел меню «Внешний вид» => «Виджеты».
- 2.В область виджетов «Сайдбар» добавляем виджет «Пользовательский HTML» или «Текст»
- 3.В окошке виджета задаем заголовок и на вкладке «Текст» вставляем код, который мы получили в пункте 6 на вкладке «IFrame».
- 4.Не забываем нажать на кнопочку «Сохранить» и переходим на главную страницу, что бы посмотреть, что у нас получилось:
Как видите, виджет получился довольно не полохо, но нужно немного подправить расположение блока в стилях, а именно, дописать левый отступ для facebook-виджета.
Как вставить facebook-виджета на сайт в коде?
Если ваш сайт сделан не на движке, то вам нужно использовать код facebook-виджета для сайта полученный в 7 пункте инструкции на вкладке «SDK JavaScript».
Здесь у нас два фрагмента кода. Первый из которых мы должны вставить в тело страницы сразу после открытия тега <body>:
Второй фрагмент кода вам нужно вставить в код тела страницы, именно в то место, где вы хотите разместить facebook-виджет.
Дополнительные настройки facebook-виджета для сайта
Кроме того, на странице настройки есть таблица, в которой вы можете найти набор дополнительных параметров для виджета:
Используя данные параметры, вы можете более гибко настроить виджет для своего сайта.
В этой статье я постаралась как можно подробнее описать весь процесс настройки и вставки facebook-виджета для сайта. К сожалению, сайт Facebook постоянно обновляется, и через некоторое время, процедура настройки виджета может немного измениться, но в основном принцип настройки остается тот же.
А на сегодня у меня все. Надеюсь, моя инструкция будет для вас полезной! Не забывайте поделиться статьей в соц. сетях и подписаться на мою рассылку.
До встречи в следующих статьях!
С уважением Юлия Гусарь
