Как подключить фейсбук к сайту
Виджет Facebook на сайт
Каждый, кто активно занимается продвижением в интернете, знает, насколько важно иметь связь сайту с социальными сетями. Это помогает гнать трафик из соцсети на свой ресурс. В этой статье вы узнаете, как создать и добавить виджет Фейсбук на сайт и для каких конкретно целей его можно использовать.
Телеграм-канал Программист и бизнес.
Каждый день интересные истории, как программист строит бизнес.
Устанавливаем виджет Фейсбук для своего сайта
Для начала вам требуется создать собственное сообщество, но сначала пройти регистрацию на ФБ (если этого не было сделано ранее) и только потом начать размещение виджета Facebook. Ведь в конечном итоге, его ссылка будет использована в настройках. На многих блогах сообщество соцсети вы можете видеть в сайдбаре, оно располагается в специальной вкладке под названием «Группа в Фейсбук».
Создать группу можно в меню ленты с левой стороны, под названием «Группы» – «Создать группу». Здесь вам требуется прописать такие данные:
После создания сообщества вам требуется пройти по ссылке: https://developers.facebook.com/docs/plugins/. Здесь нужно зайти во вкладку «Социальные сигналы» тип своего виджета, в графе «Мне нравится». Их в реальности много, но этот является универсальным. Далее появится окно, где необходимо указать нужные параметры:
После отметки нужных параметров, требуется кликнуть по кнопке Get Code. Теперь в появившемся окне нужно пройти в графу HTML5, если код вы решите вставить с помощью файлов напрямую, либо проходите по вкладке IFRAME, если группа будет показана с помощью плагина. Сейчас мы рассмотрим дальнейшие действия, если был выбран первый вариант, при помощи вкладки HTML5.
Теперь переходим на сайт, где должен появиться виджет. Первую часть кода необходимо вставить непосредственно за тегом в файле header.php. Остальная половина кода должна быть вставлена в месте, в котором вы желаете, чтобы показывался сам виджет. Чаще всего таким местом выбирают сайдбар и это наиболее правильное решение.
Если вся процедура производилась правильно, то виджет Фейсбук будет отображен там, где вы указали. В случае если у вас никак не выходит сделать установку кода описанным выше способом, то вам требуется загрузить плагин под названием Facebook Widget. На фото выше вы можете видеть, как должен выглядеть виджет сообщества Facebook для сайта.
По мере того, как его начнут лайкать и комментировать, количество фотографий пользователей начнет стремительно увеличиваться. Вам стоит учитывать, что если вы создали группу и после этого не начали ее продвижение, то гостей из соцсети Facebook будет очень мало.
Виджет Facebook
В клиентской части магазина данный блок отображается на главной странице магазина рядом с другими виджетами:
Данный виджет позволяет без труда встраивать и продвигать страницу Facebook на сайте. Люди смогут отмечать cтраницу как понравившуюся и делиться ей (как они это делают на Facebook) прямо на Вашем сайте.
Настройка виджета Faсebook происходит аналогично настройке виджета вКонтакте.
На открывшейся странице необходимо заполнить поля:
Можно поэкспериментировать с галочками и понять, как именно для Вас лучше.
После заполнения нажать кнопку «Получить код»
Рисунок 1. Формирование кода виджета Facebook.
В появившемся окне необходимо выбрать вкладку «IFrame» и скопировать код (рис.2).
Рисунок 2. Код виджета.
Рисунок 3. Размещение кода виджета Facebook по кодом виджета ВКонтакте.
После сохранения изменений блок виджета появится на сайте.
Рисунок 4. Отображение виджета Facebook в магазине.
События пикселя Facebook: подробная инструкция по установке на сайт
Есть разные способы анализа поведения пользователей на сайте: Яндекс.Метрика, Google Analytics и другие. Команда Mello расскажем еще об одном ─ пикселе Facebook, точнее, об одной из его функций ─ отслеживании и фиксации событий, или определенных действия посетителей.
Ваш сайт, например, интернет-магазин посещают разные люди, кто-то приходит и уходит, кто-то откладывает товары в корзину и благополучно о ней забывает, а некоторые становятся покупателями.
Как видите, все совершают разные действия, а значит, и напоминать о себе надо разными способами. Осталось только «отследить» и сгруппировать посетителей сайта по определенным признакам.
В терминологии пикселя Facebook все действия на сайте ─ это события. Вы можете определить для себя, какие события помогут вам создать аудитории, оптимизировать рекламу и, возможно, даже что-то изменить в работе сайта или сотрудников.
Например, большая разница между числом посетителей, которые положили товар в корзину и сделали заказ, может говорить о том, что непонятна процедура заказа или дорогая доставка, или менеджеры упустили покупателя. Вариантов много, но, главное ─ вы о них начнете думать и проверять.
События пикселя Facebook получится настроить только после установки основного кода пикселя Facebook на ваш сайт. О том, как это сделать, читайте в статье.
Ниже приведен пример кода сайта с настроенным событием:
В Facebook есть два вида событий ─ стандартные и специально настроенные.
Стандартные события заранее определены в Facebook, их используют для регистрации конверсий, выполнения оптимизации для конверсий и создания аудиторий.
В таблице перечислены стандартные события пикселя Facebook.
Такие события не входят в список стандартных, поэтому каждому из них можно дать уникальное название, которое будет отражать выполняемое пользователем действие.Специально настроенные события можно использовать для построения пользовательских аудиторий, но нельзя для кампаний с оптимизацией по конверсиям.
Установить события пикселя Facebook можно разными способами:
Все стандартные события отслеживаются с помощью вызова функции пикселя fbq(‘track’) с указанием названия и, при необходимости, объекта JSON в качестве параметров ─ цены, валюты, id товара и т. д. Более подробно про передаваемые параметры написано в справке Facebook под заголовком «Свойства объектов».Например, так выглядит вызов функции, отслеживающий завершенное событие покупки, в качестве параметров заданы валюта и сумма:fbq(‘track’, ‘Purchase’,
Специально настроенные события отслеживаются с помощью вызова функции пикселя fbq(‘trackCustom’) с указанием имени события и, по необходимости, объекта JSON в качестве параметров (цены, валюты, id товара и т.д.).Например, так выглядит вызов функции, отслеживающий отправку формы на сайте:
В этом примере название события в статистике Facebook будет отображено как «OtpavkaForm». Для более удобного анализа информации лучше указывать все названия максимально понятно.После вызова кода события автоматически будут отслеживаться в Events Manager.
Функции fbq(‘track’) или fbq(‘trackCustom’) можно вызывать в любом месте на сайте между открывающим и закрывающим тегами при загрузке страницы или при выполнении пользователем какого-либо действия, например, нажатия кнопки.
Для начала определим с какой целью и за каким событием будем наблюдать на сайте.
Например, нам надо отследить добавление товара в корзину по нажатию кнопки. Для этого подходят стандартные события Facebook.Переходим к таблице стандартных событий, представленной выше, и ищем нужное действие, в нашем примере это «Добавление в корзину».
Видим, что код данного действия имеет вид fbq(‘track’, ‘AddToCart’).
Ниже показано, как добавить код вызова функции fbq(‘track’, ‘AddToCart’) по нажатию кнопки в код сайта.
Напомним, что перед работой с событиями на сайте уже должен быть установлен код пикселя Facebook. За основу установки события возьмем всё то же отслеживание добавления товара в корзину (AddToCart), рассмотрим простую настройку и установку события через GTM.
1. Для начала определим кнопку и ее параметры для отправки события в Facebook. Для этого переходим на сайт, находим нужную нам кнопку и кликаем по ней правой кнопкой мыши, после чего выбираем «Просмотреть код».
2. Смотрим параметры кнопки, в данном случае это название класса AddToCard и текст «В корзину».
3. Далее идем в Google Tag Manager в раздел «Переменные» и нажимаем кнопку «Настроить». В конфигурациях выбираем «Click Classes» и «Click Text».
4. После этого переходим в раздел «Триггеры» и нажимаем кнопку «Создать».
5. Выбираем настройки триггера «Все клики».
6. Выполняем следующие настройки на основе параметров кнопки:
7. Осталось создать Тег. Переходим в раздел «Теги» и нажимаем кнопку «Создать».
8. Далее нажимаем «Конфигурация тега» и выбираем из предложенного списка «Пользовательский HTML».
9. В поле для вставки вставляем наш код, который нужно обернуть в тег
10. После этого нам нужно выбрать триггер срабатывания кода, который мы создали ранее.
11. Теперь удостоверимся в правильности настройки нашего события и для начала проверим работу тега.
Для этого в интерфейсе Google Tag Manager переходим в «предварительный режим» и отправляемся на свой сайт.
На сайте нажимаем кнопку «В корзину» и видим срабатывание тега в нижней части экрана:
12. Также, правильность срабатывания, в «предварительном режиме», можно проверить и с помощью расширения “Facebook Pixel Helper”, где по нажатию кнопки в интерфейсе отобразиться название нашего события. Больше расширений в помощь специалисту по контекстной и таргетированной рекламе
13. Все готово, нажимаем кнопку «Оправить» в правом верхнем углу.
Скриншот новой версии FacebookЧтобы детально посмотреть события в старой версии Facebook, необходимо перейти в Events Manager и нажать на наш установленный ранее пиксель.
Скриншот старой версии Facebook
Помимо работы с кодом, можно использовать инструмент Facebook, который позволит добавить события и параметры этого события в веб-интерфейсе вашего сайта.
Переходим в Events Manager → «Источники данных» и выбираем нужный нам пиксель, после чего нажимаем кнопку «Добавить событие».
Выбираем «Установить код вручную» и пропускаем все пункты кнопкой «Продолжить» до того, как Facebook предложит «Запустить инструмент настройки событий».
Нажимаем на эту кнопку. После чего появится окошко для ввода URL вашего сайта, заполняем его, дальше ─ «Открыть сайт».
Порядок действий в старой версии
На странице с подробной информацией и статистикой выбранного пикселя также отображены настроенные нами события. В правом верхнем углу находим и нажимаем кнопку «Настроить», из выпадающего списка выбираем «Настроить новые события».
После чего появится окошко с настройкой события, а котором сразу выбираем «Использовать инструмент настройки событий Facebook».
В поле «URL сайта» вводим адрес нашего сайта и нажимаем кнопку «Открыть сайт».
После перехода на сайт, в левом верхнем углу мы увидим окошко «Инструмент настройки событий Facebook».
На определенных страницах можно увидеть не только уже настроенные события на данной странице, но и рекомендуемые к установке. Например, на скриншоте ниже страница, на которой Facebook заметил кнопку «Оформление заказа» и предложил установить на нее событие.
Нажимаем «Проверка», кнопка на сайте выделилась, можно выбрать категорию самого события, это «Покупка» и передаваемые значения. Если все устраивает, подтверждаем выбор.
Кнопка стала зеленой, следовательно событие на ее срабатывание уже настроено и отслеживается в интерфейсе Facebook в Events Manager.
Функциональность «Инструмента настройки событий Facebook» позволяет настроить отслеживание кнопки вручную.
Так вы с легкостью можете настроить любую кнопку на вашем сайте. После выбора «Отслеживать новую кнопку» на сайте появятся всевозможные выделения, которые может фиксировать Facebook. Выбирайте нужные и завершайте настройку так же, как рассказано выше.Еще одна полезная функция в настройке событий ─ это «Отслеживать URL».
Например, очень просто можно фиксировать завершение заказа, если после его оформления пользователь попадает на страницу с благодарностью (site.ru/thank-you например). Заполнив все необходимые поля и подтвердив завершение настройки вы очень быстро настроите нужное вам событие.
Специально настроенные конверсии позволяют создавать правила для параметров ваших событий и страниц вашего сайта. Благодаря этому вы можете измерять более конкретные действия клиентов. Например, можно отфильтровать все события покупок, чтобы сосчитать, сколько пар женских туфель дороже 1000 рублей было куплено. Используя эти конверсии, также можно оптимизировать показ рекламы.Максимальное количество специально настроенных конверсий в рекламном аккаунте — 100.
Оптимизация показа рекламы по конверсиям для специально настроенных событийFacebook позволяет создавать компанию с оптимизацией по конверсиям только для стандартных событий и для специально настроенных конверсий, для специально настроенных событий такой возможности нет. Поэтому для того чтобы проводить оптимизацию по специально настроенным событиям, сначала нужно на основе таких событий создать конверсию и уже на ее основе оптимизировать показ рекламы.Как это сделать? Для начала переходим в Events Manager и идем на вкладку «Специально настроенные конверсии».
Обязательно указываем название конверсии и источник данных, если у вас их несколько, в нашем случае это один-единственный пиксель Facebook. Из выпадающего списка «Событие конверсии» выбираем нужное нам специально настроенное событие. После чего нажимаем кнопку «Создать».
Теперь, выбирая оптимизацию показа рекламы по конверсиям, мы сможем использовать созданную конверсию на основе специально настроенного события.
Настройка стандартных событий без дополнительного кода
Если на сайте есть базовый код пикселя Facebook, вы можете использовать правила для URL, чтобы регистрировать стандартные события, не добавляя дополнительный код.
Например, это пригодится, когда на вашем сайте есть отдельная страница с благодарностью, и для быстрой фиксации переходов на эту страницу можно создать специально настроенную конверсию.
В окошке создания конверсии для «Событие конверсии» выбираем «Весь трафик для URL» и в правилах ниже указываем название нашей страницы с благодарностью после чего нажимаем кнопку «Создать».
Добавление правила к стандартным событиям, специально настроенным событиям и событиям «Весь трафик для URL», помогает более подробно анализировать действия клиентов. Например, если у вас настроена передача дополнительных параметров по событиям, можно создать правило для подсчета покупателей товаров определенной категории и стоимости.
Как настроить условия для фиксации добавления товара определенной категории дороже 1000 рублей.
При создании специально настроенной конверсии в «Событие конверсии» выбираем любое нужное нам для отслеживания событие, в нашем случае ─ это «Добавление товара в корзину», в котором настроена передача параметров. Пример кода по одному из товаров при добавлении в корзину:
Затем в правилах выбираем «URL» → «Содержит» и в поле для ввода вставляем часть URL страницы, категорию которой нам необходимо отслеживать.
Например, страница имеет вид site.ru/divani/3464, где site.ru — основной адрес страницы, divani — категория продаваемых товаров «Диваны» и 3464 ─ id определенного товара. Нам интересна будет именно категория divani.
Примечание: не все страницы имеют вид, описанный в примере.
Нажимаем «+» напротив правила для добавления еще одного. Выбираем категорию «Event Parameters» для создания правила из параметров, далее ─ «value» (стоимость товара) и выставляем «больше, чем» 1000. Кнопка «Создать».
Передавайте деловым партнерам данные по отдельным специально настроенным конверсиям, а не источники данных целиком.
В заключение хотелось бы описание некоторые проблемы, с которыми может столкнуться пользователь, при настройке событий:
1. Если вы используете инструмент настройки событий Facebook, работающий как всплывающее окно, он может не отображаться из-за блокировки всплывающих окон в вашем браузере. Для корректной работы инструмента стоит отключить блокировку.
2. В настоящее время Facebook не разрешает использовать инструмент настройки событий компаниям с такими видами деятельности, как инвестиционный банкинг и брокерские услуги, страхование, финансовые услуги, банковское обслуживание юридических и физических лиц, кредитование (включая ипотечное), взаимокредитование (кредитные союзы), фармацевтическая промышленность и здравоохранение. Компании, работающие в этих секторах, могут использовать ручные настройки событий.
3. Настраивать кнопки в инструменте настройки событий можно при условии, что:
Более расширенное описание возможных проблем описано в справке Facebook — Устранение неполадок c инструментом Facebook для настройки событий на сайтах.
Автор статьи: специалист по контекстной рекламе в Mello, Андрей Моисеев.
Как добавить виджет страницы Facebook на свой сайт
Практически для каждой социальной сети и платформы есть собственный способ генерации и встраивания кода, который позволяет отображать количество подписчиков, возможность подписаться на страницу, поставить лайк и/или поделиться. И добавить такой виджет на свой сайт, в основном, не составляет особого труда.
В сегодняшней статье мы рассмотрим то, как на практике добавить виджет с отображением своего профиля в социальной сети Facebook на свой собственный сайт. С помощью этого виджета вы сможете продвигать любую общедоступную Страницу Facebook на своем сайте. Посетители вашего сайта смогут поставить Странице отметку «Нравится» и поделиться ею прямо на вашем сайте. Такой виджет можно использовать на всех страницах сайта.
Социальная сеть Facebook действительно хочет, чтобы вы имели возможность демонстрировать ее платформу, поэтому процесс добавления различных виджетов на свой сайт максимально упрощен. Фейсбук располагает целым рядом социальных плагинов (виджетов), которые вы можете легко настроить для своих сайтов. Все эти плагины детально расписаны на странице документации для разработчиков (адрес: https://developers.facebook.com/docs/plugins). Здесь вы найдете такие виджеты (или же плагины), как Плагин «Группа», Кнопка «Сохранить», Кнопки «Нравится», «Поделиться» и «Цитировать», Плагин «Страница» и другие. В сегодняшнем практическом уроке мы рассмотрим виджет Плагин «Страница». Если у вашего сайта есть страница на Facebook, например, как у нас есть страница SebWeo, вы можете легко добавить виджет с ней на свой сайт. Все, что вам нужно сделать, это указать URL своей страницы в Facebook и произвести небольшие настройки.
Как добавить виджет страницы в Facebook на свой сайт
Шаг №1. Откройте инструменты Facebook для разработчиков
Войдите на Facebook и перейдите на страницу документации плагина «Страница» для разработчиков. Адрес: https://developers.facebook.com/docs/plugins/page-plugin/.
Шаг №2. Настройте отображение виджета по своему вкусу.
Укажите ссылку (URL-адрес) вашей страницы на Фейсбук. Также укажите нужные настройки виджета: его ширина и высота в пикселях, показывать ли лица друзей в виджете, а также видимость фото обложки вашей страницы.
Внося изменения в настройки, чуть ниже вы сразу будете видеть демо предварительного просмотра. Так вы сможете оптимально настроить отображение виджета под свой сайт.
После этого нажмите кнопку Получить код.
Шаг №3. Выберите способ вставки виджета. Добавьте код на свой сайт
После нажатия кнопки Получить код появится всплывающее окно с 2-мя возможными вариантами для вставки.
1-й вариант: SDK JavaScript.
Этот вариант подразумевает, что вы добавляете в код своего сайта определенный скрипт, который дальше производит загрузку виджета.
2-й вариант: Вставка виджета через iframe.
После того, как вы добавите код виджета в исходный код своего сайта, вы сможете увидеть работу виджета Фейсбук в действии.
Если вам нужно добавить кнопку с подпиской на YouTube канал, по ссылке вы найдете подробную инструкцию.
Вот и все. Надеемся, что данная инструкция будет вам полезна!
Как подключить пиксель Facebook к сайту
Вы можете подключить пиксель Facebook и отслеживать трафик на сайте, а также получать дополнительную статистику для анализа.
Пиксель позволяет отслеживать и анализировать всех посетителей сайта из соцсетей, чтобы повторно взаимодействовать с ними. К примеру, догонять тех, кто зашел на лендинг и ушел, ничего не сделав. Исходя из анализа поведения аудитории, вы сможете оптимизировать рекламу под нужную цель или конверсию и настраивать рекламный алгоритм Facebook и Instagram.
Для подключения вам понадобится вставить идентификатор пикселя Facebook в настройку аналитики SendPulse. В статье подробно разберем, где найти этот идентификатор и саму настройку.
Разделы
Как создать пиксель Facebook
Перейдите в ваш Business Manager, в раздел «Источники данных» и выберите «Пиксели».
В меню над списком пикселей нажмите «Добавить».
В появившемся окне введите название для своего пикселя и нажмите «Продолжить».
Далее вам нужно добавить пользователей вашего Business Manager и открыть доступ к пикселю для рекламного аккаунта.
Добавление пользователей. Перейдите на нужный пиксель и нажмите «Добавить людей».
Выберите нужных пользователей, укажите права по управлению пикселем и нажмите «Назначить». Выбранный вами пользователь будет добавлен.
Включение доступа к пикселю для рекламного аккаунта. Перейдите на нужный пиксель и нажмите «Добавить объекты».
Выберите нужный рекламный аккаунт, укажите права по управлению пикселем и нажмите «Добавить». Доступ к пикселю будет открыт в выбранном рекламном аккаунте.
Ваш пиксель готов к добавлению на лендинг от SendPulse.
Как получить идентификатор пикселя
Перейдите в ваш Business Manager в раздел «Источники данных» и выберите «Пиксели».
Выберите нужный вам пиксель и скопируйте его ID (набор из 15 цифр), кликнув по нему.
Как вставить идентификатор в SendPulse
Перейдите в настройки сайта на вкладку «Аналитика». Напротив пикселя Facebook введите идентификатор и нажмите «Подключить».