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

Когда и зачем стоит создавать свой Facebook Feed на сайте

Facebook — одна из крупнейших социальных платформ в мире. Если у вас есть страница или группа, вы можете использовать её для общения с аудиторией, публикации новостей и продвижения контента. Однако посты, которые вы выкладываете на Фейсбуке, не видны на вашем сайте. Добавив фид Facebook на сайт, вы:

• показываете свежие посты прямо на страницах WordPress;
• увеличиваете вовлечённость и количество подписчиков;
• экономите время — обновления появляются автоматически;
• можете оформить блок фида в стиле вашего сайта.

Давайте же посмотрим как все это можно сделать.

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

Подключение фида

Для начала необходимо установить плагин, который будет выводить ленту. Перейдите в раздел Plugins → Add New и введите в поиске «Smash Balloon». Установите и активируйте плагин Smash Balloon Social Post Feed. После активации плагин предложит пройти мастер настройки (setup wizard), который помогает быстро подключить аккаунт и включить нужные функции.

На первом этапе необходимо подключить свой Facebook-аккаунт. Для этого нажмите Add New, затем Connect to Facebook, авторизуйтесь через свою учётную запись и предоставьте доступ к выбранной странице или группе. Доступ не даёт плагину права управлять вашими страницами — он нужен только для того, чтобы получить список страниц и загрузить их публичный контент через API. Если у вас уже есть готовый API Access Token, можно воспользоваться ссылкой Add Account Manually, чтобы добавить данные вручную.

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

• Facebook User Feed — основная функция, которая позволяет создавать и отображать ленты с подключённых страниц и групп.
• Downtime Prevention — защита от простоев: если по какой-то причине фид не может обновиться, на сайте всё равно будет отображаться сохранённая версия ленты.
• Localization — выбор языка интерфейса встроенных элементов, которые предоставляет Facebook. По умолчанию стоит English (US).
• Social Feed Collection — предложение установить плагины для Instagram, Twitter, YouTube и TikTok, чтобы добавить ленты с других платформ.
• Customer Reviews Plugin — дополнительный модуль для отображения отзывов с Google или Yelp, который помогает повышать доверие посетителей.

На финальном экране плагин показывает обзор подключённых аккаунтов и активированных функций.

Если вы приобрели лицензию, здесь же можно вставить лицензионный ключ в поле Paste license key here и нажать Activate, чтобы разблокировать Pro-функции. При желании можно завершить настройку, не вводя ключ, выбрав Complete Setup Without Upgrading.

Вставка фида на сайт

После завершения настройки фида через Setup Wizard вы попадаете в раздел All Feeds, где отображается список всех созданных лент. Здесь фид можно полностью настроить и подготовить к отображению на сайте.

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

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

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

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

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

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

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

Заключение

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

Наша специальность — разработка и поддержка сайтов на WordPress. Контакты для бесплатной консультации — [email protected], +371 29394520



Вы хотели бы отслеживать активность пользователей, пока они еще на сайте? Вы можете отслеживать просмотры страницы, источники рефералов, время, проведенное пользователем на странице, и многое другое, просто установив Google Analytics, однако для более глубоких результатов вам понадобится отслеживание событий. В этой статье мы расскажем вам как добавить отслеживание событий Google Analytics в WordPress.

Что такое отслеживание событий

Отслеживание событий позволяет вам измерить действия пользователей на вашем сайте. Этими действиями могут быть нажатия по кнопкам, воспроизведение видео, скачивание файлов, отправка форм и так далее. Допустим, вы добавили видео на страницу товара и хотите узнать насколько оно эффективно в плане конверсии. Отслеживание событий позволяет вам узнать сколько пользователей проиграли ролик. Другой пример это основанные на ajax заполнения форм. Если вы пользуетесь Gravity Forms или другим контактным плагином, то отправка форм не превращается в новый просмотр страницы. Используя отслеживание событий, вы можете увидеть как пользователи взаимодействовали с формой. То же самое касается и скачиваний файлов: вы можете отследить как много пользователей скачали файл, используя отслеживание событий и даже то, какую кнопку на странице нажимали чаще всего. Отслеживание событий отличается от отслеживания ссылок в Google analytics. Все это позволяет вам увидеть, как люди ведут себя на вашем сайте. Это же, в свою очередь, позволяет вам выбрать правильную стратегию для продаж и конверсий, основываясь на предпочтения пользователей.

Приступаем

Перед тем как приступить, вам понадобится настроить и установить Google Analytics на свой сайт.

Важно: В 2023 году Google полностью отключил Universal Analytics и перевел всех пользователей на Google Analytics 4 (GA4). Старый код analytics.js больше не работает.

Если у вас в коде сайта до сих пор стоит что-то вроде:

<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-XXXXX-Y', 'auto');
  ga('send', 'pageview');
</script>

Вместо этого теперь на всех сайтах используется Google Analytics 4. Установить код можно напрямую или через Google Tag Manager.

Пример базового кода GA4:

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-XXXXXXXXXX');
</script>

Создаем свое событие в Google Analytics

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

