Перейти к содержимому


Кнопки "поделиться" Для Адаптивного Дизайна

yandex share адаптивный css3

  • Авторизуйтесь для ответа в теме
Сообщений в теме: 10

#1 Koderhan

Koderhan

    Активный участник

  • Модератоpы
  • 6 227 сообщений

Отправлено 03 Сентябрь 2013 - 16:06

Шаблон Вечность изначально является адаптивный и обычные кнопки поделиться не совсем подходят для отображения на маленьких экранах смартфонов. Часто, кнопки бывают маленькие и попасть по ним трудно. Но можно воспользоваться кнопками от yandex.share которые предназначены для отображения на маленьких экранах. http://api.yandex.ru/share/mobile.xml .
Пример как будет выглядеть.
ScreenShot 792.png ScreenShot 793.png
Установка таких кнопок производится довольно просто.
Все действия производятся в разделе Сайт -> Редактор шаблонов. Для добавления кнопок на страницу товара нужно открыть файл "Товар" и добавить после кода:
<div class="clear"></div>
	 <!-- Блок описания модификации -->
	 <div class="goodsDataMainModificationsDescriptionBlock" {% IFNOT GOODS_MOD_DESCRIPTION %}style="display:none;"{% ENDIF %}>
	 {GOODS_MOD_DESCRIPTION}
	 </div>
		 <div class="clear"></div>
	 </div>
Вот такой код:
<div class="goodsDataYandexShare">
		 <!-- Кнопки социальных сетей от yandex-share -->
		 <div id="yandex_share" class="orange"></div>
		 <!-- end Кнопки социальных сетей от yandex-share -->
		 </div>
ScreenShot 791.png
В блоке с id yandex_share будут выводиться кнопки.
Теперь нужно добавить JavaScript код  в конец файла "Товар":
<!-- Подключение скрипта от Yandex.Share, кнопки поделиться -->
<script type="text/javascript" src="//yandex.st/share/m.share.js" charset="utf-8"></script>
<script>
new Ya.share({
	 element: 'yandex_share', // id блока в котором выводятся кнопки
	 elementStyle: {
		 'type': 'none',
		 // Кнопки сервисов
		 'quickServices': ['yaru', 'vkontakte', 'facebook', 'twitter', 'odnoklassniki', 'moimir', 'lj', 'gplus']
	 },
	 link: '{CURRENT_URL}', // ссылка на страницу
	 title: '{PAGE_TITLE}', // заголовок страницы
	 description: '{GOODS_DESCRIPTION}', // короткое описание страницы
	 image: '{GOODS_IMAGE_LARGE}', // адрес изображения
	 serviceSpecific: {
		 twitter: {
			 title: '@{NET_DOMAIN} {GOODS_NAME}', // вывод сообщения в твитере. Формат: @адрес страницы название сайта
		 }
	 }
});
</script>
<!-- END Подключение скрипта от Yandex.Share, кнопки поделиться -->

Осталось добавить стили к кнопкам. В конец файла Styles.css , в самый конец файла добавить код:
/* Стили для кнопки Поделиться */
#yandex_share {
display: block;
width: 100px;
background: gray;
line-height: 2;
padding: 0 2%;
background-color: #FFF;
background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0.15) 50%);
background-image: -moz-linear-gradient(top, transparent 0, rgba(0, 0, 0, 0.15) 50%);
background-image: -o-linear-gradient(top, transparent 0, rgba(0, 0, 0, 0.15) 50%);
background-image: linear-gradient(top, transparent 0, rgba(0, 0, 0, 0.15) 50%);
cursor: pointer;
-moz-border-radius: 0.4em;
-webkit-border-radius: 0.4em;
border-radius: 0.4em;
}
.b-share-popup__yandex {
color: white;
text-align: left;
width: 100%;
display: inline-block;
padding: 0px 10px;
}
.goodsDataYandexShare {
padding: 2% 0%;
}
@media screen and (max-width: 480px) {
#yandex_share {
	 line-height: 2.5;
	 width: 120px;
	 text-align: center;
}
}
/* end Стили для кнопки Поделиться */


