Социальные ссылки, это неотъемлемый элемент современного сайта. Они помогают связать веб-ресурс с площадками компании в социальных сетях‚ повышают доверие посетителей и упрощают распространение контента. В этой статье мы подробно разберём все популярные способы добавления социальных кнопок и иконок на сайт.
Зачем нужны социальные ссылки на сайте
- Повышение узнаваемости бренда — посетители могут быстро перейти на ваши официальные страницы.
- Рост трафика — кнопки «Поделиться» позволяют пользователям распространять ваш контент.
- Улучшение поведенческих факторов — удобная навигация удерживает аудиторию.
- Доверие, наличие активных соцсетей говорит о «живости» проекта.
Способ 1. Простые текстовые ссылки «Поделиться»
Самый базовый вариант — обычные ссылки с передачей URL страницы через параметры. Пример для Twitter и Facebook:
Для Twitter:
<a href="#" onclick="this.href='http://twitter.com/share?text='+document.title+'&url='+window.location.href+'&via=ВАШ_АККАУНТ*'">Твитнуть</a>
Для Facebook:
<a href="#" onclick="this.href='http://www.facebook.com/share.php?u='+window.location.href+window.location.hash">Добавить в Facebook</a>
Такой подход не требует подключения сторонних библиотек и работает везде‚ но выглядит минималистично.
Способ 2. Социальные иконки на чистом CSS
Более красивое решение — кроссбраузерные иконки на CSS3. Принцип прост: каждая иконка представляет собой ссылку с определённым сочетанием классов. Нужно добавить базовый класс .sb (класс социальной кнопки) и класс конкретной сети (Twitter‚ Facebook‚ RSS и др.) к тегу <a>:
<a href="https://twitter.com/ваш_профиль*" class="sb twitter"></a>
Базовые стили для круглых кнопок
Чтобы сделать кнопки круглыми и аккуратными‚ используйте следующий CSS:
.fa {
padding: 20px;
font-size: 30px;
width: 30px;
text-align: center;
text-decoration: none;
border-radius: 50%;
}
Совет: свойство border-radius: 50% превращает квадратную кнопку в круглую. Уменьшайте width‚ если кнопки получаются слишком большими.
Способ 3. Иконки через SVG
Способ 4. Генерация кнопок через JavaScript
Способ 5. Готовые виджеты и плагины
Если вы не хотите работать с кодом‚ существуют готовые решения:
- Плагины для WordPress — добавьте иконки соцсетей через плагин WP. Выберите наиболее подходящий из каталога или попробуйте несколько.
Рекомендации по размещению
- Размещайте иконки профилей в шапке или подвале сайта — там их привыкли искать пользователи.
- Кнопки «Поделиться» лучше ставить рядом с контентом: в начале или конце статьи.
- Используйте атрибут
target="_blank"‚ чтобы ссылки открывались в новой вкладке. - Добавляйте
rel="noopener"для безопасности. - Проверяйте отображение на мобильных устройствах.
Добавить социальные ссылки на сайт можно множеством способов: от простых текстовых ссылок до стильных SVG-иконок и готовых виджетов. Выбор зависит от ваших навыков и платформы. Начинающим подойдут плагины и генераторы‚ а разработчикам — чистый CSS и JavaScript‚ дающие полный контроль над внешним видом кнопок.