Кнопки «Поделиться» позволяют посетителям быстро отправить ссылку на интересный материал в свои социальные сети или мессенджеры. Это увеличивает охват аудитории и улучшает поведенческие факторы. Рассмотрим два способа размещения таких кнопок на сайте с использованием сервиса Яндекс.Поделиться (ya-share2).
Вариант 1: Показывать панель при наведении
Этот вариант экономит место на странице: изначально видна только иконка «Поделиться», а при наведении на неё появляется полноценный блок с кнопками соцсетей. Для реализации используется следующий HTML и CSS:
<style>
.wds_share:hover .wds_share_icon,
.wds_share_block {
display: none;
}
.wds_share:hover .wds_share_block {
display: block;
}
</style>
<div class="wds_share">
<div class="wds_share_icon">
<svg class="svg svg-share" xmlns="http://www.w3.org/2000/svg" width="14" height="16" viewBox="0 0 14 16">
<path d="M1613,203a2.967,2.967,0,0,1-1.86-.661l-3.22,2.01a2.689,2.689,0,0,1,0,1.3l3.22,2.01A2.961,2.961,0,0,1,1613,207a3,3,0,1,1-3,3,3.47,3.47,0,0,1,.07-0.651l-3.21-2.01a3,3,0,1,1,0-4.678l3.21-2.01A3.472,3.472,0,0,1,1610,200,3,3,0,1,1,1613,203Zm0,8a1,1,0,1,0-1-1A1,1,0,0,0,1613,211Zm-8-7a1,1,0,1,0,1,1A1,1,0,0,0,1605,204Zm8-5a1,1,0,1,0,1,1A1,1,0,0,0,1613,199Z" transform="translate(-1602 -197)"></path>
</svg>
</div>
<div class="wds_share_block">
<script src="//yastatic.net/es5-shims/0.0.2/es5-shims.min.js"></script>
<script src="//yastatic.net/share2/share.js"></script>
<div class="ya-share2" data-services="vkontakte,odnoklassniki,gplus,whatsapp,skype,telegram"></div>
</div>
</div>
Пояснения по коду:
- CSS задаёт поведение: по умолчанию блок с иконкой виден, а блок с кнопками скрыт. При наведении на контейнер .wds_share иконка скрывается, а блок с кнопками становится видимым.
- Внутри .wds_share_icon находится SVG-иконка, которую при желании можно заменить на любую другую.
- В блоке .wds_share_block подключаются скрипты Яндекса и размещается контейнер с классом ya-share2. Атрибут data-services задаёт список соцсетей, которые будут отображаться. В примере перечислены ВКонтакте, Одноклассники, Google+, WhatsApp, Skype, Telegram.
Вариант 2: Панель всегда видна
Если место позволяет, можно сразу показывать все кнопки «Поделиться» без скрытия. Это упрощает взаимодействие: посетитель видит все доступные сервисы и может кликнуть сразу. Код для этого варианта минимален:
<script src="//yastatic.net/es5-shims/0.0.2/es5-shims.min.js"></script>
<script src="//yastatic.net/share2/share.js"></script>
<div class="ya-share2" data-services="vkontakte,odnoklassniki,gplus,whatsapp,skype,telegram"></div>
Этот код можно разместить прямо в нужном месте шаблона. Скрипты достаточно подключить один раз на странице (например, в подвале), а затем использовать только контейнер с классом ya-share2.
Настройка списка социальных сетей
Сервис Яндекс.Поделиться позволяет гибко управлять набором кнопок через атрибут data-services. Список возможных значений (на момент написания):
- vkontakte — ВКонтакте
- odnoklassniki — Одноклассники
- whatsapp — WhatsApp
- skype — Skype
- telegram — Telegram
- gplus — Google+ (на данный момент сервис закрыт, но кнопка может не работать)
- и другие.
Чтобы исключить какую-либо сеть, достаточно просто не указывать её в списке.
Дополнительные замечания
- Подключение скриптов с домена yastatic.net обеспечивает быструю загрузку с CDN.
- Если на странице уже используются другие скрипты Яндекса, повторное подключение не требуется.
- При использовании варианта с наведением убедитесь, что контейнер .wds_share имеет достаточно места для появления блока, и он не перекрывает другие элементы интерфейса.
- При необходимости можно стилизовать внешний вид кнопок с помощью дополнительных CSS-правил (например, задать отступы, фон, рамку).
Выбор конкретного варианта зависит от дизайна сайта и предпочтений владельца. Оба решения легко интегрируются в любую CMS или самописный проект.
