Содержание

Где расположить кнопки социальных сетей на сайте

  • 17 июля 2019
  • Продвижение
  • 11.5K
  • 6 мин.
  • Понравилось? Поделись!

    Прочесть позже

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

Помимо аккаунтов в соцсетях, следует добавить на сайт кнопки «Поделиться» (или по-другому share-кнопки, кнопки шеринга), которые позволят пользователям быстро добавить ссылку на ваш сайт у себя на странице или отправить в сообщении другу.

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

Оформление кнопок

Для начала определимся с внешним видом кнопок. Основные рекомендации:

  1. Кнопки должны быть заметными. Конечно же, они не должны привлекать все внимание на себя, но и сливаться с фоном тоже.

    Пример незаметных кнопок:

    Компания изменила цвет, но кнопки остались заметны:

  2. Логотипы должны быть узнаваемыми. Можно менять оформление под дизайн вашего сайта, но не переусердствуйте.

    Не сразу понятно, что это кнопки и что они ведут на соцсети:

    Несмотря на кардинальное изменение внешнего вида, сразу понятны функции данных кнопок:

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

    Пример изменения кнопки после наведения курсора:

  4. Кнопок не должно быть слишком много. Исследования за прошедший год показывают, что в основном россияне используют Youtube, ВКонтакте, Одноклассники, Facebook и Instagram, а также делятся информацией в WhatsApp и Viber. Обязательно учитывайте особенности аудитории вашего сайта, однако рекомендуем размещать не более 5-7 кнопок.

  5. Ссылки должны быть рабочими. Очевидный пункт, но многие не знают, что Google+ закрыла свою соцсеть и теперь ссылка доступна только для корпоративных клиентов. Также из-за прошедших блокировок соцсети Telegram у пользователей возникают проблемы с доступом.

  6. По кнопкам должно быть удобно кликать. Мелкие элементы менее заметны, поэтому можно легко промахнуться, нажав на соседнюю кнопку. Минимально допустимый размер кнопки от 10×10 мл или примерно 40×40 пикселей.

    Пример слишком мелких кнопок:

    По таким кнопкам сложно не попасть:

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

Usocial.pro — у сервиса удобный конструктор и много вариантов оформления. Кнопки впишутся в адаптивную верстку, и по каждому набору будет собираться статистика.

Uptolike — не менее хороший конструктор и обилие настроек по дизайну кнопок. Есть отдельные плагины для популярных CMS.

Блок «Поделиться» от Яндекса — если не хочется заморачиваться с оформлением, то Яндекс предлагает самый простой конструктор с минимумом возможностей. Плюс данного сервиса в том, что доступно исследование через Яндекс.Метрику.

Кнопки соцсетей для сайта: где расположить?

  1. Главная страница. После обзора товаров и услуг кратко расскажите об аккаунтах в соцсетях.

    Блок можно сделать крупным, показать последние посты.

    Пример привлекательного блока (по каждому изображению можно кликнуть и перейти на соответствующий пост в соцсетях):

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

  2. Страница о компании. Рассказывая о себе, можно внизу страницы также добавить блок с последними постами и ссылками на соцстети.

    Или кратко упомянуть аккаунт, как здесь:

  3. Страница контактов. Если используете соцсети как один из источников связи, обязательно добавьте кнопки на данную страницу. Пример:

  4. Подвал сайта. Достаточно указать только кнопки, чтобы не перегружать блок. Так пользователь сможет на любой странице сайта найти их. Лаконичный пример:

И еще 4 идеи для размещения кнопок шеринга

  1. После текста статьи, инфографики, акции, т. е. после полезного материала или информации. У пользователя должно возникнуть желание поделиться важными сведениями. Ссылки лучше выравнивать по левому краю, как в примере:

    Или пример с призывом к действию:

  2. На страницах акции. Про них, кстати, чаще всего забывают.

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

  4. На страницах услуг. Если основной продукт компании — предоставление услуг, то, как и в предыдущем пункте, следует разместить кнопки шеринга. В данном случае кнопку желательно поместить в первом экране:

    Или внизу страницы:

