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

Задача:

Разместить блок кнопок с возможностью поделиться материалом со страницы (шаринг) в социальных сетях


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

Решение:
Показывать при наведении:
<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" id="share.svg" xmlns="http://www.w3.org/2000/svg" width="14" height="16" viewBox="0 0 14 16"><path id="Ellipse_223_copy_8" data-name="Ellipse 223 copy 8" class="cls-1" 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,facebook,odnoklassniki,gplus,twitter,viber,whatsapp,skype,telegram"></div>
	</div>
</div>
Всегда видно:
<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,facebook,odnoklassniki,gplus,twitter,viber,whatsapp,skype,telegram"></div>


Похожие решения:
Создано: 01.12.2018
Просмотров: 15