Зачем нужны социальные кнопки на сайте

• Увеличение трафика — каждый репост приводит новых посетителей;
• Улучшение поведенческих факторов — пользователи дольше остаются на сайте;
• Рост узнаваемости бренда — ваш контент распространяется по соцсетям;
• Удобство для посетителей — поделиться статьёй можно в один клик.

Способ 1. Кнопки на основе иконочного шрифта Font Awesome

Самый простой и популярный способ — использовать библиотеку иконок Font Awesome. Для начала подключите её в секции <head> вашего документа:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<a href="#" class="fa fa-facebook"></a>
<a href="#" class="fa fa-twitter"></a>

Стилизация кнопок через CSS

Базовые стили для всех иконок:

• font-size: 30px; — размер иконки;
• text-align: center; — выравнивание по центру;
• text-decoration: none; — убираем подчёркивание ссылок;
• padding и width — задаём размеры кнопки.

Для каждой соцсети установите фирменный цвет фона:

• Facebook: background: #3B5998;
• Twitter: background: #55ACEE;

Совет: добавьте свойство border-radius: 50%;, чтобы получить круглые кнопки, и уменьшите ширину (width) для аккуратного вида. Также рекомендуется добавить эффект при наведении курсора (:hover) — например, изменение прозрачности или цвета фона.

Способ 2. Плавающий блок социальных кнопок без плагина

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

Создайте в текстовом редакторе следующую разметку:

<div id="socialbar">
  <div class="social-twitter">...код кнопки Twitter...</div>
  <div class="social-facebook">...код кнопки Facebook...</div>
  <div class="social-plusone">..;код кнопки Google +1...</div>
</div>

Эта структура — основа плавающей панели. Далее нужно перейти на официальные страницы разработчиков социальных сетей, сгенерировать код официальных кнопок («Нравится», «Твитнуть» и т.д.) и вставить его в соответствующие контейнеры.

Позиционирование блока

Чтобы блок «плавал» при прокрутке, используйте CSS-свойство position: fixed; с указанием отступов слева и сверху. Такой приём пригодится не только для социальных иконок, но и для других элементов оформления статей и дизайна сайта.

Полезные рекомендации

1. Не перегружайте страницу — достаточно 3–5 кнопок самых популярных соцсетей вашей аудитории.
2. Проверяйте кроссбраузерность — блок должен корректно отображаться во всех браузерах.
3. Добавляйте hover-эффекты — это делает интерфейс живым и понятным.
4. Следите за скоростью загрузки — официальные скрипты соцсетей могут замедлять сайт, поэтому рассмотрите вариант простых CSS-кнопок со ссылками.
5. Тестируйте на мобильных устройствах — плавающий блок не должен перекрывать контент на маленьких экранах.

Источники и обратная связь

Материал подготовлен на основе учебных ресурсов:

• Учебник Schoolsw3 — «Как сделать CSS кнопки социальных сетей». По вопросам продаж: sales@, по ошибкам и предложениям: help@.