Как отобразить календарь событий Facebook на вашем веб-сайте WordPress

Опубликовано: 2024-03-01

Вы ищете простые способы отобразить календарь событий Facebook на своем веб-сайте?

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

Но встроить календарь событий Facebook на свой сайт может быть сложно.

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

  • Отображение событий с помощью виджета плагина страницы Facebook
  • Встраивайте события Facebook с помощью плагина WordPress

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

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

Зачем встраивать события Facebook на свой сайт?

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

На самом деле, вот еще несколько веских причин встроить события Facebook на свой сайт.

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

Отображение событий с помощью виджета плагина страницы Facebook

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

Недостатком является то, что этот метод предполагает копирование и вставку фрагментов кода в WordPress. Кроме того, у вас нет специальной группы поддержки, которая вам поможет.

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

Шаг 1. Используйте инструмент генератора кода плагина страницы Facebook.

Первым шагом в добавлении виджета календаря событий Facebook на ваш веб-сайт является посещение инструмента генератора кода плагина страницы здесь.

Затем введите URL-адрес своей страницы Facebook и в поле «Вкладки » удалите «хронику» и введите «события», как вы можете видеть ниже:

Генератор кода страницы Facebook

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

Предварительный просмотр генератора кода событий

После того, как вы ввели данные своей страницы, нажмите кнопку «Получить код» .

Шаг 2. Создайте код события Facebook

В верхней части поля кода вы можете выбрать JavaScript или iFrame.

В этом примере выберите параметр iFrame и скопируйте весь код в поле.

Код событий IFrame Facebook

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

Шаг 3. Вставьте код события Facebook на свой сайт.

Следующий шаг — встроить код события Facebook на свой сайт.

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

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

Для начала перейдите в меню «Внешний вид» — «Виджеты» в панели администратора WordPress.

открыть страницу виджетов

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

В этом уроке мы воспользуемся боковой панелью.

выберите пример боковой панели

После этого нажмите значок плюса (+) , чтобы добавить новый виджет на свой сайт.

Затем выберите виджет «Пользовательский HTML» из вариантов.

добавить собственный виджет блока HTML

Наконец, вставьте ранее полученный код iFrame в новый виджет.

вставить HTML-код Facebook

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

Виджет событий Facebook

В нашем примере мы изменили ширину кода iFrame в плагине страницы Facebook, чтобы виджет лучше соответствовал нашей боковой панели.

Отображение событий Facebook с помощью плагина WordPress [Лучший способ]

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

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

И вариант ставки, который вы можете использовать, — это плагин Facebook Feed Pro.

персонализированная домашняя страница Facebook Feed Pro

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

Помимо отображения событий Facebook на вашем сайте, этот плагин WordPress для ленты Facebook имеет следующие функции:

  • Отображайте на своем сайте несколько типов каналов Facebook, включая публикации Facebook, фотографии, видеоканалы и многое другое.
  • Управляйте информацией, отображаемой в ваших лентах, например заголовками, датами, описаниями и т. д.
  • Легко управляйте и отображайте несколько каналов учетных записей Facebook на одном веб-сайте.
  • Полностью настройте внешний вид своего канала с помощью шаблонов макетов, таких как слайдер Facebook и параметры стиля, соответствующие брендингу вашего веб-сайта.
  • Поддерживает множество типов каналов, поэтому вы можете создать канал альбома, видеоканал, канал группы Facebook и многое другое.
  • Красиво отображайте свои каналы на мобильных устройствах благодаря удобному для мобильных устройств дизайну.
  • Покажите отзывы Facebook на своем веб-сайте, чтобы создать социальное доказательство и увеличить продажи вашего бизнеса.
  • И многое другое!

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

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

Хотите вместо этого текстовое руководство? Ниже мы рассмотрим пошаговое руководство по встраиванию событий Facebook!

Шаг 1. Загрузите и установите Facebook Feed Pro

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