Где НЕ нужно располагать кнопки

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

    Например, в данном случае кнопки привлекают слишком много внимания и выглядят ярче, чем логотип:

  2. В боковом меню ссылки соцсетей также будут отображаться «слишком рано». Да и не стоит перегружать боковое меню. Антипример:

  3. Закреплять на странице. Данную функцию полезно использовать для онлайн-консультанта или формы обратной связи, а кнопки соцсетей будут только отвлекать внимание пользователя.

Для кнопок репостов в соцсети можно выделить следующие ошибки:

  1. Размещение без привязки к контенту. Иногда кнопки располагают так, что не ясно, чем конкретно предлагают поделиться пользователю. Всем сайтом? Такие кнопки выглядят странно:

  2. Расположение рядом с контентом, который не интересен. Например, рядом с текстом о компании кнопки совершенно непривлекательны для пользователя. Также далеко не каждым товаром пользователи захотят делиться:

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

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

Выводы

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

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

P. S. Посмотрите наш крутой кейс по работе с SMM.

#ошибки юзабилити #соцсети #фишки для сайта

8

0

0

0

0

© 1PS.RU, при полном или частичном копировании материала ссылка на первоисточник обязательна

33 бесплатных инструмента

для интернет-маркетолога

  • Сервисы для контекста
  • Сервисы для контент-маркетинга
  • Сервисы для SMM
  • Анализ конкурентов
  • Email рассыльщики
  • Работа с репутацией

Получить список бесплатных сервисов

Комментарии для сайта Cackle

Популярные статьи

  • 20.2K
  • 8 мин.

Витаминки для SEO: 10 неочевидных методов, влияющих на рост трафика#методы продвижения#техническая оптимизация#фишки для сайтаО том, что правильно настроенный файл robots. txt, теги title и description, заголовки h2, качественные тексты стимулируют рост трафика, знает даже начинающий веб-мастер. Но сегодня мы расскажем про 10 методов, которые не так очевидны, но не менее важны, если вы хотите увеличить поток клиентов на сайт.

  • 12K
  • 8 мин.

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

  • 17K
  • 10 мин.

Новые факторы ранжирования Google: рассказываем, что будет важно в 2021 году#google#алгоритмы google#факторы ранжированияGoogle заявил, что в мае 2021 года будут запущены новые сигналы ранжирования. Чем же удивит поисковик нас на этот раз? Чему теперь нужно будет уделять больше внимания, чтобы обойти конкурентов в поисковой выдаче? Об этом и не только расскажем в этой статье.

Все популярные статьи »

Правильные социальные share-кнопки / Хабр

grokru

Время на прочтение 2 мин

Количество просмотров

78K

Я пиарюсь

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

Внешний вид


Это самая очевидная проблема: социальных сетей много, у каждой свой дизайн share-блока. По отдельности они выглядят вполне прилично, но при установке всех вместе получается полная каша. Что с этим делать? Во-первых, можно просто оставить одну-две соцсети, выглядеть это будет не так ужасно. Во-вторых, можно использовать обычные иконки с share-ссылкой. К сожалению, в первом случае идут лесом пользователи «второстепенных» соцсетей, а во втором не видно пузомерок — количества лайков и твитов.

Быстродействие


В пору быстрого интернета все меньше приходится задумываться об оптимизации скорости загрузки сайта. Однако с каждым годом растет количество пользователей мобильного интернета, который пока не может похвастаться высокими скоростями. А социальные кнопки способны заметно замедлить загрузку сайта. Интересный факт: еще в 2007 году Amazon сообщил, что каждые лишние 100мс при загрузке сайта снижают продажи на 1%. А Google с 2010 года учитывает скорость загрузки при ранжировании сайтов в поисковой выдаче. И хочется ли после этого ставить нативные кнопки?

 Что же делать?

