Как встроить ленту группы Facebook в WordPress

Хотите встроить посты из группы Facebook на свой сайт WordPress?

Продвижение вашей группы Facebook на вашем сайте WordPress — отличный способ привлечь больше внимания и увеличить количество подписчиков. Контент из вашей группы также может помочь сохранить актуальность вашего сайта даже для постоянных посетителей.

В этой статье мы покажем вам, как легко добавить ленту группы Facebook в WordPress.

Зачем добавлять контент группы Facebook на свой сайт WordPress?

Группы Facebook могут помочь вам создать сообщество, создать чувство лояльности и построить позитивные отношения с вашими пользователями. После того, как они присоединятся к вашей группе, вы можете продвигать сообщения в блогах, обновления компании или даже продукты WooCommerce для этих людей, не тратя денег на онлайн-рекламу.

Наша группа WPBeginner Engage в Facebook насчитывает более 89 тысяч активных пользователей и растет невероятными темпами.

После создания группы в Facebook вы захотите продвигать эту группу и привлекать к ней людей. Лучший способ расширить свою группу Facebook — встроить ленту группы на свой веб-сайт WordPress.

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

После встраивания групповой ленты на ваш сайт новые сообщения будут появляться на вашем сайте автоматически. Это упрощает обновление вашего сайта даже для постоянных посетителей.

Имея это в виду, давайте посмотрим, как встроить ленту группы Facebook в WordPress.

Как установить пользовательский плагин Facebook Feed

Лучший способ встроить канал группы Facebook в WordPress — использовать плагин Smash Balloon Custom Facebook Feed.

Этот плагин позволяет встраивать альбомы Facebook, комментарии, обзоры, сообщения сообщества и многое другое на ваш сайт WordPress.

Если вы встраиваете видео в WordPress, то Smash Balloon позволяет пользователям смотреть эти медиафайлы без посещения Facebook, открывая всплывающее окно с лайтбоксом прямо на вашем веб-сайте.

В этом руководстве мы будем использовать профессиональную версию Smash Balloon, поскольку она позволяет отображать альбомы, видео и фотографии Facebook на вашем веб-сайте WordPress. Тем не менее, есть также бесплатная версия, которая позволяет легко встраивать посты о статусе Facebook в WordPress, независимо от вашего бюджета.

Первое, что вам нужно сделать, это установить и активировать плагин Smash Balloon Custom Facebook Feed. Для получения дополнительной информации см. Наше руководство по установке плагина WordPress.

После активации вам нужно будет перейти в Facebook Feed »Настройки и ввести свой лицензионный ключ в поле «Лицензионный ключ».

Вы найдете эту информацию в своей учетной записи на веб-сайте Smash Balloon.

После ввода ключа нажмите на кнопку «Активировать».

Как добавить приложение Smash Balloon в свою группу на Facebook

После этого вам нужно будет добавить приложение Facebook Smash Balloon в группу Facebook, которую вы хотите показать на своем веб-сайте WordPress.

Примечание. Из-за того, как настроен API Facebook, Smash Balloon может отображать только публикации, сделанные после того, как вы добавили приложение в свою группу Facebook.

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

Затем в меню слева нажмите «Настройки группы».

После этого прокрутите до раздела «Управление дополнительными настройками».

Здесь нажмите на значок карандаша рядом с «Приложения».

Откроется всплывающее окно со всеми приложениями, которые вы уже добавили в эту группу.

Поскольку мы хотим установить приложение Smash Balloon, нажмите «Добавить приложения».

В строке поиска введите «Smash Balloon WordPress».

Когда появится нужное приложение, щелкните по нему.

Теперь появится всплывающее окно, показывающее всю информацию, к которой может получить доступ приложение, и любые действия, которые оно может выполнять.

Если вы готовы установить приложение, нажмите «Добавить».

Через несколько секунд вы должны увидеть сообщение о том, что вы успешно добавили приложение Smash Balloon в свою группу Facebook.

Подключите Smash Balloon к своей группе в Facebook

Теперь пришло время подключить вашу страницу Facebook к WordPress, перейдя в Лента Facebook »Все каналы и нажав «Добавить новую».

Smash Balloon позволяет показывать фотографии, события, видео, альбомы и многое другое.

Поскольку мы хотим встроить ленту нашей группы Facebook, нажмите «Временная шкала», а затем выберите «Далее».

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

Чтобы начать, нажмите «Добавить новый».

На следующем экране выберите переключатель рядом с «Группа».

После этого просто нажмите «Подключиться к Facebook».

Откроется всплывающее окно, в котором вы можете войти в свою учетную запись Facebook и выбрать группу, которую хотите использовать.

Установив флажок рядом с одной или несколькими группами, просто нажмите «Далее».