Если вам нужна помощь в этом, просто посмотрите наше пошаговое руководство по установке плагина WordPress.

Шаг 2. Создайте календарь событий Facebook

После того как вы установили и активировали плагин на своем сайте, перейдите в меню «Лента Facebook » Все каналы» на панели управления .

Чтобы начать создавать календарь событий Facebook, нажмите «Добавить новый» .

добавить новый канал с помощью пользовательского канала Facebook Pro

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

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

выберите тип ленты событий Facebook

Шаг 3. Подключитесь к своей странице или группе в Facebook.

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

Для этого нажмите кнопку «Добавить новый» .

добавить новый источник для ленты Facebook

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

Ниже мы покажем вам, как получить все три из них.

добавить источник событий Facebook

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

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

Facebook скопируйте идентификатор своей страницы

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

Следующий шаг — получить токен доступа к событиям .

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

Чтобы получить URL-адрес iCal, откройте свою домашнюю страницу Facebook и убедитесь, что вы вошли в систему под своей страницей Facebook.

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

открытые мероприятия в Facebook

Теперь нажмите кнопку «Ваши события» слева, чтобы отобразить запланированные вами активные мероприятия.

Все, что вам нужно сделать сейчас, это скопировать URL-адрес кнопки «Добавить в календарь» в правом верхнем углу.

После этого вернитесь на свой веб-сайт и введите идентификатор своей страницы, токен доступа к событиям и URL-адрес iCal.

Наконец, нажмите кнопку «Добавить источник» ниже.

facebook enter details for your source

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

Чтобы продолжить, вы можете просто выбрать вновь добавленный источник и нажать «Далее».

выбрать источник событий канал Facebook

Шаг 4. Настройте календарь событий Facebook

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

У вас есть 5 различных тем Facebook на выбор:

  • По умолчанию
  • Современный
  • Социальная стена
  • Контур
  • Перекрывать

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

выберите тему Facebook

Далее плагин позволит вам выбирать между 7 различными шаблонами каналов. Каждый из этих шаблонов имеет уникальный макет, который вы можете импортировать:

  • По умолчанию
  • Одиночная кладка
  • Виджет
  • Большая сетка
  • Последний альбом
  • Витрина-карусель
  • Простая карусель

Просто выберите шаблон и нажмите кнопку «Далее» .

импортировать шаблон Facebook

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

редактор ленты событий Facebook в прямом эфире

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

Сначала выберите параметр «Макет ленты» слева.

выберите вариант макета ленты Live Editor в Facebook

Для календаря событий у вас есть три разных макета: список, кладка и карусель .

варианты макета ленты событий Facebook

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

Макет списка для календаря событий Facebook

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

отображать события Facebook на веб-сайте с помощью каменной кладки

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

Макет карусели для событий в ленте Facebook

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

вернуться к параметрам настройки

Затем вы можете выбрать цветовую схему для своей ленты Facebook. Для этого выберите опцию «Цветовая схема» слева.

Вариант цветовой схемы Live Editor Facebook

Теперь вы можете выбрать один из 4 различных вариантов цвета ленты.

выбрать вариант цветовой схемы, живой редактор Facebook
  • Наследовать от темы: скопируйте цветовую схему вашего сайта.
  • Светлый: используйте светлый фон с темным текстом.
  • Темный: сделайте фон темным, добавив светлый текст.
  • Пользовательский: введите все цвета самостоятельно.
пользовательская цветовая схема для вашего календаря событий Facebook

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

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

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

Шаг 5. Отобразите календарь событий Facebook

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

Вставьте календарь событий Facebook на свои страницы

Как встроить события Facebook в WordPress? Чтобы опубликовать календарь событий Facebook на своей странице WordPress, сначала нажмите кнопку «Встроить» в правом верхнем углу живого редактора.

нажмите кнопку встроить Facebook

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

добавить ленту Facebook на страницу

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

выбрать страницу для ленты Facebook

