Кнопка поделиться в соц.сетях для карточки товара Tilda

Смотреть урок

Данный код помогает добавить иконку и функционал поделиться во всех социальных сетях в карточку товара Тильда. Работает также с отдельной страницей

Главная
/
Модификации
/
Кнопка поделиться в соц.сетях

Инструкция

Копируем и вставляем код №1 в шапку или в подвал в блок "T123".

Копируем и вставляем код №2 ниже. Этот код фиксирует кнопку и добавляет стили к моб. версии

Скопировали ID блока у первого кода и вставили вместо "#rec406178179"

Скопировать код №1

Код скопирован


 <!-- Кнопка поделиться в соц.сетях для карточки товара Tilda -->
 <!-- https://youx.agency/knopka-podelitsya-v-sots-setyakh-dlya-kartochki-tovara-tilda -->

<div class="ya-share2" data-curtain data-shape="round" data-color-scheme="whiteblack" data-limit="0" style="max-width: 1200px; margin-left: auto; margin-right: auto;" data-more-button-type="short" data-services="vkontakte,facebook,odnoklassniki,telegram,twitter,viber,whatsapp"></div>
<script src="https://yastatic.net/share2/share.js"></script>

Скопировать код №2

Код скопирован


 <!-- Кнопка поделиться в соц.сетях для карточки товара Tilda -->
 <!-- https://youx.agency/knopka-podelitsya-v-sots-setyakh-dlya-kartochki-tovara-tilda -->

<style>
#rec406178179{position:absolute;visibility:visible;top:100px;left:0;width:100%;z-index:9998}
</style>
<!-- Стили кнопки поделиться ссылкой в соц. сетях  -->
<style>
.ya-share2__container_color-scheme_whiteblack .ya-share2__item_more .ya-share2__icon_more {
    background-image: url(https://static.tildacdn.com/tild3562-6238-4564-a437-623239653239/log_out_icon_128821.svg)!important;
}
.ya-share2__item_more.ya-share2__item_has-pretty-view .ya-share2__badge_more {
    background: #fff!important;
}
.ya-share2__container_size_m .ya-share2__badge .ya-share2__icon {
    height: 34px!important;
    width: 34px!important;
}
.ya-share2__item_more .ya-share2__badge, .ya-share2__item_copy .ya-share2__badge {
    background: none!important;
}
.ya-share2__container_size_m .ya-share2__badge + .ya-share2__title {
    margin-right: 10px;
    margin-top: 5px;
    margin-bottom: 5px;
    margin-left: 5px!important;
}
.ya-share2__container_size_m .ya-share2__item_more.ya-share2__item_has-pretty-view .ya-share2__link_more.ya-share2__link_more-button-type_short {
    background: none!important;
}
.ya-share2__container_size_m .ya-share2__popup:not(.ya-share2__popup_mobile) > :last-child:not(:empty):not(.ya-share2__copied-tooltip) {
    padding-left: 0px!important;
    padding-bottom: 0px!important;
}
.ya-share2__container_size_m .ya-share2__popup_direction_bottom {
    top: 50px!important;
}
.ya-share2__popup-content .ya-share2__messenger-contacts-list .ya-share2__item .ya-share2__link, .ya-share2__popup-content .ya-share2__popup-tile .ya-share2__item .ya-share2__link {
    color: #333!important;
}
@media screen and (max-width: 640px) {
.ya-share2__list.ya-share2__list_direction_horizontal{
    margin-top: 45px;
    position: absolute;
    right: 10px;
}}
@media screen and (min-width: 640px) and (max-width: 960px) {
.ya-share2__list.ya-share2__list_direction_horizontal{
    margin-top: 109px;
    position: absolute;
    right: 94px;
}}
@media screen and (min-width: 960px) and (max-width: 1200px) {
.ya-share2__list.ya-share2__list_direction_horizontal {
    margin-top: 97px;
    position: absolute;
    left: 410px;
}}
@media screen and (min-width: 1200px) {
.ya-share2__list.ya-share2__list_direction_horizontal {
    margin-top: 86px;
    margin-left: 610px;
    position: absolute;
    visibility: visible;
}}
</style>

Другие модификации

Наш чат Telegram

Вступите в наш чат для общения, помогаем и консультируем по проектам, продвигаем проекты Behance, рассказываем о дизайне

Ютуб канал

Вступить в чат

* Регулярная техническая поддержка, помощь и консультации