К счастью, есть много сервисов, с помощью которых можно установить к себе на сайт одну кнопку «Поделиться», объединяющую сразу все нужные социальные сети. Самым популярным в Рунете подобным инструментом является блок «Поделиться» от Яндекса. И он действительно хорош: аккуратные иконки, лаконичный код и даже наличие API для разработчиков. Но как всегда, хочется чего-то большего. Для себя я определил вот какие критерии идеального сервиса социальных кнопочек:

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

PLUSO — молодой сервис, который удовлетворяет всем вышеуказанным требованиям, вот какие кнопочки он позволяет делать, всего более 300 вариаций:

А какими сервисами социальных кнопок пользуетесь вы?

Теги:

  • социальные кнопки
  • share

Хабы:

  • Я пиарюсь

Всего голосов 113: ↑85 и ↓28 +57

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

Кирилл @grokru

co-founder at Beau

Telegram

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

Как и где их добавить

Хотите получать больше трафика из социальных сетей?

Согласно исследованию Alexa, на социальные сети приходится от 0,8% до 12,2% трафика веб-сайта, при этом новостные и информационные сайты получают наибольшее количество трафика из социальных сетей.

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

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

Где следует использовать кнопки социальных сетей

Каким контентом на вашем веб-сайте чаще всего делятся?

Скорее всего, если у вас есть блог, это будет контент вашего блога.

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

Исключением, согласно некоторым исследованиям, являются страницы с конкретным призывом к действию.

По данным VWO, клики по основной кнопке призыва к действию (добавить в корзину) увеличились на 11,9%, когда кнопки социальных сетей были удалены с целевой страницы.

Лучший подход при внесении изменений на ваш веб-сайт — это A/B-тестирование.

Убедитесь, что основные цели страницы выигрывают от добавления кнопок социальных сетей.

Как популярные публикации используют кнопки социальных сетей

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

Начиная с Billboard.com, вы увидите кнопки социальных сетей, расположенные в верхней части статей под заголовком.

Скриншот с сайта Billboard.com, декабрь 2021 г.

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

В идеале посетители не решат поделиться статьей, пока не прочитают ее.

Предприниматель решает эту проблему с помощью кнопок социальных сетей.

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

Скриншот с сайта Entrepreneur. com, декабрь 2021 г.

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

Yahoo Sports предлагает аналогичную функцию на своем веб-сайте.

Их кнопки социальных сетей перемещаются по краю экрана, когда вы прокручиваете статью.

Скриншот с сайта Yahoo.com, декабрь 2021 г.

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

Harvard Business Review предлагает кнопки социальных сетей в верхней части статьи, а также в нижней части статьи, под указанием автора.

Скриншот с сайта HBR.org, декабрь 2021 г.

К сожалению, эти кнопки социальных сетей будут недоступны для тех, кто не дочитал статью до конца.

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

Скриншот с сайта CNET.com, декабрь 2021 г.

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

Это означает, что многие посетители могут даже не заметить эти кнопки.

Пользователи платформы Medium получают кнопки социальных сетей вверху и внизу своих сообщений.

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

Скриншот с сайта TowardsDataScience.com, декабрь 2021 г.

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

Как видите, есть несколько способов внедрить кнопки социальных сетей в ваш контент.

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

Официальные кнопки социальных сетей 

Большинство ведущих социальных сетей предлагают свои собственные официальные кнопки социальных сетей.

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

Скриншот с сайта Twitter.com, декабрь 2021 г.

Meta for Developers предлагает конфигуратор кнопки «Поделиться» в Facebook.

Позволяет выбирать различные стили кнопки «Поделиться в Facebook», включая счетчик в виде поля, счетчик с кнопкой или без счетчика.

Скриншот с Facebook.com, декабрь 2021 г.

Pinterest предлагает конструктор виджетов, аналогичный Twitter и Facebook, поэтому владельцы веб-сайтов могут создавать кнопки «Закрепить» и «Сохранить» для контента своего веб-сайта.

Скриншот с Pinterest.com, декабрь 2021 г.

Плагины и приложения для обмена в социальных сетях

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

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

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

Большинство работает на нескольких платформах, помимо WordPress.

