Кнопки поделиться без использования сторонних скриптов (vamshop)
В вамшопе уже довольно давно на странице товара используется блок «Поделиться» от «Яндекса». Он помогает посетителям сайта быстро публиковать ссылки на страницы в социальных сетях и блогах. Блок полезный, но с некоторых пор «Яндекс» блокируется в Украине, и это создает проблемы при загрузке страниц товара. Заменим сторонний скрипт «Яндекса» для того, что бы эта функция осталась для основных соцсетей следующим образом:
1. Первых делом удалим вызов скрипта от «Яндекса», вот эти строки:
<script type="text/javascript" src="//yastatic.net/share/share.js" charset="utf-8"></script> <div class="yashare-auto-init" data-yashareL10n="ru" data-yashareType="big" data-yashareQuickServices="vkontakte,facebook,twitter,odnoklassniki,gplus" data-yashareTheme="counter"></div> |
2. На это место добавляем три кнопки “Поделиться” в Facebook, Google+ и Twitter:
<div class="ProductInfoSocial">
<!-- FB -->
<a href="http://www.facebook.com/sharer.php?u=http://ваш сайт/product_info.php?products_id={$PRODUCTS_ID}" onclick="javascript:window.open(this.href,
'', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,left=350, top=170,height=600,width=600');return false;" class="social-link social-fb"><i class="fa fa-facebook" aria-hidden="true"></i></a>
<!-- G+ -->
<a href="https://plus.google.com/share?url=https://ваш сайт/product_info.php?products_id={$PRODUCTS_ID}" onclick="javascript:window.open(this.href,
'', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,left=350, top=170,height=600,width=600');return false;" class="social-link social-google"><i class="fa fa-google-plus" aria-hidden="true"></i></a>
<!-- TW -->
<a href="http://twitter.com/share?text=https://ваш сайт/product_info.php?products_id={$PRODUCTS_ID}" onclick="javascript:window.open(this.href,
'', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,left=350, top=170,height=600,width=600');return false;" class="social-link social-twitter"><i class="fa fa-twitter" aria-hidden="true"></i></a>
</div> |
В примере логотипы рисуются шрифтом FontAwesome. Если он не подключен у Вас к сайту, можете поставить иконки в виде картинок или вообще написать текстом.
3. Добавляем немного стилей в stylesheet.css:
.ProductInfoSocial .social-link {display: inline-block;width: 30px;height: 30px;color:#fff;text-align: center;border-radius: 3px;font-size: 16px;cursor:pointer;} .ProductInfoSocial .social-fb {background: #3b5998;} .ProductInfoSocial .social-google {background: #dd4d39;} .ProductInfoSocial .social-twitter {background: #55acee;} .ProductInfoSocial .social-link .fa {line-height: 30px;} |
Все, теперь по клику на кнопку будет выскакивать точно такое окно с предлодением поделиться страницей в соответствующей социальной сети.
Немає коментарів.