Расположение кнопки соцсетей для сайта: зачем, где и как

Кнопка соцсетей для сайта является такой же неотъемлемой частью поискового продвижения, как и сам блог. Она делает пребывание посетителей на вашем сайте комфортным, облегчая (и даже стимулируя) шеринг интересных публикаций на личных страницах.

Итак, давайте разберемся, как этот трафик направить в нужную вам сторону с помощью кнопки соцсетей для сайта.

Роль кнопки соцсетей для сайта

Роль соцсетей в поисковом продвижении достаточно серьезна:

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

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

Разновидности кнопок соцсетей для сайта

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

• Поделиться (share buttons). Данная разновидность кнопок работает как бесплатная реклама веб-ресурса. Виджет разрешает посетителям делиться с друзьями из соцсетей контентом с сайта, размещая ссылки на него в своем профиле. Новые пользователи проходят по этим ссылкам и таким образом увеличивают входящий трафик на сайт.
• Подписаться (follow buttons). Эти кнопки выведут посетителей на группы в соцсетях, где они смогут оформить подписку на новости сайта. То есть соцсети в этом случае являются еще одной площадкой для информирования подписчиков о статьях, продуктах, предложениях веб-ресурса.

Преимущества кнопки соцсетей на сайте

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

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

2. Упрощают сохранение полезных материалов

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

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

3. Привлекают на сайт новый трафик

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

Минусы кнопки соцсетей для сайта

• «Слепота» на социальные кнопки

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

• Неготовность пользователей

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

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

2 нюанса расположения кнопки соцсетей на сайте

1. Продумываем расположение

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

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

2. Задаем внешний вид социальных кнопок

8 вариантов размещения кнопок соцсетей на сайте

1. На главной странице. Ссылкам на группы в социальных сетях можно выделить большой блок, в котором демонстрируются последние записи аккаунта. Блок размещается после информации о продукте.
2. На странице об организации. Блок со ссылками на соцсети располагается после презентации компании, внизу страницы.
3. На странице с контактной информацией. Это актуально, когда социальные сети тоже являются способом связи с представителями сайта. В этом случае виджеты соцсетей на странице «Контакты» будут очень удобны пользователям.
4. В футере веб-ресурса. В «подвале» обычно ставят только кнопки соцсетей, чтобы не было перегрузки блока. Они доступны посетителям с любой страницы сайта.
5. После полезного контента: графической информации, статьи, анонса рекламной кампании, то есть такого материала, которым люди готовы делиться. Рекомендуется ставить выровненные по левому краю ссылки.
6. На странице с рекламными кампаниями, ценовыми акциями. Обычно их не берут в расчет, а между тем у клиента может возникнуть желание поделиться привлекательным ценовым предложением в соцсетях.
7. На страницах с продуктом. С них удобно отправить ссылку на интересующий посетителя товар. Оптимальным считается размещение ссылок под изображением продукта, с левой стороны.
8. На странице с услугами. Если организация предлагает услуги, то аналогично странице с товаром кнопки размещаются на странице с описанием услуги, но оптимальной зоной для них будет первый экран.

На сайте есть зоны, где размещение кнопок соцсетей не рекомендуется:

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

Ошибки размещения кнопок соцсетей на сайте

• Расположение без учета информационной составляющей сайта

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

• Рядом с неполезным и незанимательным материалом

  Это могут быть шаблонная информация из серии «О компании» или страницы товаров, ссылками на которые в принципе странно делиться в социальных сетях.

• Перед полезным контентом

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

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

Коды HTML для добавления кнопки соцсетей на сайте

Социальные виджеты добавляются на веб-ресурс через код HTML конкретной соцсети.

• • YouTube:

    <div class=»social youtube»>

    <a href=»#» target=»_blank»><i class=»fa fa-youtube fa-2x»></i></a>

    </div>

  • Twitter:

    <div class=»social twitter»>

    <a href=»#» target=»_blank»><i class=»fa fa-twitter fa-2x»></i></a>

    </div>

  • Instagram:

    <div class=»social instagram»>

    <a href=»#» target=»_blank»><i class=»fa fa-instagram fa-2x»></i></a>

    </div>

  • Facebook:

    <div class=»social facebook»>

    <a href=»#» target=»_blank»><i class=»fa fa-facebook fa-2x»></i></a>

    </div>

  • Skype:

    <div class=»social skype»>

    <a href=»#» target=»_blank»><i class=»fa fa-skype fa-2x»></i></a>

    </div>

• «ВКонтакте»:

  <div class=»social vk»>

  <a href=»#» target=»_blank»><i class=»fa fa-vk fa-2x»></i></a>

  </div>

• «Одноклассники»:

  <div class=»social odnoklassniki»>

  <a href=»#» target=»_blank»><i class=»fa fa-odnoklassniki fa-2x»></i></a>

  </div>

• Pinterest:

  <div class=»social pinterest»>

  <a href=»#» target=»_blank»><i class=»fa fa-pinterest fa-2x»></i></a>

  </div>

• Telegram:

  <div class=»social telegram»>

  <a href=»#» target=»_blank»><i class=»fa fa-paper-plane fa-2x»></i></a>

  </div>

• WhatsApp:

  <div class=»social whatsapp»>

  <a href=»#» target=»_blank»><i class=»fa fa-whatsapp fa-2x»></i></a>

  </div>

• Dropbox:

  <div class=»social dropbox»>

  <a href=»#» target=»_blank»><i class=»fa fa-dropbox fa-2x»></i></a>

  </div>

Добавление кнопки соцсетей на сайт с помощью CSS

Для корректной работы виджетов добавляем код CSS:

@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css);

.social a {

text-align: center;

width: 48px;

height: 48px;

float: left;

background: #fff;

border: 1px solid #ccc;

box-shadow: 0 2px 4px rgba(0,0,0,0.15), inset 0 0 50px rgba(0,0,0,0.1);

border-radius: 24px;

margin: 0 10px 10px 0;

padding: 6px;

color: #000;

}

Первая строчка — это подключение через @import FontAwesome 4.7.0., который является иконочным шрифтом. Эту строчку можно удалить, если иконочный шрифт уже подключен к веб-ресурсу.

Код CSS для кнопок включается в файл CSS-шаблона интернет-ресурса. При этом строго оговоренного места для добавления CSS-кода нет. Его можно расположить с новой строчки внизу CSS-файла.

Добавление кнопки соцсетей для сайта WordPress

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

Выбираем в панели администратора сайта раздел «Плагины», нажимаем «Добавить новый». Затем ищем плагин Social Share Buttons for WordPress, устанавливаем его и активируем.

Нажимаем на раздел Share Buttons, который появился в боковом меню панели администратора. Там открываются три раздела меню:

• главные настройки;
• Share-настройки;
• Like-настройки.

Кликаем «Главные настройки» и настраиваем:

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

Заходим в «Share-настройки» и выполняем следующие действия:

• снимаем выделение с тех иконок, которые не нужны, в разделе «Включение/Отключение социальных кнопок»;
• подбираем стиль, в котором иконки будут оформлены;
• перетаскиваем кнопки, расставляя их в необходимом порядке в разделе «Сортировка кнопок»;
• назначаем отступы наверху и внизу панели.

Заходим в «Like-настройки», где следует включить и настроить счетчики лайков, которые нам потребуются.

Добавление кнопки соцсетей на сайт с помощью «Яндекса»

Здесь виджеты соцсетей добавляются на интернет-ресурс по следующему алгоритму:

1. Заходим в блок «Поделиться» и добавляем блок иконок без всяких дополнений.
2. Отбираем иконки нужных соцсетей. Например, Twitter предлагается без счетчика, только как иконка. Определяемся с видом блоков и берем снизу от него код для вставки. Результат будет лаконичным и без излишеств.

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