В разделе Data display выберите Events. Здесь вы можете создавать собственные события или редактировать существующие.

Нажмите на кнопку Create Event и задайте условия для нового события. Например, если вы хотите отслеживать отправку формы, укажите имя события form_submit и укажите параметры, которые будут использоваться для отслеживания этого действия на сайте.

После того как событие создано и зафиксировано хотя бы один раз, оно появится в разделе Events на вкладке Recent events. Здесь вы сможете отметить его как Key Event (это то, что раньше называлось конверсией). После этого событие будет отображаться на отдельной вкладке Key events. При необходимости можно также пометить событие как NPA (Non-Personalized Ads), чтобы оно не использовалось для персонализации рекламы.

Добавление отслеживания событий onClick

Самый простой и, возможно, быстрый способ добавить отслеживание событий Google Analytics это использование атрибута onClick. Этот способ просто отправляет событие в Google Analytics когда пользователь щелкает по элементу. В этом примере мы будем отслеживать пользователей, которые щелкнули по ссылке скачивания книги. Мы добавим параметр onClick к ссылке скачивания, используя такой формат.

onClick="gtag('event', 'download', {
  content_type: 'ebook',
  content_title: 'Free Ebook'
});"

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

<a onClick="gtag('event', 'download', {
  content_type: 'ebook',
  content_title: 'Free Marketing Ebook'
});" 
href="http://example.com/wp-content/uploads/2025/01/free-ebook.pdf">
  Download Free Ebook
</a>

Когда пользователь будет щелкать по ссылке, будет происходить отправка события в Google Analytics.

Важно: в WordPress некоторые темы, плагины или настройки безопасности могут блокировать inline onClick. Чтобы надежно отслеживать такие клики и избежать проблем с блокировкой inline onClick, можно воспользоваться Google Tag Manager, о котором мы расскажем далее.

Добавляем отслеживание событий с помощью Google Tag Manager

Google Tag Manager это онлайн-инструмент, который позволяет вам добавить различные коды для отслеживания в качестве тегов. Вы можете использовать его, чтобы создавать теги для отслеживания событий у себя в профиле Google Analytics. Основное преимущество использования Google Tag Manager заключается в том, что вам не нужно будет вручную добавлять код себе на сайт и вы можете управлять всеми своими тегами с одного места.

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

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

Вы попадете в мастер настройки, где вам надо будет выбрать тип события — например, Form Submission.

В настройках триггера можно выбрать, запускать ли его для всех форм или только для некоторых. Если у вас на странице более одной формы и вы хотите отслеживать конкретную, настройте фильтр по ID или классу формы. Для этого в разделе Variables нажмите Configure и включите включите встроенные переменные Form ID и/или Form Classes (а при необходимости и другие переменные форм). В условии триггера используйте , например, Form ID equals contact_form_1 или Form Classes contains newsletter-form, чтобы тег срабатывал только для нужной формы.

Примечание: для форм, которые используют AJAX, стандартный триггер Form Submission часто не срабатывает. В таких случаях для точного отслеживания конкретной формы можно использовать Custom Event. Для обычных форм вы можете выбрать конкретную форму по ID или классу <form>, указав соответствующее условие в триггере. Для Contact Form 7 и других форм, у которых <form> не имеет ID или уникального класса, надёжнее использовать атрибут action формы. В GTM добавьте условие, используя переменную Form Element с проверкой matches CSS selector и укажите значение, например, form[action="/contacts/#wpcf7-f42-p43-o1"].

Узнать ID, класс или action формы можно через инспектор браузера, посмотрев атрибут id, class или action у тега <form> .

После этого создайте новый тег. В менеджере тегов нажмите по Tags и затем по кнопке New.

Выберите Google Analytics: GA4 Event в качестве типа тега.

Если вы уже вставили Google tag на свой сайт напрямую, на этом шаге создавать отдельный Google tag в GTM не нужно. Достаточно создать только GA4 Event для нужного события.

Укажите отслеживающий ID Google Analytics (G-XXXXXXX). Вы можете его получить из профиля Google Analytics (зайдите в Admin → Data collection and modification → Data Streams, выберите ваш веб-поток и скопируйте Measurement ID в верхнем правом углу страницы).

Затем задайте имя и параметры события: укажите Event Name, а параметры события добавляйте по одному через Add parameter, вводя значения, например form_type = contact, form_name = contact_form_1, submitted = true.

Для отправки формы это будет выглядеть так:

Event Name: form_submit

Event Parameters:

• form_type = contact

• form_name = contact_form_1

• submitted = true

*Если в конфигурации тега отображается сообщение “No Google tag found in this container”, это нормально, если вы уже установили Google tag напрямую на сайте. В этом случае GA4 Event tag будет работать без отдельного Configuration tag в GTM.

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

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

Вот и все, теперь зайдите на свой сайт и отправьте форму, а потом направьтесь в Reports → Engagement → Events в профиле Analytics, и вы увидите свое событие записанным и отслеженным.

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

Наша специальность — разработка и поддержка сайтов на WordPress. Контакты для бесплатной консультации — [email protected], +371 29394520