Кнопки «Поделиться» в соцсетях для сайта

Кнопки «Поделиться» позволяют посетителям быстро отправить ссылку на интересный материал в свои социальные сети или мессенджеры. Это увеличивает охват аудитории и улучшает поведенческие факторы. Рассмотрим два способа размещения таких кнопок на сайте с использованием сервиса Яндекс.Поделиться (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 или самописный проект.