#2 vender12

vender12

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 172 сообщений

Отправлено 20 Март 2014 - 18:28

как мне сделать большие иконки поделиться в футере
магазин 8626

#3 MikDark

MikDark

    Активный участник

  • Модераторы
  • 6 468 сообщений

Отправлено 20 Март 2014 - 18:35

Просмотр сообщенияvender12 (20 Март 2014 - 18:28) писал:

как мне сделать большие иконки поделиться в футере
магазин 8626

Есть только такие
Скрытый текст

Можете еще поискать в интернете нужные вам скрипты кнопок и попробовать добавить на сайт.

#4 vender12

vender12

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 172 сообщений

Отправлено 20 Март 2014 - 18:52

Просмотр сообщенияMikDark (20 Март 2014 - 18:35) писал:

Есть только такие
Скрытый текст

Можете еще поискать в интернете нужные вам скрипты кнопок и попробовать добавить на сайт.

я не нашел, мне нужно стили добавить, подскажите какие стили добавить что бы увеличить иконки соц сетей

#5 MikDark

MikDark

    Активный участник

  • Модераторы
  • 6 468 сообщений

Отправлено 20 Март 2014 - 18:57

Просмотр сообщенияvender12 (20 Март 2014 - 18:52) писал:

я не нашел, мне нужно стили добавить, подскажите какие стили добавить что бы увеличить иконки соц сетей

Их нельзя увеличить, там идут изображения и они такого маленького размера.

#6 vender12

vender12

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 172 сообщений

Отправлено 26 Март 2014 - 17:10

Просмотр сообщенияMikDark (20 Март 2014 - 18:57) писал:

Их нельзя увеличить, там идут изображения и они такого маленького размера.

как мне кнопки в футер  добавить?
8626магаз

#7 MikDark

MikDark

    Активный участник

  • Модераторы
  • 6 468 сообщений

Отправлено 26 Март 2014 - 17:14

Просмотр сообщенияvender12 (26 Март 2014 - 17:10) писал:

как мне кнопки в футер  добавить?
8626магаз

Код кнопок поместите сразу после строки:
<div>{SETTINGS_STORE_HTML_CODE}</div>


#8 vender12

vender12

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 172 сообщений

Отправлено 26 Март 2014 - 17:45

Просмотр сообщенияMikDark (26 Март 2014 - 17:14) писал:

Код кнопок поместите сразу после строки:
<div>{SETTINGS_STORE_HTML_CODE}</div>

теперь их сдвинуть влево

#9 MikDark

MikDark

    Активный участник

  • Модераторы
  • 6 468 сообщений

Отправлено 26 Март 2014 - 17:49

Просмотр сообщенияvender12 (26 Март 2014 - 17:45) писал:

теперь их сдвинуть влево

Добавьте в main.css строки:
.yashare-auto-init {
text-align: left !important;
}


#10 vender12

vender12

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 172 сообщений

Отправлено 26 Март 2014 - 19:21

Просмотр сообщенияMikDark (26 Март 2014 - 17:49) писал:

Добавьте в main.css строки:
.yashare-auto-init {
text-align: left !important;
}

очень низко встали кнопки

#11 MikDark

MikDark

    Активный участник

  • Модераторы
  • 6 468 сообщений

Отправлено 26 Март 2014 - 19:27

Просмотр сообщенияvender12 (26 Март 2014 - 19:21) писал:

очень низко встали кнопки

В шаблоне HTML найдите строчку:
<div>{SETTINGS_STORE_HTML_CODE}</div>

и замените на:
<div style="float:right">{SETTINGS_STORE_HTML_CODE}</div>






Темы с аналогичным тегами yandex share, адаптивный, css3

Количество пользователей, читающих эту тему: 0

0 пользователей, 0 гостей, 0 анонимных