что добавить в футер сайта, чтобы не перегрузить его — Дизайн на vc.ru
Конспект материала Терезы Фессенден из Nielsen Norman Group о проектировании футеров — области в нижней части сайта, где отображается второстепенная информация.
9484 просмотров
Профессиональные UX-дизайнеры тратят много времени на работу над верхней частью страницы. У неё важные функции: там можно увидеть разделы сайта, задать поисковый запрос и посмотреть высокоприоритетную информацию.
На дизайн футеров выделяется намного меньше времени и ресурсов. По мнению автора, это неправильно. Футер стоит проработать, чтобы пользователь на сайте чувствовал себя комфортно.
Раньше футеры содержали полезную информацию либо разные ссылки. Текст в них был маленьким, едва различимым, сегодня же футер стал куда более важным элементом веб-страниц.
Как используют футеры
Чаще всего пользователи обращаются к футерам в двух ситуациях:
1. Пользователь не нашёл нужную информацию на странице и спустился до футера
К примеру, пользователю понравился банк, он захотел завести счёт, открыл нужную страницу, но его не устроили условия.
Футер поможет узнать о других предложениях банка.
Другой пример: пользователь хочет устроиться на работу в компанию электронной торговли. Он искал информацию о вакансиях и контактах, но не нашёл среди основных разделов сайта. Футер — его последняя надежда найти то, что нужно.
2. Пользователь сразу переходит в футер сайта, чтобы найти сведения о компании, контакты или ссылки на аккаунты в соцсетях
Иногда футер используют для перемещения по сайту: когда пользователь дошёл до конца страницы, ему проще посмотреть карту сайта в футере, чем возвращаться наверх.
Футер не главная вещь на сайте, но Тереза Фессенден советует разработать для него хороший дизайн. Она пишет:
В использовании футера есть одна замечательная особенность: он не мешает пользователям, которые уже нашли нужную информацию в верхней части страницы.
Это полезное дополнение: футеры могут помочь, но не навредить.
По мнению автора, футер должен:
- дополнять основное содержание сайта;
- содержать информацию, которую пользователи ждут там увидеть.
Элементы футера
Наиболее распространённые компоненты футера:
- полезные ссылки;
- список основных разделов;
- второстепенная информация;
- карта сайта;
- отзывы и награды;
- дочерние компании;
- способы привлечения пользователей: почтовая рассылка и социальные сети.
В футере сайта Uscreen.tv есть второстепенная информация, полезная информация, ссылки на аккаунты в социальных сетях
Полезные ссылки
Футеры большинства сайтов должны содержать блок с полезной информацией, где указаны:
- контактные данные: адрес компании, номер телефона;
- ссылка на службу поддержки клиентов;
- политика конфиденциальности;
- условия пользования сайтом.
На многих сайтах полезная информация есть в верхней части, но пользователи всё равно ищут эти сведения в футере. Люди сразу переходят туда, чтобы найти контакты компании или обратиться в службу поддержки. Если на сайте такие ссылки размещены в верхней части, необходимо добавить их и в футер.
Где использовать полезные ссылки: на любом сайте.
В футере сайта Clarity Money есть ссылки на условия использования, политику конфиденциальности и аккаунты в социальных сетях
Футер сайта J.Crew содержит контактную информацию: ссылку на аккаунт службы поддержки в Twitter, электронную почту и телефонный номер
Список основных разделов
Тереза Фессенден сравнивает список основных разделов с ковриком в прихожей: пользователь видит его первым при входе и последним при выходе. Этот список должен быть не только в верхней, но и в нижней части страницы, чтобы можно было перемещаться по сайту из футера.
Список основных разделов полезен при просмотре длинных веб-страниц. Он даёт пользователям быстро перейти к другому разделу, не прокручивая страницу вверх.
Где использовать список основных разделов: в длинных сайтах
На сайте United Healthcare список основных разделов находится как в верхней панели навигации, так и в футере
Дополнительная информация
Футер может содержать ссылки на второстепенную информацию, которая интересна пользователю:
- как подать заявление о приёме на работу;
- информацию создателей контента для сайта;
- информацию об инвесторах;
- руководство или более подробная информация о товарах и услугах;
- ссылки для связи с создателями сайта;
- информация об отделениях компании.
Подобной информации обычно нет в основных разделах сайта и среди полезных ссылок.
Где использовать дополнительную информацию: на сайтах, куда заходят пользователи, чтобы узнать подробности.
Футер сайта Dwell Magazine содержит информацию, которая не относится к тематике журнала: «Об организации», «Сотрудничество» и «Купить или продать».
Эти разделы могут заинтересовать конкретные группы пользователей: специалистов в области медиа и дизайна, продавцов, инвесторов, рекламодателей, потенциальных сотрудников.
Футер Dwell Magazine содержит ссылки с дополнительной информацией, которая не относится к статьям
Карта сайта
Карта сайта в футере играет роль главной страницы со всеми основными разделами сайта. Но автор статьи отмечает её важную особенность — на карте отображаются и подразделы. Это помогает:
- показать информацию, которой нет на главной странице;
- показать, какой основной контент есть на сайте;
- напомнить пользователю о предложениях компании.
В футер можно поместить полную карту сайта, только если на сайте 25 или меньше страниц. В противном случае футер получится большим.
Если на сайте больше 25 страниц, лучше создать отдельную страницу с полной картой сайта, ссылку на которую можно оставить на видном месте в футере.
Где использовать карту сайта в футере: на больших сайтах со сложной структурой данных, для которой нужны подразделы.
Футер сайта CNN показывает главные разделы сайта и подразделы
Отзывы и награды
Автор статьи вместе с коллегами проводила исследование сайтов. Многие из участников выбирали сайт исходя из того, какие награды он получил.
Рассказать о достижениях в футере — хороший способ заслужить доверие пользователей. Однако перечислять слишком много отзывов и наград не стоит: пользователь может подумать, что авторы сайта пытаются пустить пыль в глаза и скрыть проблемы.
Необходимо провести юзабилити- и A/B-тестирование, чтобы выяснить, нужно ли упоминать в футере награды, если да, то в каком количестве.
Где использовать отзывы и награды: на сайтах стартапов и малоизвестных компаний.
В футере Reykjavik Excursions подобраны награды и одобрения, полученные компанией от разных комиссий
Дочерние компании
Некоторые компании растут так, что начинают брать под контроль десятки других организаций. На сайтах дочерних компаний часто оставляют ссылку на главный сайт.
Но можно также включить список дочерних компаний и брендов в футер, чтобы пользователи знали, какими организациями владеет компания.
Где использовать ссылки на связанные компании:
Футер Wallmart называет пользователю бренды, принадлежащие компании: Hayneedle, Jet и Modcloth
Контакт с пользователем
Часто пользователи сразу переходят в футер, чтобы узнать, что компания выпускает и продаёт, и найти информацию о скидках и акциях.
В футер можно включить информацию, которая поможет клиентам оставаться на связи с компанией: ссылки на аккаунты в соцсетях и предложение подписаться на уведомления по электронной почте.
Также можно добавить виджет обновления соцсетей. Прежде чем встраивать его, автор советует подумать, как часто компания делает публикации. Если они появляются редко, лучше не использовать виджет, но оставить ссылки на соцсети.
Где использовать ссылки на соцсети: на любых сайтах.
Где использовать виджеты фида соцсетей: на сайтах с большим упором на визуальную и эстетическую составляющую — темы красоты, жизни, творчества.TheGoodTrade. Есть предложение подписаться на уведомления по электронной почте, виджет с обновлением Instagram-аккаунта, ссылки на другие соцсети, ссылки с дополнительной информацией и дисклеймер — отказ от ответственности с информацией об авторских правах
Вариации футеров
Бесконечная подгрузка контента и мини-футеры
В статье сказано, что футер должен быть на всех страницах сайта.
Многие коммерческие и развлекательные сайты устроены так, чтобы пользователь оставался на странице — контент на ней бесконечно подгружается по мере пролистывания вниз. Из-за этого ни у одной из страниц нет «дна» с футером.
Не нужно использовать один и тот же футер для обычных страниц и страниц с бесконечной подгрузкой. Когда пользователи пытаются взаимодействовать с футером на сайте с бесконечной подгрузкой, это превращается в проверку реакции: нужно быстро нажать на ссылку внизу, прежде чем страница удлиннится.
Если на сайте бесконечная подгрузка, лучше разместить мини-футер в правой части и убедиться, что он виден пользователю так же чётко, как и основная информация на сайте.
Где использовать футер в правой части страницы: на сайтах, использующих бесконечную подгрузку.
На LinkedIn — сайте с бесконечной подгрузкой — информация, которую обычно содержит футер, располагается внизу правой части страницы
На сайте BarstoolSports всю информацию из футера можно найти на главной странице
Также на BarstoolSports есть футер, который исчезает при загрузке нового контента
Контекстные футеры
Обычно на разных страницах сайта футеры содержат одну и ту же информацию.
Но бывает полезнее, когда информация в футере дополняет содержание страницы. Особенно это пригодится на сайтах, куда заходят разные группы пользователей: контекстный футер покажет важную информацию, которой может не быть на главной странице.
На главной странице сайта Medium нет футера, так как страница бесконечно подгружается (но в правой части есть мини-футер). Когда пользователь открывает статью, внизу страницы появляется футер, содержание которого будет зависеть от того, подписан пользователь на новости сайта или нет.
Когда использовать контекстный футер: при разработке сайтов, куда заходят несколько категорий пользователей, например, создатели контента, члены сообщества и незарегистрированные пользователи.
Футер сайта Medium рассказывает о преимуществах сообщества журнала для пользователей, которые ещё не создали аккаунт
Ошибки при разработке футеров и как их избежать
Лишняя информация
Бывает, что футеры больших сайтов иногда содержат полную карту сайта.
В результате пользователь видит столько ссылок, что среди них трудно найти нужную.
Как избежать: оставить ссылки только на главные разделы и важные подразделы сайта. Не нужно добавлять информацию о менее значимых подразделах, иначе ссылка затеряется среди них.
Непонятные названия ссылок
По тексту ссылки не всегда понятно, куда она ведёт. Ссылка «Ресурсы» во многих современных футерах — неудачный пережиток прошлого.
Как избежать: нужно выражаться максимально чётко и нейтрально. Названия «О компании« или «Помощь» понятнее, чем «Обратная связь». Если есть сомнения в формулировках, нужно провести юзабилити-тестирование и узнать, какие слова могут быть непонятны.
Непонятная организация данных
Если в футере информация размещена хаотично и непоследовательно, пользователям это не понравится и заглядывать в футер они станут реже.
Иногда футер может быть завален «одинокими» ссылками. Кажется, что они не имеют отношения ни к одному из разделов сайта.
В футере сайта GM нет чёткой структуры информации, ссылки размещены как попало. Из-за этого пользователю может быть тяжело найти нужную ссылку
Как избежать: необходимо группировать данные, визуализировать их последовательность. Можно выделить ссылки на главные разделы полужирным шрифтом, а ссылки на подразделы — обычным.
Спрятанные или неразборчивые футеры
Иногда, чтобы уместить всю необходимую информацию, разработчики делают ссылки в футерах очень маленькими. А некоторые сайты могут использовать анимации или графический интерфейс, чтобы полностью спрятать футер.
Хотя футер не основной способ навигации по сайту, пользователи часто обращаются к нему за помощью, так что прятать футер не стоит.
На сайте Reserved в ранней версии футер был свёрнут по умолчанию, что затрудняло его поиск
Нажатие кнопки Expand раскрывало футер
Как избежать: не нужно перекрывать или прятать футер.
Необходимо использовать подходящий размер и цвет шрифта (не слишком яркий и не слишком блёклый) и избегать декоративных шрифтов.
Создание ссылок на социальные сети с сайта
Содержание
- Влияние социальных сетей на SEO
- Официальные аккаунты компании
- Ссылки на социальные сети и мета-теги Open Graph
- Наличие target_blank
- Обновление контента
SEO зачастую необходимо использовать вместе с SMM. Но это уже относится к комплексному продвижению, а на самом сайте необходимо использовать ссылки на официальные профили компании (и наоборот, с социальных сетей делать ссылки на сайт). Это даст плюс как и к ссылочной массе, так и к узнаваемости компании в социальных сетях и привлечения трафика с поисковиков.
Влияние социальных сетей на SEO
Ссылки из социальных сетей косвенно влияют на продвижение сайта, а также повышают доверие пользователей компании. Несмотря на то, что многие ссылки из социальных сетей закрыты тегом rel= “nofollow”, он уже устарел, и такие ссылки все равно учитываются поисковиками.
Рассмотрим основные критерии:
Трафик. Посты в социальных сетях с ссылкой на Ваш сайт помогут собрать дополнительный трафик. Необходимо делать посты с ссылками на интересные статьи из блога или коммерческие страницы.
Социальные отклики. Реакция на пост (лайки и комментарии) имеют значение для поисковых систем. Чем охотнее люди лайкают и репостят ваши публикации (особенно с ссылками на сайт), тем лучше.
Социальный фактор. Общие посты с некликабельными ссылками мало интересуют Яндекс и Google. Но если у поста с ссылкой, как из предыдущего пункта, много лайков, то это несомненно вызовет интерес поисковых систем. Это некий поведенческий фактор, указывающий, что группа, ссылка и пост полезны для пользователя.
Официальные аккаунты компании
Проверьте, есть ли у компании социальные сети ВК/Instagram/Facebook. Если да, заодно проверьте, как они оформлены, есть ли подписчики и активность в них.
Например, в Facebook наибольшую пользу приносят лайки самой социальной странички компании, а не публикаций на ней. Именно такие ссылки учитываются поисковыми системами.
Ссылки на социальные сети и мета-теги Open Graph
Добавьте ссылки на социальные сети в шапку (header) или подвал сайта (footer). Или попросите программиста это сделать.
Мета-теги Open Graph
Мета-теги социальных сетей так же важны, как и обычные мета-теги SEO. При публикации ссылки соцсети считывают информацию со страницы, что позволяет отображать соответствующую информацию.
Самый популярный протокол — Open Graph. Полный список доступных мета-тегов можно просмотреть на сайте Open Graph.
Рассмотрим основные, которые можно прописать к коммерческой страницы или к посту в блоге:
meta property=»og:title» — указывает на заголовок страницы.
meta property=»og:description» — краткое описание, которое несет в себе необходимую информацию (до 160 символов).
meta property=»og:url» — канонический URL страницы. Ссылка должна быть прямой, без дополнительных параметров.
meta property=»og:site_name» — название сайта.
Наличие target_blank
Проследите за тем, чтобы ссылки открывались с атрибутом target=”_blank” (это нужно для того, чтобы пользователь остался на Вашем сайте, а соцсесть открылась в отдельной вкладке.
Обновление контента
Периодически обновляйте контент в социальных сетях и делитесь ими на разных ресурсах (например, акцию на товар можно опубликовать как на сайте, так и в Instagram/VK. Пример привлекательного контента:
В социальных сетях подписчики сообществ или, например, профилей, относятся весьма лояльно к тому или иному бренду, так как уже пользовались предлагаемыми услугами. Они часто переходят по предоставленным ссылкам и реагируют на контент.
Если контент социальных сетей оказывается в общей выдаче, значит существует способ продвигать его в поисковых системах.
И этот способ — бесплатный.
Спасибо, что дочитали до конца. Переходите к следующей инструкции.
Как создать кнопки социальных сетей для всех популярных социальных сетей
Социальные сети — чрезвычайно ценный инструмент для продвижения вашего маркетингового контента.
Кроме того, встраивание ваших профилей в социальных сетях на ваш веб-сайт или в сообщения в блогах может помочь увеличить трафик в ваших социальных сетях и, в конечном итоге, обеспечить согласованность бренда на разных платформах.
Но с таким количеством социальных сетей, предоставляющих свои собственные кнопки для обмена и подписки, часто бывает трудно понять, какую кнопку социальной сети использовать для какой цели.
Чтобы решить эту проблему, мы составили подробное руководство, которое поможет вам понять разницу между кнопками «Поделиться» и «Подписаться» для шести крупнейших социальных сетей — Twitter, Facebook, LinkedIn, YouTube, Instagram и Pinterest, а также как реализовать их на своем веб-сайте, в блоге и другом контенте.
Перейти к инструкциям для: Twitter | Фейсбук | Линкедин | Ютуб | Пинтерест | Instagram
Полная шпаргалка по созданию кнопок обмена в социальных сетяхРазличие между социальными сетями совместного использования кнопок и социальными сетями отслеживание кнопок позволяет вам определить, какой тип кнопки вы должны использовать для какой цели.
Это первый шаг к пониманию нюансов всех доступных вам кнопок социальных сетей. Давайте проясним это прямо сейчас.
Кнопки подписки в социальных сетях
Эти кнопки служат для продвижения вашего бизнеса в различных социальных сетях и помогают вам создавать поклонников/последователей для этих конкретных учетных записей. Разместив эти кнопки на веб-сайте вашей компании, вы поможете создать видимость своих учетных записей в социальных сетях и легко расширить свой охват.
Вы можете разместить эти кнопки в любом месте вашего веб-сайта, но мы рекомендуем, по крайней мере, размещать эти кнопки на странице «О нас» вашего веб-сайта и на главной странице/боковой панели вашего блога.
Кнопка подписки Twitter, кнопка подписки Facebook, подключаемый модуль LinkedIn Company Follow и кнопка подписки YouTube (и другие), которые мы рассмотрим в этой статье, служат кнопками подписки в социальных сетях.
Ссылки/кнопки обмена в социальных сетях
Эти ссылки и кнопки позволяют посетителям вашего веб-сайта и зрителям легко делиться вашим контентом со своими связями в социальных сетях и сетях. Добавление этих кнопок к вашему контенту позволяет расширить охват вашего контента для новой аудитории и привлечь новых посетителей на ваш сайт.
Вы должны добавить ссылки/кнопки для обмена в социальных сетях к каждому элементу контента, который вы создаете, включая целевые страницы, веб-страницы, отдельные статьи в блогах, содержимое электронной почты и т. д. Кнопки (и другие), которые мы рассмотрим в этой статье, служат кнопками для обмена в социальных сетях.
Теперь давайте углубимся в самые важные кнопки социальных сетей, доступные для каждой из шести ведущих социальных сетей.
( клиентов HubSpot: Многие из этих кнопок входят в стандартную комплектацию приложений HubSpot для социальных сетей.)
Кнопки социальных сетей для Twitter
1. Кнопка Twitter Follow
Для чего она нужна:
Кнопка Twitter Follow отлично подходит для привлечения новых подписчиков для ваш аккаунт в Твиттере. Пользователи могут подписаться на вас в Твиттере одним щелчком мыши, даже не покидая ваш сайт.
Как добавить кнопку «Подписаться на Twitter»:
Посетите https://publish.twitter.com/# и выберите «Кнопки Twitter», чтобы настроить избранную учетную запись кнопки (т. е. учетную запись, за которой вы хотите, чтобы люди следили).
Затем выберите «Follow Button»:
Наконец, скопируйте и вставьте созданный HTML-код туда, где вы хотите, чтобы кнопка отображалась на вашем веб-сайте.
Либо нажмите «Установить параметры настройки» над ссылкой для встраивания, если вы хотите дополнительно настроить такие аспекты, как язык или размер кнопки.
Посмотреть в действии. Подпишитесь на HubSpot в Твиттере:
Подпишитесь на @hubspot
2. Кнопка «Поделиться в Твиттере»
Для чего это:
Используйте эту кнопку, чтобы позволить посетителям сайта легко обмениваться контентом (например, сообщениями в блогах, целевыми страницами, другими веб-страницами и т. д.) со своими сетями в Twitter, расширяя охват вашего контента до их связи.
Как добавить кнопку «Поделиться»:
Посетите https://publish.twitter.com/# и выберите «Кнопки Twitter». Затем выберите «Кнопка «Поделиться»»:
Мы рекомендуем добавить имя пользователя вашей компании в Twitter, чтобы увеличить охват вашей учетной записи и привлечь новых подписчиков.
После настройки возьмите HTML-код новой кнопки и разместите его на своем сайте там, где вы хотите, чтобы кнопка отображалась.
Посмотрите в действии. Разместите в Твиттере эту запись в блоге:
3.
Кнопка хэштега TwitterДля чего она нужна:
Эта кнопка отлично подходит для поощрения посетителей твитить об определенных хэштегах, которые вы продвигаете, например, о событиях или конкретных маркетинговых кампаниях. Добавьте эти кнопки на страницы этих кампаний или событий, чтобы распространять и продвигать событие и его хэштег. (Для получения дополнительной информации об использовании хэштегов ознакомьтесь с этим сообщением в блоге.)
Например, если вы рекламируете мероприятие с помощью хэштега, вы можете получить HTML-код и разместить его на веб-сайте вашего мероприятия или на странице регистрации.
Как добавить кнопку хэштега Twitter:
Посетите https://publish.twitter.com/# и нажмите «Кнопки Twitter», чтобы настроить кнопку хэштега. Затем выберите «Кнопка хэштега». Затем вы можете либо настроить, либо скопировать и вставить код как есть на свой веб-сайт.
Посмотрите в действии. Твит о ежегодном мероприятии HubSpot по маркетингу и продажам INBOUND:
4.
Кнопка упоминания в TwitterДля чего она нужна:
Используйте эту кнопку, чтобы побудить посетителей веб-сайта общаться с вами через Twitter. Добавьте эту кнопку на страницы своего сайта, такие как «Свяжитесь с нами», «О нас» или «Помощь». Это отлично подходит для поддержки клиентов.
Как добавить кнопку упоминания в Twitter:
Посетите https://publish.twitter.com/# и нажмите «Кнопки Twitter», а затем «Кнопка упоминания», чтобы настроить кнопку. Затем возьмите HTML-код и вставьте его в HTML-код вашего веб-сайта там, где вы хотите, чтобы кнопка отображалась.
Посмотреть в действии. Отправьте твит в HubSpot:
5. Кнопка сообщения Twitter
Для чего она нужна:
Используйте эту кнопку, чтобы помочь пользователям связаться с вами через личное прямое сообщение Twitter. Это еще одна замечательная кнопка Twitter, которую можно добавить на страницы «Свяжитесь с нами» или «Служба поддержки» вашего сайта, чтобы клиенты могли легко связаться с вами для решения проблем.
Как добавить кнопку сообщения Twitter:
Посетите https://publish.twitter.com/# и нажмите «Кнопки Twitter» и «Кнопка сообщения», чтобы настроить кнопку. Затем возьмите HTML-код и вставьте его в HTML-код вашего веб-сайта там, где вы хотите, чтобы кнопка отображалась.
Посмотреть в действии. Отправьте прямое сообщение в HubSpot:
6. Предварительно заполненные якорные текстовые ссылки «Tweet This»
Для чего они нужны:
Вы когда-нибудь хотели создать якорную текстовую ссылку, которая предварительно заполняет определенное сообщение Twitter для того, чтобы ваши посетители могли им поделиться? Мы называем эти ссылки ссылками «Tweet This», и в HubSpot мы часто используем их в статьях блогов, чтобы упростить обмен контентом.
Обычно эти ссылки в твитах используются на целевых страницах для продвижения предложений с использованием определенных сообщений, а также внутри самого контента, например, в сообщениях в блогах.
Подобно официальной кнопке «Твитнуть», ссылки «Твитнуть это» позволяют маркетологам лучше контролировать сообщения, которыми посетитель делится со своим контентом в Твиттере.
Как добавить якорный текст «Tweet This» CTA:
К счастью, есть отличный бесплатный инструмент, который поможет вам легко создавать ссылки «Tweet This» для вашего контента. Просто зайдите на http://clicktotweet.com, введите сообщение, которым вы хотите заполнить твит, и нажмите «Создать новую ссылку», а затем скопируйте/вставьте сгенерированный URL-адрес в текст привязки (например, «Твитнуть это!»):
Рекомендуется включать URL-адрес в твит-сообщение, чтобы направлять людей обратно к исходному контенту, который вы пытаетесь продвигать, и не забудьте сократить URL-адрес, чтобы сохранить место для копии твита. Также неплохо включить @username вашей компании в твит, чтобы увеличить охват.
Посмотреть в действии:
(Помните, что текст привязки можно настроить по своему усмотрению.
)
Твитнуть эту статью в блоге!
7. Виджет Twitter Timeline
Для чего он нужен:
Виджет «Временная шкала» в Твиттере позволяет встроить весь профиль вашей компании в Твиттер на ваш веб-сайт, чтобы пользователи могли видеть все последние твиты прямо с вашего веб-сайта.
Как добавить виджет временной шкалы Twitter:
Посетите https://publish.twitter.com/#, нажмите «Встроенная временная шкала» и вставьте URL-адрес профиля вашей компании в Twitter, списки или избранное. Затем возьмите HTML-код и разместите его на своем веб-сайте там, где вы хотите, чтобы виджет отображался.
См. один в действии:
Кнопки социальных сетей для Facebook
1. Плагин страницы Facebook
Для чего он нужен:
Плагин страницы Facebook позволяет вам продвигать страницу Facebook вашего бизнеса на вашем веб-сайте/ блог, выделите других пользователей, которым уже понравилась ваша страница, отобразите количество подписчиков и последние публикации на вашей странице.
Коробка также позволяет посетителям ставить лайки на вашей бизнес-странице Facebook одним щелчком мыши, не покидая вашего сайта, что позволяет вам продвигать свое присутствие в Facebook и легко увеличивать число лайков вашей страницы.
Как добавить плагин страницы Facebook:
Чтобы создать блок «Нравится» Facebook для своего веб-сайта, посетите https://developers.facebook.com/docs/plugins/page-plugin. Включите персональный URL-адрес своей Страницы Facebook, а также свои настройки. Затем сгенерируйте код (доступный в формате HTML5, XFBML, IFRAME или URL) и разместите его на своем веб-сайте там, где вы хотите, чтобы он отображался.
Посмотреть в действии:
2. Кнопка «Нравится» Facebook
Для чего она нужна:
Кнопка «Нравится» Facebook — это кнопка, которая позволяет пользователям легко виртуально ставить лайки вашему контенту. При нажатии кнопки «Мне нравится» история также появляется на временной шкале пользователя Facebook и в новостных лентах его друзей со ссылкой на ваш контент, будь то сообщение в блоге или конкретная целевая страница.
Используйте эту кнопку, чтобы посетители могли легко одобрить ваш контент и поделиться им со своими контактами в Facebook, но имейте в виду, что эта кнопка не позволяет им добавлять персонализированные сообщения к ссылкам перед тем, как поделиться ими. Чтобы разрешить пользователям добавлять персонализированные сообщения, используйте кнопку «Поделиться» в Facebook (см. ниже).
Как добавить кнопку «Нравится» на Facebook:
Посетите https://developers.facebook.com/docs/plugins/like-button, чтобы настроить кнопку «Нравится» и получить код (доступен в формате HTML5, XFBML, IFRAME или URL) для размещения на вашем веб-сайте.
Посмотреть в действии:
3. Кнопка «Поделиться» в Facebook
Для чего она нужна:
Кнопка «Поделиться» в Facebook действует аналогично кнопке «Нравится» (поделитесь вашим контентом в их хронике и в новостных лентах друзей), но это также дает пользователям возможность добавлять комментарий или сообщение к ссылке при совместном использовании.
Эта кнопка также позволяет им делиться контентом другими способами — в группах Facebook и в сообщениях Facebook для определенных пользователей.
Как добавить кнопку «Поделиться в Facebook»:
Чтобы создать кнопку «Поделиться в Facebook», посетите https://developers.facebook.com/docs/plugins/share-button и укажите URL-адрес, который вы хотите, чтобы люди поделились, а также ширина. Затем сгенерируйте код , и вставьте его на свой сайт там, где вы хотите разместить кнопку. ( Примечание. Кнопка «Поделиться» доступна только в HTML5 или XFBML и требует наличия JavaScript SDK.)
Посмотреть в действии:
Для чего они нужны:
Бывают случаи, когда вы предпочитаете использовать ссылку для общего доступа с якорным текстом, а не кнопку. Эти ссылки легко создать, и их можно добавлять на веб-страницы, в статьи блогов, на целевые страницы или в контент, такой как электронные книги и технические документы.
Как добавить ссылки для обмена с текстом привязки Facebook:
Чтобы создать собственные ссылки для обмена в Facebook, замените оранжевую часть URL-адреса ниже URL-адресом контента, который вы хотите продвигать. Затем свяжите полный URL-адрес с якорным текстом, который вы хотите отображать в своем контенте.
http://www.facebook.com/share.php?u=hubspot.com
См. One in Action:
Поделись этой публикацией на Facebook!
Дополнительные кнопки Facebook: здесь мы рассмотрели наиболее часто используемые кнопки социальных сетей для вашего бизнеса, но чтобы найти все официальные плагины социальных сетей Facebook в одном месте, посетите https://developers.facebook.com/docs/ плагины/.
1. Подключаемый модуль LinkedIn Follow Company
Для чего он нужен:
Подключаемый модуль LinkedIn Follow Company, аналогичный кнопкам Twitter и Facebook, позволяет посетителям легко следить за страницей вашей компании в LinkedIn.
Это позволит вам расширить охват вашего бизнеса в LinkedIn.
Как добавить подключаемый модуль LinkedIn Follow Company:
Посетите https://docs.microsoft.com/en-us/linkedin/consumer/integrations/self-serve/plugins/follow-company-plugin, чтобы настроить кнопку. Есть несколько различных стилей на выбор, с вариантами отображения количества подписчиков вверху, справа или вообще не показывать.
Затем скопируйте HTML-скрипт, заменив часть «data-id=1337» идентификационным номером вашей компании. Вы можете найти это в разделе администратора на странице вашей компании.
Как они выглядят
2. Кнопка «Поделиться» в LinkedIn
Для чего она нужна:
Добавление кнопки «Поделиться» в LinkedIn позволяет посетителям легко делиться вашим контентом со своими контактами в LinkedIn, будь то сообщение в блоге, целевая страница, или другую веб-страницу. Подобно кнопкам «Нравится» и «Поделиться» в Facebook и кнопке «Твитнуть» в Twitter, включение этой кнопки может помочь расширить доступ к вашему контенту для аудитории LinkedIn и привлечь трафик на ваш сайт.
Как добавить кнопку «Поделиться в LinkedIn»:
Чтобы создать и установить эту кнопку, посетите https://docs.microsoft.com/en-us/linkedin/consumer/integrations/self-serve/plugins/share-plugin, и скопируйте HTML-код. Затем замените data-url=»https://www.linkedin.com» на любой URL-адрес, которым посетители должны поделиться, например, на запись в блоге, которую посетители читают, или на веб-страницу, на которую они попали.
Дополнительные кнопки LinkedIn. Хотя мы рассмотрели наиболее часто используемые кнопки выше, вы можете найти все официальные кнопки и плагины социальных сетей LinkedIn в одном месте по адресу https://docs.microsoft.com/en-us. /linkedin/consumer/integrations/self-serve/plugins?context=linkedin/consumer/context.
Кнопки социальных сетей для YouTube
1. Кнопка подписки на YouTube
Для чего она нужна:
Эта кнопка позволяет организациям легко продвигать свои видеоканалы на YouTube.
Вы можете встроить эту кнопку на свою домашнюю страницу или страницу «Свяжитесь с нами», чтобы увеличить охват контента, который вы продвигаете на своем канале, и увеличить базу подписчиков.
Как добавить кнопку подписки на YouTube:
Чтобы создать кнопку подписки на YouTube, перейдите на страницу https://developers.google.com/youtube/youtube_subscribe_button, введите название канала вашей компании на YouTube, выберите размер кнопки и цветовую тему. , решите, хотите ли вы отображать свой логотип, и решите, хотите ли вы показывать или скрывать количество подписчиков. Затем скопируйте и вставьте код на свой веб-сайт, где вы хотите разместить кнопку.
Посмотреть в действии. Подпишитесь на канал HubSpot на YouTube:
Кнопки социальных сетей для Pinterest
1. Кнопка «Подписаться» на Pinterest
Для чего она нужна:
Как и другие популярные социальные сети, Pinterest также предлагает кнопку «Подписаться», чтобы вы могли продвигать свои Присутствие в Pinterest и создание новых подписчиков для вашей учетной записи.
Как добавить кнопку подписки Pinterest:
Посетите https://developers.pinterest.com/tools/widget-builder/?type=follow и настройте кнопку, введя URL-адрес и имя учетной записи Pinterest. После того, как вы введете эту информацию, автоматически сгенерируется код, который вы сможете вставить на свой веб-сайт.
Посмотреть в действии. Подпишитесь на HubSpot в Pinterest:
HubSpot
2. Кнопка «Закрепить»
Для чего она нужна:
Это кнопка «Поделиться» в Pinterest, которая позволяет пользователям делиться вашим контентом в Pinterest и расширять его охват. Кнопка Pin It отлично подходит для визуального контента. Разместите эти кнопки рядом с изображениями, инфографикой и другим визуальным контентом на вашем сайте.
Как добавить кнопку «Pin It»:
Посетите https://developers.pinterest.com/tools/widget-builder/?type=pin, чтобы создать кнопку «Pin It». Вставьте URL-адрес булавки и размер булавки. Затем скопируйте сгенерированный код для встраивания, чтобы использовать его на своем веб-сайте.
Посмотреть в действии. Закрепите эту запись в блоге:
Дополнительные кнопки Pinterest: другие виджеты Pinterest включают виджет профиля для предварительного просмотра ваших пинов, виджет доски для демонстрации определенных пинбордов и виджет пинов для демонстрации определенных пинов. Создайте их на странице https://business.pinterest.com/en/widget-builder.
Кнопки социальных сетей для Instagram
1. Добавление профиля Instagram на ваш веб-сайт
Для чего это нужно:
Instagram предлагает организациям значок «Просмотреть в Instagram» для продвижения своих учетных записей в своих блогах и на веб-сайтах. Значок также помогает организациям продвигать свои учетные записи в социальных сетях без необходимости навигации с помощью мобильных устройств. Значки позволяют посетителям просматривать ваш контент и взаимодействовать с вами в одном и том же веб-браузере.
Как добавить значок Instagram:
Большинство популярных конструкторов веб-сайтов, включая HubSpot, WordPress и Wix, поставляются с значками социальных сетей, включая Instagram, которые можно легко встроить на ваш сайт.
Оттуда вам просто нужно связать значок с учетной записью Instagram вашей компании (http://www.instagram.com/yourusername).
Кроме того, существуют сторонние плагины, которые позволяют встраивать всю ленту Instagram. Некоторые варианты включают Powr и Juicer. Важно отметить, что вы можете не захотеть встраивать свою ленту на свой веб-сайт, поскольку это может отговорить пользователей от проверки вас в Instagram. В этом случае лучшим вариантом будет просто наличие значка Instagram, связанного с вашим профилем.
Как они выглядят:
(Вот так кнопка выглядит на HubSpot.com, но вы можете создать свой собственный дизайн, соответствующий эстетике вашего веб-сайта.)
Примечание для участников: Условия использования социальных сетей
Прежде чем изменять кнопки социальных сетей на своем веб-сайте, ознакомьтесь с Условиями обслуживания Facebook, Twitter, LinkedIn, Pinterest, YouTube и Instagram. Изменение логотипов и фирменного стиля может привести к тому, что ваш веб-сайт будет оштрафован, поэтому, если вы сомневаетесь, используйте точные логотипы, заполненные виджетами, которые мы перечислили выше.
Приятного обмена!
Примечание редактора: этот пост был первоначально опубликован в декабре 2011 года и был обновлен для обеспечения точности и полноты.
3 основных причины добавить ссылки на социальные сети на ваш сайт
Перейти к основному содержаниюВернуться к списку сообщений вашего контента. Вы хотите, чтобы людям было проще находить другие платформы контента, которые вы поддерживаете для своего бизнеса.
- Ссылки делают процесс обмена и связывания более удобным.
- Они расширяют охват и узнаваемость вашего бренда через сети пользователей.
- Они помогают увеличить количество людей, которые подписываются и следуют за вами.
Узнайте больше об аналитике Milestone в социальных сетях.
Должны ли вы привлекать трафик на свои сайты в социальных сетях, а также с них? Ответ положительный, в зависимости от того, как ваши клиенты продвигаются по пути клиента и какие точки соприкосновения они ищут на своем пути.
Создаваемые пользователями социальные сети важны во всех категориях B2C, от макияжа до одежды, ресторанов и автомобилей.
В B2B сайты отзывов, такие как Trust Radius и G2, являются источниками, к которым люди обращаются для сравнения и отзывов и отзывов сообщества. Когда вы добавляете ссылку G2 на свой сайт, ваши средние звезды обзора G2 отображаются во многих списках вашего сайта в поисковой выдаче. Вы также можете рассматривать GMB и ваши сообщения Google как платформу, на которую стоит ссылаться.
Маркетологи должны иметь широкое представление о том, что теперь означает домашняя страница; это действительно любое место, которое представляет ваш бренд, продукт и ценность и помогает клиентам на пути к выбору вас. А Google — это домашняя страница всех ваших домашних страниц, и в какой-то момент через Google проходит 71%+ цифровых поездок.
Кроме того, ваши профили в социальных сетях помогают распространять и распространять ваш контент.
Большинство сайтов социальных сетей используют ссылки без подписки, что означает, что они не обеспечивают ссылочного веса SEO, более широкое распространение дает вам больше шансов связаться с кем-то, кто будет ссылаться на нее и использовать ссылку для подписки.
Для привлечения трафика с ваших сайтов социальных сетей на ваш веб-сайт:
Основные места для ссылки на ваш сайт из ваших социальных профилей обычно находятся в настройках «О программе»:
- В Facebook это находится в: «Редактировать профиль», «Контакты» и «Основные». Информация, Добавить веб-сайт (для использования необходимо сделать общедоступным), добавить ссылку на свой сайт.
- В LinkedIn это находится в: Редактировать страницу, Обзор и добавить свой полный URL. Вы можете просмотреть как участник, чтобы проверить это, и вы увидите посетите веб-сайт в левом верхнем углу под своим логотипом.
- В Твиттере это: Редактировать профиль, Веб-сайт.
Когда вы ссылаетесь на свой сайт, вы можете добавить трекеры UTM для канала, ресурса и кампании, но Google Analytics обычно может идентифицировать их, даже если вы этого не сделаете.
Вот три рекомендации, о которых следует помнить, когда вы ссылаетесь на свои социальные сети со своего веб-сайта:
- Создание ссылок: Вполне логично, что вы хотите получить качественные ссылки, ведущие на ваш веб-сайт, но зачем вам это? ссылка от него? Распространение контента увеличивает шансы того, что кто-то найдет ваш контент и свяжется с ним за пределами социальных сетей, например, в блоге. Упоминание вашего бренда и продукции — это сигнал для поисковых систем, улучшающий ваше присутствие.
- Улучшение вашего общего присутствия в Интернете: Хотя это может показаться устаревшим, добавление ссылок на ваши социальные каналы с вашего веб-сайта на самом деле помогает повысить вероятность того, что пользователи найдут ваш веб-сайт при поиске в Google, Bing, Yahoo! и другие двигатели.
- Обеспечьте беспрепятственное и правильное взаимодействие с пользователем: Простого наличия ссылок на вашем сайте недостаточно — вы хотите убедиться, что пользователям будет легко их найти, чтобы они могли взаимодействовать с вами, где бы вы ни находились. В интернете.
Существует несколько подключаемых модулей для распространенных платформ, таких как WordPress.
Узнайте больше о платформах социальных сетей в нашем новом Руководстве по маркетингу в социальных сетях 2021.
В Milestone мы следуем трем основным правилам при добавлении ссылок к значкам социальных сетей: стороне каждой страницы вашего веб-сайта