1. ShareThis

ShareThis — это бесплатный сервис, который позволяет вам добавлять кнопки социальных сетей на ваш сайт WordPress или Shopify.

Они предлагают как встроенные кнопки социальных сетей, так и кнопки социальных сетей, которые плавают рядом с вашим контентом.

2. AddThis

AddThis — еще одна социальная служба обмена, позволяющая добавлять кнопки на веб-сайты на нескольких популярных платформах, включая WordPress, Shopify, Tumblr и Blogger.

AddThis предлагает несколько вариантов размещения, в том числе встроенные кнопки социальных сетей и кнопки социальных сетей, которые плавают рядом с вашим контентом.

3. AddToAny

Кнопки социальных сетей AddToAny также работают на различных платформах веб-сайтов, включая WordPress, Tumblr, Drupal и Joomla. AddToAny предлагает несколько вариантов размещения, как и другие плагины выше.

4. Shareaholic

Shareaholic позволяет добавлять встроенные и плавающие кнопки социальных сетей на ваш веб-сайт. Он работает с WordPress, Drupal, Tumblr и на любом веб-сайте, куда вы можете встроить код.

5. ElfSight

ElfSight — это премиальный плагин кнопок социальных сетей, который предлагает отзывчивые кнопки социальных сетей с настраиваемыми дизайнами и макетами.

Он работает на большинстве платформ веб-сайтов, включая WordPress, Shopify, Wix, Weebly и многие другие.

Заключение

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

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

Как только вы запомните эти социальные сети, добавьте к своему контенту кнопки социальных сетей.

Обязательно проведите A/B-тестирование различных мест размещения и отслеживайте изменения в своем трафике в социальных сетях.

Дополнительные ресурсы:

  • 3 совета, как увеличить время, которое люди тратят на чтение вашего контента
  • Как повысить охват и вовлеченность вашего контента
  • KPI контент-маркетинга: руководство по выбору правильных KPI для контента

Рекомендуемое изображение: vladwel/Shutterstock

Категория Содержание Социальные сети

Как создать кнопки социальных сетей для всех популярных социальных сетей

Социальные сети — чрезвычайно ценный инструмент для продвижения вашего маркетингового контента.

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

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

Чтобы решить эту проблему, мы составили подробное руководство, которое поможет вам понять разницу между кнопками «Поделиться» и «Подписаться» для шести крупнейших социальных сетей — Twitter, Facebook, LinkedIn, YouTube, Instagram и Pinterest, а также как реализовать их на своем веб-сайте, в блоге и другом контенте.

Перейти к инструкциям для: Twitter | Фейсбук | Линкедин | Ютуб | Пинтерест | Instagram

Полная шпаргалка по созданию кнопок обмена в социальных сетях

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

Это первый шаг к пониманию нюансов всех доступных вам кнопок социальных сетей. Давайте проясним это прямо сейчас.

Кнопки подписки в социальных сетях

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

Вы можете разместить эти кнопки в любом месте на своем веб-сайте, но мы рекомендуем по крайней мере размещать их на странице «О нас» вашего веб-сайта и на главной странице/боковой панели вашего блога. Кнопка подписки Twitter, кнопка подписки Facebook, подключаемый модуль LinkedIn Company Follow и кнопка подписки YouTube (и другие), которые мы рассмотрим в этой статье, служат кнопками подписки в социальных сетях.

Ссылки/кнопки обмена в социальных сетях

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

Вы должны добавить ссылки/кнопки для обмена в социальных сетях к каждому элементу контента, который вы создаете, включая целевые страницы, веб-страницы, отдельные статьи в блогах, содержимое электронной почты и т. д. Кнопки (и другие), которые мы рассмотрим в этой статье, служат кнопками для обмена в социальных сетях.

Теперь давайте углубимся в самые важные кнопки социальных сетей, доступные для каждой из шести ведущих социальных сетей. (Клиенты HubSpot : Многие из этих кнопок поставляются вместе с приложениями HubSpot для социальных сетей.)

