Как сделать facebook-виджет для сайта?

Facebook-виджет для сайта

Приветствую вас на сайте Impuls-Web!

На сегодняшний день cоциальные сети являются одной из наиболее востребованных площадок для продвижения своего бренда. У некоторых организаций весь бизнес построен только на продвижении в соц. сетях, но если у вас есть свой сайт, то вы можете связать его со своими группами и личными страницами при помощи специальных виджетов.

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

Как получить код facebook-виджет для сайта?

Итак, для размещения на страницах нашего сайта facebook-виджета, нам нужно, как и для всех сторонних встраиваемых элементов, получить его код. Для этого делаем следующее:

  1. 1.Переходим на Facebook.com и заходим в свою учетную запись.
  2. 2.Переходим по этой ссылке «Создание facebook-виджета для сайта». У вас в новой вкладке откроется страница для разработчиков, на которой мы будем настраивать наш виджет.
  3. Страница настройки facebook-виджета для сайта
  4. 3.Пролистав немного ниже нам нужно задать параметры отображения виджета на станице. В первую очередь указываем высоту (минимум 70 px) и ширину (минимум 180px) виджета, исходя из размеров блока в который вы хотите его поместить.
  5. Задание размеров виджета
  6. 4.Далее, включаем, при необходимости дополнительные параметры:
    Дополнительные параметры
    • Использовать маленький заголовок – будет использоваться уменьшенная версия шапки страницы.
    • Скрыть фото профиля – позволяет скрыть фото в шапке профиля.
    • Адаптировать под ширину контейнера плагина – делает виджет адаптивным.
    • Показывать лица друзей – можно скрыть или показать друзей, поставивших отметку «Нравиться»
  7. 5.В окне предпросмотра смотрим, что у нас получилось, и нажимаем на кнопку «Получить код»
    Окно предпросмотра виджета
  8. 6.В открывшемся окошке в случае если вы собираетесь вставлять виджет, например, в сайдбере WordPress, выбираем вкладку «IFrame». В разделе «Шаг 1» проверяем, что был выбран идентификатор нужной страницы, после чего выделяем и копируем в разделе «Шаг 2».
    Код ждя вставки в сайдбар
  9. 7.Если же вам нужен код для вставки facebook-виджета в тело страницы, то вам нужно взять код из открывшегося окошка с вкладки «SDK JavaScript»:
    Код для вставки в тело сайта

    В разделе «Шаг 1» выбираем нужную страницу и язык, а в разделе «Шаг 2» копируем два фрагмента кода.

Как вставить код facebook-виджета на сайт WordPress?

Если вы хотите вставить facebook-виджет для сайта в сайдбаре, то вам нужно:

  1. 1.В административной панели WordPress переходим в раздел меню «Внешний вид» => «Виджеты».
  2. Виджеты WordPress
  3. 2.В область виджетов «Сайдбар» добавляем виджет «Пользовательский HTML» или «Текст»
  4. Добавляем виджет в сайдбар WordPress
  5. 3.В окошке виджета задаем заголовок и на вкладке «Текст» вставляем код, который мы получили в пункте 6 на вкладке «IFrame».
  6. Встава кода в виджет
  7. 4.Не забываем нажать на кнопочку «Сохранить» и переходим на главную страницу, что бы посмотреть, что у нас получилось:
    facebook-виджет на странице сайта

Как видите, виджет получился довольно не полохо, но нужно немного подправить расположение блока в стилях, а именно, дописать левый отступ для facebook-виджета.

Как вставить facebook-виджета на сайт в коде?

Если ваш сайт сделан не на движке, то вам нужно использовать код facebook-виджета для сайта полученный в 7 пункте инструкции на вкладке «SDK JavaScript».

Здесь у нас два фрагмента кода. Первый из которых мы должны вставить в тело страницы сразу после открытия тега <body>:

Встава виджета в тело сайта

Второй фрагмент кода вам нужно вставить в код тела страницы, именно в то место, где вы хотите разместить facebook-виджет.

Так же, вам нужно учесть, что если ваш сайт сделан без CMS, то вам нужно повторить вставку кода на всех страницах.

Дополнительные настройки facebook-виджета для сайта

Кроме того, на странице настройки есть таблица, в которой вы можете найти набор дополнительных параметров для виджета:

Таблица дополнительных параметров

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

В этой статье я постаралась как можно подробнее описать весь процесс настройки и вставки facebook-виджета для сайта. К сожалению, сайт Facebook постоянно обновляется, и через некоторое время, процедура настройки виджета может немного измениться, но в основном принцип настройки остается тот же.

А на сегодня у меня все. Надеюсь, моя инструкция будет для вас полезной! Не забывайте поделиться статьей в соц. сетях и подписаться на мою рассылку.

До встречи в следующих статьях!

С уважением Юлия Гусарь

Подписаться на рассылку

Читайте также:

comments powered by HyperComments

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_bye.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_good.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_negative.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_scratch.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_wacko.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_yahoo.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_cool.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_heart.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_rose.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_smile.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_whistle3.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_yes.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_cry.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_mail.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_sad.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_unsure.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_wink.gif