Виджет: Facebook like box или Facebook Нравится

Здравствуйте, сегодня поговорим о том, как добавить в сайдбар популярный виджет от социальной сети Facebook — Facebook like box с кнопкой «Нравится» (виджет страницы, «группы» Facebook).

Скачать исходники для статьи можно ниже

Как будет выглядеть данный виджет:

виджет группы facebook

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

виджет от Facebook

Давайте же приступим к созданию данного виджета для своего сайта:

1. Первое, что нам нужно сделать — это зарегистрироваться на Facebook.

Думаю ничего сложно в данном пункте нет.

2. Создать страницу для своего сайта.

Вот здесь уже посложнее.

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

Переходим на главную страницу своего акаунта на Facebook — для этого в правом верхнем углу нажимаем на ссылку «Главная»:

создаем страницу сайта на Facebook

После слева выбираем пункт «Создать страницу»:

facebook like виджет на сайт

создаем виджет группы на Facebook для сайта

Здесь выбираете тематику, особой роли она не имеет, для сайта можно выбрать «Общая идея или сообщество» — нажимаем на нее:

виджет на сайт от facebook

Заполняем название сообщества, ставим галочку на против «Я принимаю условия…» и жмем на кнопку «Начало работы».

Далее появится следующее окошко:

видежт от facebook на сайт

Следующим шагом добавляете фото.

После вам предлагают разрекламировать вашу станичку (сообщество), а также добавить форму оплаты — здесь жмем «Пропустить»:

виджет Facebook на сайт

После нажатия кнопки нам покажут нашу готовую страничку:

страничка сообщества на facebook

Теперь нам нужно узнать ее url — его мы введем в конструкторе виджета «Мне нравится от Facebook», о котором расскажу ниже.

Для этого опять переходим на главную страницу нашего акаунта на Facebook:

создаем страницу сайта на Facebook

И слева жмем на нашу созданную страничку (выше мы назвали ее Mnogoblog.ru):

как создать виджет для сайта от Facebook Нравится

Заходим в нее и смотрел ее url в адресной строке браузера — должно быть что-то наподобие следующего:

https://www.facebook.com/pages/Mnogoblogru/129744797229565

Запоминаем его или записываем (или копируем в бувер).

И переходим к следующему шагу.

3. Заходим на страницу конструктора виджета Facebook — Like Box (Нравится или поделиться):

http://developers.facebook.com/docs/reference/plugins/like-box/

Вот так будет выглядеть данная страница:

конструктор виджета Нравится от facebook

Все теперь — в пункт «Facebook Page URL» вставляем url созданной нами выше странички, в данном примере — https://www.facebook.com/pages/Mnogoblogru/129744797229565

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

После жмем на кнопку «Get Code» (Получить код).

виджит Facebook

После появиться следующее окошко:

вставка кода для виджета facebook на сайт

Здесь вам предлагаю код для вставки созданного виджета Facebook на сайт — самый простой способ — это IFRAME вставка, так что жмем на нее:

IFRAME вставка на ваш сайт виджета facebook

Копируем код и вставляем в сайдбар (текстовой виджет для wordpress) на своем сайте.

Для сайтов на wordpress — заходим в панель управления своим сайтом, в левом меню выбираем пункт «Внешний вид» и его подпункт «Виджеты», ищем виджет с названием «Текст» и перетаскиваем его в сайдбар — в него вставляем код созданного нами виджета на Facebook-е.

вставляем виджет от Facebook  в сайдбар

Вот и все готово!!!

Введите свой email адрес для того, чтобы подписаться на мой блог:


knopkisoc

Виджет: Facebook like box или Facebook Нравится: 10 комментариев

  1. Василий Чёрный

    Многие из нас бывали в такой ситуации, когда приходилось создавать отличный адаптивный сайт для клиента, и затем убивать коробку фэйсбука для маленьких устройств, чтобы не мешал. Согласитесь, что это отстойно. В одной из прошлых статей я писал о способе адаптации Instagram под мобильные устройства. Настало время, познакомить вас с способом адаптации facebook likebox iframe при помощи jQuery.

    http://aterr.net/adaptivnyj-facebook-likebox/

  2. Pasekavod

    Спасибо! поставил. Даже на сайт не на вордпресс, до этого столько читал и так было запутано, а тут все просто.

  3. Инна

    Доброго времени суток! Решила сказать вам огромное спасибо за информацию. Очень доступно изложен материал, благодаря вам у меня получилось установить виджет фейсбука у себя на сайте. Перерыла кучу блогов, везде одно и то же и только читая вашу статью я поняла свою ошибку. Благодарю!!!

  4. Diobra

    есть возможность поменять цвет текста? название самой группы синего цвета… и фон синий… в итоге текст не видно
    и надпись внизу как-то можно удалить? — социальный плагин Facebook

  5. Алексей

    Спасибо! Ваша статья очень помогла. Проблема в неотображении самого модуля. Она оказывается решалась тем, что модуль отображается если у вас страница, а не группа. Тогда и url работает. Еще раз спасибо автору!

Добавить комментарий для Инна Отменить ответ

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