Кнопки социальных сетей для Twitter

1. Кнопка Twitter Follow

Для чего она нужна:

Кнопка Twitter Follow великолепна для создания новых подписчиков для вашей учетной записи Twitter. Пользователи могут подписаться на вас в Твиттере одним щелчком мыши, даже не покидая ваш сайт.

Как добавить кнопку «Подписаться» в Твиттере:

Посетите https://publish.twitter.com/# и выберите «Кнопки Твиттера», чтобы настроить избранную учетную запись кнопки (т. е. учетную запись, за которой вы хотите, чтобы люди следили).

Затем выберите «Follow Button»:

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

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

Посмотреть в действии. Подпишитесь на HubSpot в Твиттере:

Подпишитесь на @hubspot

 

2. Кнопка «Поделиться в Твиттере»

Для чего она нужна:

Используйте эту кнопку, чтобы посетители сайта могли легко обмениваться контентом (например, сообщениями в блогах, целевыми страницами, другими веб-страницами, и т. д.) со своими сетями в Твиттере, расширяя охват вашего контента до их подключений.

Как добавить кнопку «Поделиться»:

Посетите https://publish.twitter.com/# и выберите «Кнопки Twitter». Затем выберите «Кнопка «Поделиться»»:

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

После настройки возьмите HTML-код новой кнопки и разместите его на своем сайте там, где вы хотите, чтобы кнопка отображалась.  

Посмотрите в действии. Разместите в Твиттере эту запись в блоге:

3. Кнопка хэштега Twitter

Для чего она нужна:

Эта кнопка отлично подходит для поощрения посетителей твитить об определенных хэштегах, которые вы продвигаете, например, о событиях или конкретных маркетинговых кампаниях. Добавьте эти кнопки на страницы этих кампаний или событий, чтобы распространять и продвигать событие и его хэштег. (Для получения дополнительной информации об использовании хэштегов ознакомьтесь с этим сообщением в блоге. )

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

Как добавить кнопку хэштега Twitter:

Посетите https://publish.twitter.com/# и нажмите «Кнопки Twitter», чтобы настроить кнопку хэштега. Затем выберите «Кнопка хэштега». Затем вы можете либо настроить, либо скопировать и вставить код как есть на свой веб-сайт.

Посмотрите в действии. Твит о ежегодном мероприятии HubSpot по маркетингу и продажам INBOUND:

4. Кнопка упоминания в Твиттере

Для чего она нужна:

Используйте эту кнопку, чтобы побудить посетителей веб-сайта общаться с вами через Твиттер. Добавьте эту кнопку на страницы своего сайта, такие как «Свяжитесь с нами», «О нас» или «Помощь». Это отлично подходит для поддержки клиентов.

Как добавить кнопку упоминания в Twitter:

Посетите https://publish.twitter.com/# и нажмите «Кнопки Twitter», а затем «Кнопка упоминания», чтобы настроить кнопку. Затем возьмите HTML-код и вставьте его в HTML-код вашего веб-сайта там, где вы хотите, чтобы кнопка отображалась.

Посмотреть в действии. Отправьте твит в HubSpot:

5. Кнопка сообщения Twitter

Для чего она нужна:

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

Как добавить кнопку сообщения Twitter:

Посетите https://publish.twitter.com/# и нажмите «Кнопки Twitter» и «Кнопка сообщения», чтобы настроить кнопку. Затем возьмите HTML-код и вставьте его в HTML-код вашего веб-сайта там, где вы хотите, чтобы кнопка отображалась.

Посмотреть в действии. Отправьте прямое сообщение в HubSpot:
Сообщение @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.)

Посмотреть в действии:

 

4. Facebook Anchor Text Share Links

Для чего они нужны:

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

Как добавить ссылки для обмена с текстом привязки 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:

Посетите 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. Изменение логотипов и фирменного стиля может привести к тому, что ваш веб-сайт будет оштрафован, поэтому, если вы сомневаетесь, используйте точные логотипы, заполненные виджетами, которые мы перечислили выше.