Курс по Wordpress

Виджет группы Facebook на сайт WordPress

widget-gruppy-facebook Разработка сайта

Здравствуйте, дорогие читатели моего сайта. Данная статья будет короткая, но от этого не менее информативная. В статье разберем зачем нужен данный виджет и как его установить на сайт. Вперед)

Зачем нужен виджет группы фейсбука на сайте.

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

Как установить виджет группы Facebook’а на сайт на WordPress.

1. Сначала нам нужно этот виджет сгенерировать, точнее сгенерировать код виджета. Для этого идем сюда https://developers.facebook.com/docs/plugins/page-plugin Хотя тут все по английски, но все довольно просто.

*Сейчас вид виджета обновили, сделали его более красивым. Раньше он отображался немного по другому.

Спускаемся немного ниже и видим настройки виджета.

Настройки виджета Facebook

1.1 Сюда вставляем ссылку на нашу группу в фейсбуке.

Хотите научиться делать сайты?
Чтобы сэкономить на разработке или зарабатывать деньги создавая сайты для других? Недавно я записал новый курс "Идеальный сайт на Wordpress" и "Лендинг в Elementor", где рассказал пошаговый план как создавать крутые сайты. Разработкой занимаюсь более 7-ми лет, на сайтах зарабатываю более 50 тысяч в месяц и в курсе я выложил всю технологию как делать такие сайты. Подробнее читайте по ссылке.

1.2 Прописываем ширину. В моем случае это 310 пикселей

1.3 Тут нужно прописать высоту виджета. Она зависит от того, захотите вы в виджете отображать записи вашей группы (п.1.5). Я поставил 350 пикселей.

1.4 Скрыть/показать шапку группы. Я оставлю, так красивее выглядит

1.5 Показывать посты группы или нет. Я выберу показывать, я думаю это лучше завлекает посетителей в группу.

1.6 Показывать профили людей, которые состоят в группе или нет. Я тоже оставляю, потому что если посетитель увидит знакомого в данной группе, то шанс что он как минимум перейдет и посмотрит что там в группе очень велик. Ну а если нет знакомых в группе, то все равно эта функция будет работать вам на пользу, показывать что группу смотрят другие люди, что она чем-то интересна.

Вот как заполнил я.

Настройки виджета Facebook2

Заполнили? Нажимаем на кнопку «Get code» (получить код) и видим два окна с кодом. Эти коды нужно поставить в два разных места.

2. Верхнюю часть кода мы установим в файл footer.php

Путь файла домен_сайта/public_html/wp-content/themes/название_вашей_темы/footer.php

У вас может не быть папки public_html или она может называться как то по другому Docs или как-нибудь еще. Это особенности хостинга, которым вы пользуетесь.

Подключаемся к хостингу. Я это делаю через FileZilla и скачиваем файл на компьютер.

Открываем его с помощью, желательно NotePad++ и вставляем верхнюю часть кода. Вставлять код нужно в конце, перед закрывающимся тегом </body>

Код виджета Facebook

Вставили? Нажимаем сохранить и обновляем файл на хостинге.

Так, с первой частью кода разобрались)

4. Теперь копируем нижнюю часть кода и идем в админку сайта нашего/Внешний вид/Виджеты/ И перетаскиваем виджет «Текст» в наш сайдбар. Вставляем наш скопированный код. Можем написать заголовок и жмакаем «Сохранить».

Код виджета Фейсбук

На этом всё) Идем проверять на сайт. Вот что видим. Поставленная задача выполнена.

Виджет фейсбука готов!)

*Важный момент — если вы устанавливаете виджет не на свой сайт, а как, например, фрилансер на сайт заказчика, то пусть ваш заказчик через свой профиль в фейсбуке сгенерирует данный код и вам вышлет. Это нужно для того, чтобы виджет был завязан на app id того человека, кому принадлежит группа.

На этом все. Пишите в комментариях получилось ли у вас поставить виджет группы фейсбука на свой сайт на WordPress или нет. Какие были трудности и вообще все что хотите пишите в комментариях) Такие дела) Все. До связи!)

Заказать сайт
Поделитесь в соцсетях? Благодарю ✌
Илья Чигарев

Привет. Меня зовут Илья и я автор блога. Люблю путешествия, веб-дизайн и компьютерные игры. Всегда рад новым знакомствам. Веду блог, где рассказываю все секреты и фишки, которые мне принесли результат в онлайн маркетинге.

Оцените автора
( 2 оценки, среднее 5 из 5 )
Добавить комментарий

Отправляя данную форму вы соглашаетесь с политикой конфиденциальности сайта

  1. Инна

    Это годится только для сообщества или страницы. А как установить такой же для группы?

    Ответить
    1. Илья Чигарев автор

      Здравствуйте. В фейсбуке в плане виджетов многое поменялось. Я сейчас искал и действительно не нашел виджета для групп. На странице плагина написано, что для групп он не предназначен(скрин https://yadi.sk/i/pw5CPEdnh274H )

      Если что изменится в этом плане в фейсбуке, сделаю дополнение в статье.

      Ответить
  2. Олеся

    Первый код обязательно ставить именно в футер?

    Ответить
    1. Илья Чигарев автор

      Так рекомендует сам фейсбук. «Include the JavaScript SDK on your page once, ideally right after the opening tag body» — что означает «Подключите ДжаваСкрипт на странице один раз, в идеале сразу после открытия тега body».

      Ответить
  3. Bowman

    Elenen, если вы пользуетесь какой то cms, то копируется содержимое обоих окошек в окно редактора сообщения или в виджет «текст» Facebook действительно не дает сделать виджет группы, только публичной страницы

    Ответить
    1. Елена

      Bowman, вот спасибо, добрый человек! Скопировала оба кода в виджет «текст» — получилось! Ура!

      Ответить
  4. Дмитрий

    Исправьте что речь идет про виджет не для групп, как Вы пишете в статье а для страниц.
    На попытку ввода адреса группы — фейсбук выдает ошибку…

    Ответить
  5. Имя

    Elenen, если вы пользуетесь какой то cms, то копируется содержимое обоих окошек в окно редактора сообщения или в виджет «текст» Facebook действительно не дает сделать виджет группы, только публичной страницы

    Ответить
  6. Deadpool

    При этом к группе можно добавить нескольких администраторов. Для этого достаточно зайти на страницу настроек и в администрируемых приложениях для нужного выбрать пункт Редактировать . Далее во вкладке Руководство добавить нужного человека.

    Ответить
  7. Маргарита

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

    Ответить
    1. Илья Чигарев автор

      Маргарита вы знаете где файлы вашего шаблона находятся? Я написал путь, который у меня на сайте ichigarev.ru/public_html/wp-content/themes/название_вашей_темы/footer.php

      У вас возможно он будет немного другим. Нужно сначала найти этот файл footer.php

      Ответить
  8. Вячеслав

    Илья спасибо за инф-ию.
    Тема со scroll-ми в виджете считаете приемлема в нынешнее время?

    Ответить
    1. Илья Чигарев автор

      Вячеслав, не понял, про какие скроллы речь?

      Ответить
  9. Ирина

    Илья, спасибо вам за статью! Вы очень помогли. Все легко и понятно объяснили.

    Ответить
    1. Илья Чигарев автор

      Пожалуйста)

      Ответить
  10. Елена

    Илья, проблема с 1-м кодом решилась. Спасибо вам за полезные статьи!

    Ответить
  11. Бахтиёр

    Спасибо Огроменное),
    все работает.

    Ответить

Получите крутые бонусы бесплатно!

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: