Расположение кнопки соцсетей для сайта: зачем, где и как
Кнопка соцсетей для сайта является такой же неотъемлемой частью поискового продвижения, как и сам блог. Она делает пребывание посетителей на вашем сайте комфортным, облегчая (и даже стимулируя) шеринг интересных публикаций на личных страницах.
Пожалуй, вы не найдете ни одной веб-страницы, где бы не было кнопок постинга в социальных сетях. И их действительно нельзя игнорировать. Для многих пользователей соцсети превратились в полноценный аналог поисковых систем, где они могут найти абсолютно любую интересующую их информацию. А значит, здесь есть мегабайты трафика.
Итак, давайте разберемся, как этот трафик направить в нужную вам сторону с помощью кнопки соцсетей для сайта.
Роль кнопки соцсетей для сайта
Роль соцсетей в поисковом продвижении достаточно серьезна:
- Социальные сети индексируются поисковиками, поэтому ссылки на веб-ресурс в профилях пользователей способствуют более оперативной индексации сайта.
- Поисковики учитывают поведение посетителей на сайте. Например, сколько времени человек там провел, какие страницы смотрел, на какие ресурсы потом перешел и т. п. Если робот поисковиков отмечает, что клиенты делятся материалами с сайта в социальной сети, то он определяет данную информацию как полезную. Соответственно, значимость веб-ресурса для поискового робота повышается.
- Пользователь может поделиться статьями с сайта в своем профиле, нажав соответствующую кнопку. Там информацию увидят его подписчики, и часть из них перейдет по ссылке на сайт.
Социальные сети обеспечивают дополнительный способ коммуникации с потенциальными покупателями, распространяют информацию с сайта на нескольких ресурсах и являются еще одним источником привлечения пользовательского трафика.
Разновидности кнопок соцсетей для сайта
На сайте размещаются социальные кнопки двух типов.
- Поделиться (share buttons). Данная разновидность кнопок работает как бесплатная реклама веб-ресурса. Виджет разрешает посетителям делиться с друзьями из соцсетей контентом с сайта, размещая ссылки на него в своем профиле. Новые пользователи проходят по этим ссылкам и таким образом увеличивают входящий трафик на сайт.
- Подписаться (follow buttons). Эти кнопки выведут посетителей на группы в соцсетях, где они смогут оформить подписку на новости сайта. То есть соцсети в этом случае являются еще одной площадкой для информирования подписчиков о статьях, продуктах, предложениях веб-ресурса.
Преимущества кнопки соцсетей на сайте
Подсказывают пользователям, что на кнопки требуется нажать
Иногда люди решают рассказать об интересных предложениях и материалах сайта. Тогда кнопки соцсетей, находящиеся в их поле зрения, напоминают и подсказывают, что можно проинформировать своих друзей через социальные сети.
Упрощают сохранение полезных материалов
Привлекают на сайт новый трафик
Минусы кнопки соцсетей для сайта
«Слепота» на социальные кнопки
Неготовность пользователей
Многие пользователи не знают ни про соцсети, ни тем более про социальные кнопки. Когда такой виджет попадается им на глаза, они испытывают неловкость, потому что не понимают, что это и зачем нужно. Ситуация из разряда редких, но вполне реальная.
Следует учитывать, что слишком много кнопок разных соцсетей не способствуют акцентированию внимания на них. Более пяти-шести виджетов приводят людей в смятение и затрудняют выбор.
2 нюанса расположения кнопки соцсетей на сайте
Продумываем расположение
Размещение кнопок социальных сетей требуется основательно продумать. Они не должны быть навязчивыми, и в то же время необходимо, чтобы пользователи их видели и находили. Чаще всего социальные виджеты ставят в начале или в конце статьи, а также в sidebar. Можно протестировать разные варианты расположения и решить, какое будет оптимальным для конкретного веб-ресурса.
Задаем внешний вид социальных кнопок
Кнопки социальных сетей должны выглядеть определенным образом:
- быть заметными на фоне сайта, но не оттягивающими внимание пользователей на себя;
- логотипы социальных сетей должны быть идентифицируемыми, даже если они видоизменены исходя из общей стилистики веб-ресурса;
- использование минимальных анимационных эффектов в виде, например, плавного изменения цвета при наведении курсора, но никак не навязчивое мигание или неожиданное выскакивание;
- применение не более пяти — семи социальных кнопок с учетом целевой аудитории сайта (в России обычно пользуются YouTube, Instagram, «ВКонтакте», «Одноклассниками», Facebook, мессенджерами Viber и WhatsApp);
- ссылки на социальные сети должны работать с учетом того, что, к примеру, ссылку на Google+ могут открыть только корпоративные пользователи из-за закрытой соцсети, а в переживший цепь блокировок Telegram не всегда получается беспроблемно войти;
- быть удобного для клика размера: оптимально от 10 на 10 пикселей до 40 на 40 пикселей, то есть не слишком маленькие и в то же время заметные, такие, на которые удобно нажимать, не задевая соседние кнопки.
8 вариантов размещения кнопок соцсетей на сайте
- На главной странице. Ссылкам на группы в социальных сетях можно выделить большой блок, в котором демонстрируются последние записи аккаунта. Блок размещается после информации о продукте.
- На странице об организации. Блок со ссылками на соцсети располагается после презентации компании, внизу страницы.
- На странице с контактной информацией. Это актуально, когда социальные сети тоже являются способом связи с представителями сайта. В этом случае виджеты соцсетей на странице «Контакты» будут очень удобны пользователям.
- В футере веб-ресурса. В «подвале» обычно ставят только кнопки соцсетей, чтобы не было перегрузки блока. Они доступны посетителям с любой страницы сайта.
- После полезного контента: графической информации, статьи, анонса рекламной кампании, то есть такого материала, которым люди готовы делиться. Рекомендуется ставить выровненные по левому краю ссылки.
- На странице с рекламными кампаниями, ценовыми акциями. Обычно их не берут в расчет, а между тем у клиента может возникнуть желание поделиться привлекательным ценовым предложением в соцсетях.
- На страницах с продуктом. С них удобно отправить ссылку на интересующий посетителя товар. Оптимальным считается размещение ссылок под изображением продукта, с левой стороны.
- На странице с услугами. Если организация предлагает услуги, то аналогично странице с товаром кнопки размещаются на странице с описанием услуги, но оптимальной зоной для них будет первый экран.
На сайте есть зоны, где размещение кнопок соцсетей не рекомендуется:
- Шапка веб-ресурса. Виджеты в шапке подталкивают посетителей покинуть сайт и сразу перейти в соцсети. Поэтому имеет смысл ставить кнопки только после основной информации.
- Боковое меню. Во-первых, меню перегружается лишними элементами, а во-вторых, призыв переходить в соцсети будет преждевременным: пользователь еще не изучил все возможности интернет-ресурса.
- Прикрепление на странице. Закрепленные социальные виджеты отвлекают от других разделов сайта. Поэтому на странице логичнее фиксировать чат-бот или формы для обратной связи.
Ошибки размещения кнопок соцсетей на сайте
- Расположение без учета информационной составляющей сайта Встречаются веб-ресурсы, где виджеты соцсетей размещаются в нелогичных местах, так, что не до конца ясно, чем именно здесь можно поделиться — разве что веб-ресурсом целиком.
- Рядом с неполезным и незанимательным материалом Это могут быть шаблонная информация из серии «О компании» или страницы товаров, ссылками на которые в принципе странно делиться в социальных сетях.
- Перед полезным контентом Если социальные кнопки находятся сразу после названия интересной статьи, то человек под впечатлением от прочитанного забудет поделиться ссылкой в соцсети, потому что он просто не увидит соответствующего виджета внизу материала.
Поэтому кнопку социальных сетей оптимально ставить после полезной информации. Так посетитель не забудет сохранить в своем аккаунте ссылку на понравившийся контент.
Коды HTML для добавления кнопки соцсетей на сайте
Социальные виджеты добавляются на веб-ресурс через код HTML конкретной соцсети.
Добавить ссылки на соцсети
Чтобы добавить ссылки на ваши странички в соцсетях, выберите блок «Соцсети» на вкладке «Содержимое» и перетащите его в письмо .
Нажмите на блок, чтобы перейти к его настройкам на вкладке «Свойства блока». Вы можете выбрать из выпадающего списка коллекцию иконок, которая подойдет под дизайн вашего макета.
Кликните на переключатель «Подробнее», чтобы добавить альтернативный текст к иконке и ссылку на соцсеть. Ненужную иконку можно удалить, нажав «Удалить».
Чтобы добавить иконку соцсети, которой нет в стандартном наборе блоков, нажмите кнопку «Добавить новую иконку» и выберите нужную соцсеть.
При необходимости вы можете:
- Выровнять иконки соцсетей по левому/правому краю макета или оставить их в центре.
- Изменить интервал между иконками. Выберите нужный интервал из выпадающего списка.
- Настроить отступы. При включении переключателя «Больше свойств» будут доступны дополнительные настройки для работы с отступами.
- Скрыть блок на ПК или мобильном устройстве.
- Скрыть блок в AMP или HTML версии письма.
Как добавить иконки социальных сетей на сайт
Узнайте, как легко добавить и стилизовать иконки социальных сетей на ваш сайт с помощью нашего понятного и доступного руководства!
Алексей Кодов
Автор статьи
1 июня 2023 в 15:23
Иконки социальных сетей являются важным элементом на современных сайтах, так как они позволяют пользователям делиться контентом, а также облегчают процесс нахождения и подписки на социальные каналы вашего сайта. В этой статье мы рассмотрим, как добавить иконки социальных сетей на сайт.
Выбор иконок
Для начала вам потребуются сами иконки. Их можно найти на различных ресурсах, таких как FontAwesome, Flaticon или Iconfinder. Убедитесь, что выбранные иконки имеют подходящий формат (например, SVG или PNG) и размер.
Код HTML
Иконки социальных сетей обычно представляются в виде списка ссылок. Создайте для этого блок с классом social-icons (или любым другим, который будет использоваться в вашем CSS) и добавьте внутрь него ссылки с иконками.
Обратите внимание, что атрибут target=»_blank» позволяет открыть ссылку в новой вкладке.
Веб-разработчик: новая работа через 9 месяцев
Получится, даже если у вас нет опыта в IT
Стилизация иконок
Теперь пришло время стилизовать иконки социальных сетей. Вам потребуется написать CSS-код, который будет управлять размерами, отступами и эффектами при наведении.
.social-icons < display: flex; justify-content: center; >.social-icons a < margin: 0 10px; >.social-icons img < width: 32px; height: 32px; transition: transform 0.3s; >.social-icons a:hover img
Этот код создает горизонтальный список иконок, устанавливает размеры и добавляет эффект увеличения при наведении курсора.
�� Не забудьте адаптировать стили в соответствии с вашим дизайном и размерами иконок!
Готово!
Теперь иконки социальных сетей должны быть успешно добавлены на ваш сайт. Убедитесь, что все ссылки ведут на правильные аккаунты и проверьте, как они выглядят на разных устройствах.
Создание ссылок со значками социальных сетей с использованием только CSS
Из этого урока вы узнаете, как создать ссылки со значками социальных сетей, используя CSS и простой HTML. С помощью современных технологий, без использования изображений или JavaScript сделаем из ненумерованного списка текстовых ссылок набор значков. Это решение поддерживается всем современными версиями браузеров и даже такими старыми, как Internet Explorer версии 8.
Значки социальных сетей
На изображении ниже показано, как будет выглядеть результат:
Начнем с создания списка ссылок, в котором у каждой ссылки осмысленный текст, затем поочередно зададим каждой ссылке стили, чтобы она была похожа на соответствующий символ социальной сети. В результате у нас будет поддержка программ, читающих с экрана.
Еще добавим короткий текст в атрибуте названия каждой ссылки, чтобы пользователи при наведении указателя мыши на ссылку смогли прочесть, что сделает тот или иной значок при нажатии на него.
Код примера
Код HTML состоит из ненумерованного списка ссылок разных социальных сетей и сервисов:
class="facebook"> href="#non" title="Share on Facebook">Facebook class="twitter"> href="#non" title="Share on Twitter">Twitter class="rss"> href="#non" title="Subscribe to the RSS feed">RSS class="flickr"> href="#non" title="Share on Flickr">Flickr class="delicious"> href="#non" title="Bookmark on Delicious">Delicious class="linkedin"> href="#non" title="Share on LinkedIn">LinkedIn class="google"> href="#non" title="Bookmark with Google">Google class="orkut"> href="#non" title="Share on Orkut">Orkut class="technorati"> href="#non" title="Add to Technorati">Technorati class="netvibes"> href="#non" title="Add to NetVibes">NetVibes
Применим общие стили для элементов, из которых состоит список:
ul list-style:none; padding:0; margin:0; overflow:hidden; font:0.875em/1 Arial, sans-serif; > ul li float:left; width:66px; height:66px; margin:20px 20px 0 0; > ul li a display:block; width:64px; height:64px; overflow:hidden; border:1px solid transparent; line-height:64px; text-decoration:none; text-shadow:0 -1px 0 rgba(0,0,0,0.5); border-radius:5px; > ul li a:hover, ul li a:focus, ul li a:active opacity:0.8; border-color:#000; >
У каждого значка есть свои стили. Вот код CSS, который создает значок социальной сети Facebook:
.facebook a position:relative; border-color:#3c5a98; text-transform:lowercase; text-indent:34px; letter-spacing:10px; font-weight:bold; font-size:64px; line-height:66px; color:#fff; background:#3c5a98; box-shadow:0 0 4px rgba(0,0,0,0.4); >
Заключение
В этом уроке мы хотели показать интересные возможности CSS. Символы социальных сетей меняются, старые социальные сети теряют популярность и появляются новые, но можно схематично изобразить большинство их символов с помощью CSS, если такой способ отображения вписывается в общий дизайн сайта. Это лучше использования изображений — сайт будет загружаться быстрее.
Автор урока Nicolas Gallagher
- Создание почтовых марок из изображений с использованием свойства изображения рамки
- Создание блока с наклонной нижней рамкой
- Готовимся к приходу осени: создание падающих листьев с использованием CSS