Бесплатная консультация юриста

+7 (800) 301-07-30

Реклама jurik.ru

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

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

Рост подписчиков. Посетители сайта могут в один клик перейти в ваши сообщества и подписаться.
Виральность контента. Кнопки «Поделиться» позволяют пользователям быстро делиться интересными страницами в своих социальных сетях.
Доверие. Активные профили в соцсетях повышают лояльность и доверие к бренду.
Обратная связь. Клиенты могут написать вам в мессенджере или соцсети напрямую.

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

Способы добавления иконок

Готовые виджеты и конструкторы

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

Иконочные шрифты (Font Awesome)

Популярный способ — подключить библиотеку иконок Font Awesome. Достаточно добавить CSS-файл библиотеки на страницу и использовать специальные классы:

Пример: добавьте класс .sb (класс для социальной кнопки) и класс иконки (например, Twitter, Facebook, RSS и др.) к тегу <a>. Иконка появится автоматически, а её размер и цвет легко меняются через CSS.

Этот способ даёт максимальный контроль над внешним видом. Рассмотрим базовый пример.

Создадим маркированный список со ссылками на соцсети:

Важно: вместо символа # в атрибуте href нужно вставить реальную ссылку на вашу соцсеть, например: href=»https://t.me/vash_kanal».

CSS-стили

Теперь оформим список с помощью Flexbox, чтобы иконки выстроились в ряд:

.h__social {
  margin-top: 6px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  list-style: none;
}

Для каждой иконки задаём фоновое изображение из спрайта и размеры, например 24×24 пикселя:

.h__social a {
  display: block;
  width: 24px;
  height: 24px;
  margin-right: 8px;
  background-image: url(‘sprite.png’);
}
.h__social .telegram { background-position: -24px 0; }
.h__social .vk { background-position: -48px 0; }

Анимация и эффекты при наведении

Чтобы панель соцсетей выглядела современно, добавьте плавные эффекты на CSS3. Например, при наведении кнопки могут плавно увеличиваться, менять цвет или «выезжать»:

.h__social a {
transition: transform 0.3s ease, opacity 0.3s ease;

}
.h__social a:hover {
transform: scale(1.15);
opacity: 0.8;
}

Полезные советы

Используйте CSS-спрайты или SVG-иконки — это ускоряет загрузку страницы.
Не перегружайте сайт: выбирайте 4–6 основных соцсетей, где реально ведётся активность.
Добавляйте атрибут target=»_blank», чтобы ссылки открывались в новой вкладке.
Проверяйте отображение иконок на мобильных устройствах — используйте flex-wrap и адаптивные размеры.
Ссылки должны вести именно на официальные страницы компании, а не на личные профили.

Добавляем иконки социальных сетей на сайт