В современном интернете социальные кнопки (share, like, follow) стали неотъемлемой частью любого сайта – от корпоративных порталов до личных блогов. Они позволяют:

• увеличить охват контента;
• привлечь новых подписчиков;
• повысить доверие к бренду за счёт наличия официальных профилей в соцсетях;
• получить быстрый отклик от посетителей (лайки, репосты).

Где размещать кнопки?

Оптимальные места для размещения социальных кнопок:

1. Шапка (header) – небольшие иконки‑ссылки на официальные профили компании.
2. Подвал (footer) – часто используется в виде горизонтального списка.
3. Блок «Поделиться» под статьёй или товаром – кнопки share и like.
4. Боковая панель (sidebar) – если дизайн сайта позволяет.

Как правильно оформить ссылки на официальные профили?

Самый простой способ – использовать <ul> со стилизованными <li> и <a>. Ниже – готовый шаблон, который можно скопировать и адаптировать.

<ul class="social-icons">
 <li><a class="social-icon-twitter"
 href="https://twitter.com/YourCompany"
 title="Мы в Twitter"
 target="_blank"
 rel="noopener">T</a></li>
 <li><a class="social-icon-fb"
 href="https://facebook.com/YourCompany"
 title="Мы в Facebook"
 target="_blank"
 rel="noopener">F</a></li>
 <li><a class="social-icon-vk"
 href="https://vk.com/YourCompany"
 title="Мы во ВКонтакте"
 target="_blank"
 rel="noopener">V</a></li>
 <li><a class="social-icon-telegram"
 href="https://t.me/YourCompany"
 title="Мы в Telegram"
 target="_blank"
 rel="noopener">✈</a></li>
 <li><a class="social-icon-youtube"
 href="https://youtube.com/c/YourCompany"
 title="Мы на YouTube"
 target="_blank"
 rel="noopener">Y</a></li>
</ul>

Для иконок удобно подключить готовый набор шрифтов (Font Awesome, Remix Icon) или использовать SVG‑спрайты.

Кнопки «Поделиться» (Share) без сторонних сервисов

Если вы хотите полностью контролировать процесс, используйте прямые URL‑адреса соцсетей. Пример для самых популярных платформ:

В реальном коде замените URL_СТРАНИЦЫ на encodeURIComponent(window.location.href), а ТЕКСТ_ДЛЯ_ТВИТА – на encodeURIComponent(document.title).

<ul class="social-icons">
 <li>
 <a href="https://www.facebook.com/sharer/sharer.php?u="
 target="_blank" rel="noopener" title="Поделиться в Facebook">F</a>
 </li>
 <li>
 <a href="https://twitter.com/intent/tweet?url=&text="
 target="_blank" rel="noopener" title="Твитнуть">T</a>
 </li>
 <li>
 <a href="https://vk.com/share.php?url="
 target="_blank" rel="noopener" title="Поделиться во ВКонтакте">V</a>
 </li>
</ul>

Кнопки «Нравится» (Like) – варианты реализации

Для «лайков» часто используют готовые виджеты (Facebook Like, VK Like). Если нужен полностью кастомный вариант, достаточно хранить количество лайков в базе и обновлять его через AJAX.

Пример простого лайка без сторонних скриптов:

<button id="likeBtn" data-id="12345">👍 27</button>

<script>
document.getElementById('likeBtn').addEventListener('click', function{
 const id = this.dataset.id;
 fetch('/api/like', {
 method:'POST',
 headers:{'Content-Type':'application/json'},
 body:JSON.stringify({postId:id})
 })
 .then(r=>r.json)
 .then(data=>{ document.getElementById('likeCount').textContent = data.likes; });
});
</script>

SEO и доступность (Accessibility)

• Атрибут title и aria-label помогают пользователям скрин‑ридеров понять назначение кнопки.
• Используйте rel="noopener noreferrer" для внешних ссылок – это повышает безопасность.
• Не забывайте про target="_blank" только если действительно нужно открыть новую вкладку.
• Для ускорения загрузки разместите иконки в виде SVG‑спрайта или подключите их через font-display: swap.

