Кнопки поделиться без использования сторонних скриптов (vamshop)

21.11.2017 | Написал

В вамшопе уже довольно давно на странице товара используется блок «Поделиться» от «Яндекса». Он помогает посетителям сайта быстро публиковать ссылки на страницы в социальных сетях и блогах. Блок полезный, но с некоторых пор «Яндекс» блокируется в Украине, и это создает проблемы при загрузке страниц товара. Заменим сторонний скрипт «Яндекса» для того, что бы эта функция осталась для основных соцсетей следующим образом:
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;}

Все, теперь по клику на кнопку будет выскакивать точно такое окно с предлодением поделиться страницей в соответствующей социальной сети.

Метки: ,
Комментарии читателей статьи "Кнопки поделиться без использования сторонних скриптов (vamshop)"

Нет комментариев.

Добавить комментарий

Ваш e-mail не будет опубликован.