Теперь вы должны увидеть всплывающее окно с просьбой установить приложение Smash Balloon WordPress.

Поскольку мы уже установили это приложение, вы можете продолжить и нажать «Готово».

Как создать ленту группы Facebook в WordPress

Теперь, когда вы добавили свою группу Facebook в Smash Balloon, она появится в качестве опции. Просто нажмите, чтобы выбрать группу, а затем нажмите «Далее».

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

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

Мы используем шаблон «Простая кладка», но вы можете выбрать любой шаблон.

Теперь Smash Balloon создаст ленту на основе вашей группы Facebook и выбранного вами шаблона.

Это хорошее начало, но у Smash Balloon есть множество настроек, которые вы можете использовать для настройки того, как эта групповая лента будет выглядеть в вашем блоге WordPress.

Как настроить ленту вашей группы Facebook

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

На экране Facebook Feed » All Feeds найдите свою групповую ленту и нажмите кнопку «Изменить», которая выглядит как маленький карандаш.

Откроется редактор ленты Smash Balloon, в котором справа отображается предварительный просмотр ленты вашей группы Facebook.

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

Если вы хотите изменить используемый шаблон, просто нажмите «Шаблон».

Затем выберите кнопку «Изменить».

Для начала вы можете изменить способ отображения сообщений вашей группы, нажав «Макет ленты».

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

По умолчанию в ленте группы Facebook отображается разное количество сообщений на настольных компьютерах и мобильных устройствах.

Вы можете предварительно просмотреть, как ваша лента будет выглядеть на настольных компьютерах, планшетах и ​​смартфонах, с помощью ряда кнопок в правом верхнем углу.

После тестирования мобильной версии вашего веб-сайта WordPress вы можете изменить количество сообщений, отображаемых на смартфонах и планшетах.

Чтобы внести это изменение, просто найдите раздел «Количество сообщений» и введите другое число в поле «Мобильный».

Вы также можете отображать меньше столбцов на смартфонах и планшетах, изменив настройки «Столбцы».

Например, на следующем изображении мы разбиваем содержимое на 3 столбца на компьютере, 2 столбца на планшетах и ​​1 столбец на мобильных устройствах.

Если вы довольны макетом, нажмите ссылку «Настроить».

Это вернет вас к основному редактору Smash Balloon, где вы сможете перейти к следующему экрану настроек, который называется «Цветовая схема».

По умолчанию Smash Balloon использует ту же цветовую схему, что и ваша тема WordPress, но на этом экране вы можете переключиться на «Светлую» или «Темную» цветовую схему.

Другой вариант — создать собственную цветовую схему, выбрав «Пользовательский», а затем с помощью элементов управления изменить цвет фона, изменить цвет текста в WordPress и многое другое.

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

Чтобы добавить раздел заголовка, нажмите «Заголовок» в меню слева.

На этом экране щелкните ползунок «Включить», чтобы изменить его цвет с серого на синий.

После добавления раздела заголовка вы можете использовать элементы управления, чтобы изменить размер заголовка и его цвет, скрыть или показать изображение своего профиля Facebook и многое другое.

Если вы хотите удалить заголовок в любой момент, просто нажмите, чтобы отключить переключатель «Включить».

После этого вы можете изменить внешний вид отдельных сообщений в ленте вашей группы, выбрав «Стиль сообщения» в меню слева.

После этого снова нажмите «Стиль публикации».

На этом экране вы можете выбрать между обычным и коробочным макетом.

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

Если вы выберете «Обычный», вы сможете изменить толщину и цвет линии, разделяющей ваши сообщения в социальных сетях.

На следующем изображении мы добавили более толстую линию к ленте группы и изменили ее цвет.

Вы также можете настроить отдельные части каждого поста, вернувшись на главный экран настроек.

Еще раз выберите «Стиль публикации», но на этот раз вместо этого выберите «Редактировать отдельные элементы».

Теперь вы увидите весь различный контент, который Smash Balloon включает в каждую публикацию, например, автора публикации, дату, поле общей ссылки и многое другое.

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

Вы также можете настроить внешний вид каждого типа контента, нажав на него.

Например, на следующем изображении вы можете увидеть настройки для изменения размера и цвета ссылок «пост-действия», таких как «Нравится», «Поделиться» и «Комментировать».

Вы также можете изменить текст «Просмотр на Facebook», введя текст в поле «Настроить текст».

По умолчанию Smash Balloon не добавляет кнопку «Нравится» Facebook в вашу ленту. Эта кнопка упрощает присоединение посетителей к вашей группе, поэтому вы можете добавить ее в свою ленту, выбрав настройки «Мне нравится».

Затем просто нажмите «Включить», чтобы переключатель стал синим.