Примеры реального применения

Пример из «mebel.ru» (правый нижний угол)

На сайте mebel.ru в правом нижнем углу расположена небольшая панель с иконками соцсетей. Код выглядит примерно так:

<div class="fixed-social">
 <a href="https://vk.com/mebel_ru" target="_blank" class="icon vk"><svg>…</svg></a>
 <a href="https://instagram.com/mebel_ru" target="_blank" class="icon ig"><svg>…</svg></a>
 <a href="https://facebook.com/mebel_ru" target="_blank" class="icon fb"><svg>…</svg></a>
</div>

Пример из «ferra.ru» (кнопки «share» под заголовком статьи)

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

<div class="article-share">
 <a href="#" class="share fb" data-network="facebook">Facebook</a>
 <a href="#" class="share tw" data-network="twitter">Twitter</a>
 <a href="#" class="share vk" data-network="vk">ВКонтакте</a>
</div>

Как собрать «социальный пакет» для вашего сайта

1. Определите цели. Нужно лишь ссылки на профили? Или также кнопки «share» и «like»?
2. Соберите список соцсетей. Для B2C‑компаний часто используют: Facebook, Instagram, VK, Telegram, YouTube, TikTok.
3. Подготовьте иконки. Скачайте SVG‑файлы, задайте единый размер (24‑32 px).
4. Добавьте стили. Скопируйте CSS из пункта 2 и при необходимости адаптируйте цвета под фирменный стиль.
5. Тестируйте на разных устройствах. Убедитесь, что кнопки работают в мобильных браузерах.
6. Отслеживайте эффективность. Подключите UTM‑метки к URL‑адресам share‑кнопок, а для лайков – аналитический эндпоинт.

Пример готового блока «Контакты + соцсети»

Ниже – полностью готовый блок, который можно разместить в футере сайта. В нём указаны адрес, телефон (частично скрыт) и ссылки на соцсети.

<section class="footer-contact">
 <h4>Контакты</h4>
 <p>
 Адрес: г. Москва, ул. Примерная, д. 12, офис 3<br>
 Телефон: +7 (495) ‑‑*<br>
 E‑mail: info@yourcompany.com
 </p>
 <ul class="social-icons">
 <li><a class="social-icon-fb"
 href="https://facebook.com/YourCompany"
 title="Мы в Facebook"
 target="_blank"
 rel="noopener">F</a></li>
 <li><a class="social-icon-instagram"
 href="https://instagram.com/YourCompany"
 title="Мы в Instagram"
 target="_blank"
 rel="noopener">I</a></li>
 <li><a class="social-icon-vk"
 href="https://vk.com/YourCompany"
 title="Мы во ВКонтакте"
 target="_blank"
 rel="noopener">V</a></li>
 <li><a class="social-icon-telegram"
 href="https://t.me/YourCompany"
 title="Мы в Telegram"
 target="_blank"
 rel="noopener">✈</a></li>
 </ul>
</section>

Часто задаваемые вопросы (FAQ)

Нужно ли использовать сторонние сервисы (AddThis, ShareThis)?

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

Как правильно оформить ссылки, если у меня несколько филиалов?

Для каждого филиала создавайте отдельный набор ссылок, где в href указываете URL конкретного профиля. При этом в тексте ссылки можно добавить название филиала, например: https://facebook.com/YourCompany-Moscow.

Как скрыть телефон от парсеров?

Можно использовать маску +7 (495) ‑‑* в открытом тексте и добавить data-phone с полным номером, который будет выводиться только после клика (JavaScript).

Что делать, если соцсеть меняет URL‑шаблон?

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

Социальные кнопки – мощный инструмент для увеличения охвата и взаимодействия с аудиторией. Их правильная реализация требует:

• корректных CSS‑стилей;
• учёта SEO и доступности;
• регулярного тестирования и обновления URL‑шаблонов.

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

Дата публикации: 23:28:50