Кнопки поделиться без использования сторонних скриптов (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)"

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

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

Ваш адрес email не будет опубликован.

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.