Теперь вы можете использовать раскрывающийся список «Позиция», чтобы добавить поле «Мне нравится» ниже или выше ленты группы.

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

Чтобы побудить больше людей присоединиться к вашей группе, вы можете показать общее количество подписчиков, щелкнув переключатель «Показать поклонников».

Когда вы довольны тем, как настроена кнопка «Нравится», вы можете перейти к настройкам «Загрузить больше кнопки».

Кнопка «Загрузить еще» дает посетителям простой способ прокрутить больше вашего фида. Если им понравится этот контент, они могут захотеть присоединиться к вашей группе в Facebook.

Имея это в виду, вы можете выделить эту кнопку, изменив цвет ее фона, состояние наведения и цвет текста.

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

Smash Balloon имеет функцию лайтбокса, которая позволяет посетителям смотреть видео вашей группы и более внимательно рассматривать ваши фотографии, не выходя из WordPress.

Посетители могут просто щелкнуть миниатюру любого видео или фотографии, чтобы открыть всплывающее окно лайтбокса.

Затем они могут прокручивать остальные изображения и видео в ленте с помощью стрелок.

Чтобы настроить лайтбокс по умолчанию, просто выберите «Лайтбокс» в меню слева.

Здесь вы можете изменить цвет текста, ссылок и фона лайтбокса.

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

Если вы хотите, чтобы ваша группа Facebook привлекала больше посетителей, вы можете отключить функцию лайтбокса. Для этого просто нажмите на переключатель «Включить», чтобы он сменил цвет с синего на серый.

Теперь, если посетитель нажмет на любую фотографию или видео в ленте группы, он попадет в вашу группу Facebook на новой вкладке.

Когда вы будете довольны тем, как выглядит лента группы Facebook, не забудьте нажать «Сохранить», чтобы сохранить изменения.

Теперь вы готовы добавить этот канал на свой веб-сайт WordPress.

Как встроить ленту вашей группы Facebook в WordPress

Вы можете добавить ленту своей группы Facebook в WordPress с помощью блока, виджета или шорткода.

Если вы создали более одного канала с помощью Smash Balloon, вам необходимо знать код канала, если вы собираетесь использовать блок или виджет.

Чтобы получить эту информацию, перейдите в Facebook Feed » All Feeds , а затем посмотрите на feed="" часть шорткода. Вам нужно будет добавить этот код в блок или виджет, так что запишите его.

На следующем изображении нам нужно использовать feed="1" .

Если вы хотите встроить ленту своей группы Facebook на страницу или в сообщение, вы можете использовать блок «Пользовательская лента Facebook».

Просто откройте страницу или публикацию, куда вы хотите встроить ленту Facebook. Затем нажмите значок «+», чтобы добавить новый блок, и начните вводить «Пользовательская лента Facebook».

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

По умолчанию в блоке будет отображаться один из ваших каналов Smash Balloon. Если это не лента вашей группы Facebook, найдите раздел «Настройки короткого кода» в меню справа.

Теперь вы можете добавить код feed="" и нажать "Применить изменения".

После этого просто опубликуйте или обновите страницу, чтобы лента группы работала на вашем веб-сайте.

Другой вариант — добавить ленту в любую область, готовую для виджетов, например на боковую панель или аналогичный раздел. Это позволяет посетителям видеть вашу групповую ленту независимо от того, где они находятся на вашем сайте.

Чтобы начать, просто перейдите в « Внешний вид» «Виджеты» на панели инструментов WordPress и нажмите синюю кнопку «+».

Сделав это, начните вводить «Пользовательская лента Facebook» в строке поиска.

Когда появится нужный виджет, перетащите его туда, где вы хотите показать ленту.

Виджет покажет один из каналов, созданных вами с помощью Smash Balloon.

Если это не лента вашей группы Facebook, введите код ленты в поле «Настройки короткого кода». Затем нажмите «Применить изменения».

Теперь вы можете нажать кнопку «Обновить», чтобы активировать виджет. Для получения дополнительной информации см. наше полное руководство о том, как добавлять и использовать виджеты в WordPress.

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

Просто перейдите в Лента Facebook » Все ленты и скопируйте весь код в столбец «Шорткод». Теперь вы можете добавить этот код в любой блок шорткода.

Для получения дополнительной информации ознакомьтесь с нашим подробным руководством о том, как добавить шорткод в WordPress.

Примечание. Если вы используете тему с поддержкой блоков, вы можете использовать полнофункциональный редактор сайта, чтобы добавить блок «Пользовательская лента Facebook» в любом месте вашего сайта.

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

Если вам понравилась эта статья, подпишитесь на наш канал YouTube для видеоуроков по WordPress. Вы также можете найти нас в Twitter и Facebook.

Сообщение «Как встроить ленту группы Facebook в WordPress» впервые появилось на WPBeginner.