Теперь плагин отправит вас на страницу, которую вы только что выбрали.

На этой странице нажмите маленький значок плюса (+) и выберите виджет «Пользовательская лента Facebook» в раскрывающемся меню, чтобы добавить календарь событий Facebook.

добавить блок пользовательского канала Facebook

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

пример календаря событий Facebook

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

Теперь давайте посмотрим, как можно разместить виджет событий Facebook на своем веб-сайте.

Отображение календаря событий Facebook на боковой панели или в нижнем колонтитуле

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

Чтобы начать, вам сначала нужно открыть свой канал в живом редакторе.

Перейдите в меню «Лента Facebook» на панели управления WordPress, и вы увидите список всех своих каналов Facebook.

В этом списке нажмите на ленту событий Facebook.

открыть ленту событий для редактирования

Теперь вы вернетесь в живой редактор. Здесь просто нажмите кнопку «Встроить» вверху.

нажмите кнопку встроить Facebook

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

добавить ленту событий Facebook в качестве виджета

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

В списке всех опций просто нажмите «Боковая панель» .

выбрать боковую панель для виджета

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

выбрать нижний колонтитул для виджета Facebook

На данный момент мы разместим виджет событий Facebook на боковой панели.

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

Там вы можете нажать на значок плюса (+) , чтобы добавить новый виджет.

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

выбрать собственный виджет Facebook Feed Pro

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

календарь событий на боковой панели

Вот и все!

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

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

Готовы встроить календарь событий? Начните работу с Custom Facebook Feed Pro прямо сейчас!

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

Пока вы здесь, вы также можете просмотреть этот пост о том, как встроить свой канал YouTube в Elementor.

Комментарии 5

  1. минна валлин 2 года назад

    Здравствуйте, у меня возникла проблема... с недавнего времени... Я обновил, и предстоящие события вернулись... но прошлые события не отображаются?? это короткий код, который мне следует изменить или что?? пожалуйста помогите, нам это нужно.
    СПАСИБО Минна Валлин
    https://reimersholmehotel.se/evenemang/
    шорткод для прошлых событий, я использую это..
    [custom-facebook-feed type=events Pastevents=true]

    Отвечать
    1. Лианна Ларойя 2 года назад

      Привет Минна,

      Я вижу, что вы уже обратились и получили поддержку через нашу команду.

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

      Если у вас есть лицензия Smash Balloon, у вас есть доступ к нашей приоритетной поддержке по электронной почте, поэтому отправьте заявку в службу поддержки здесь: https://smashballoon.com/custom-facebook-feed/support/

      В противном случае мы предоставляем бесплатную поддержку на форуме ленты социальных сообщений Smash Balloon: https://wordpress.org/support/plugin/custom-facebook-feed/

      Надеюсь это поможет!

      Отвечать
  2. Иветт 2 года назад

    Привет, это сработает, если я хочу кормить из нескольких групп? Я владелец всех групп. Они привязаны к местоположению, поэтому я хотел бы объединить события всех этих групп на одном веб-сайте. Спасибо!

    Отвечать
  3. Билли Вуд 2 года назад

    Ваши генераторы кода не отображают мои события… Что мне нужно делать? Я пробовал iframe, а также метод javascript. Я использую godaddy. Кажется, iframe — лучший выбор, но события не отображаются! Отобразится временная шкала. Пожалуйста помоги. Ответьте здесь, чтобы помочь другим тоже, пожалуйста.

    Отвечать
    1. Мануэль Эскобар 2 года назад

      Привет, Билли,

      Благодарим Вас за обращение к нам! Извините за длительную задержку с нашим ответом; ваш комментарий пропал из нашего поля зрения. Это может произойти, если ваш токен доступа к событиям настроен неправильно. Для этого вам необходимо следовать этому руководству. Если у вас есть другие вопросы, свяжитесь с нами, используя форму поддержки здесь https://smashballoon.com/support/.

      Спасибо!

      Отвечать