Как Модифицировать Социальные Кнопки От Яндекса?

Разработчикам Общение разработчиков
1

Приветствую всех.

Исходные данные:

Имеется код социальных кнопок от Яндекса, который установлен через стандартный модуль "Социальные кнопки". Приводить скриншот не буду. Эти кнопочки знают все.

С одной стороны - социальные кнопки вроде как способны увеличить количество социальных сигналов для поисковиков. Т.е. как бы полезны.

С другой - они слишком контрастны и способны "отвлечь" от кнопки "Купить" и рассеивают внимание покупателя. Есть исследования, подтверждающие эту точку зрения.

Решение подсмотрел у Вайлдберрис и Ламода.

WB: http://prntscr.com/ie46f1

Lamoda: http://prntscr.com/ie46y6

Поясню: На этих сайтах всё время кнопки черно-белые и не являются контрастным элементом. При наведении курсора мыши кнопки "превращаются" в цветные.

Вопрос: как можно реализовать такое решение для кнопок от яндекса?

В дефолтной теме нужный эффект используется для блока "Брэнды" на главной странице. Можно ли это как-то использовать?

PS: Поскольку я вовсе не программист, буду очень благодарен за излишнюю подробность в ответе.

2

В упомянутом блоке используется класс ty-grayscale . Попробуйте его повесить на весь блок с кнопками

3

В упомянутом блоке используется класс ty-grayscale . Попробуйте его повесить на весь блок с кнопками

Можно прямо пример с синтаксисом, чтобы я ерунду не напорол... Спасибо!

Дело в том, что блока самостоятельного сейчас нет. Код кнопок прописываю через модуль "социальные кнопки", сами кнопки в итоге выводятся в блоке "Главное содержимое". Надо как-то код во что-то "обернуть", если я правильно понимаю. Как это должно выглядеть?

4

Сделал так (итоговый код): 

Поделитесь с друзьями:

Почти получилось, но...

Сейчас при наведении курсора на любую кнопку, цветными становятся все кнопки. Можно как-то сделать цветной только конкретную кнопку? Или я много хочу? :grin:

5

Почти сразу родилась идея выводить разный набор кнопок для десктопа и для мобильного. Вопрос: насколько корректен будет такой код:

Идея в том, чтобы на компе не показывать кнопки Ватсап, Вайбер и Телеграм.

6

Как вариант. Чтоб не бросались в глаза иконки и было по красоте, в CSS вставьте следующий код:

.b-share_theme_counter .b-share-btn__vkontakte {
filter: grayscale(100);
opacity: .5;
}
.b-share_theme_counter .b-share-btn__vkontakte:hover {
filter: grayscale(0);
opacity: 1;
}
.b-share_theme_counter .b-share-btn__facebook {
filter: grayscale(100);
opacity: .5;
}
.b-share_theme_counter .b-share-btn__facebook:hover {
filter: grayscale(0);
opacity: 1;
}
.b-share_theme_counter .b-share-btn__twitter {
filter: grayscale(100);
opacity: .5;
}
.b-share_theme_counter .b-share-btn__twitter:hover {
filter: grayscale(0);
opacity: 1;
}
.b-share_theme_counter .b-share-btn__odnoklassniki {
filter: grayscale(100);
opacity: .5;
}
.b-share_theme_counter .b-share-btn__odnoklassniki:hover {
filter: grayscale(0);
opacity: 1;
}
.b-share_theme_counter .b-share-btn__moimir {
filter: grayscale(100);
opacity: .5;
}
.b-share_theme_counter .b-share-btn__moimir:hover {
filter: grayscale(0);
opacity: 1;
}
Результат "вживую" можно глянуть тут: http://test-cart.tw1.ru/elektronika/igrovye-pristavki/aksessuary/dualshock-4/
7

Сделал более универсальный вариант с небольшими изменениями.

Результат сразу для всех кнопок, а не для каждой по отдельности:

.b-share-btn__wrap {
filter: grayscale(100);
-webkit-filter: grayscale(100);
opacity: .5;
transition: 1s;
}
.b-share-btn__wrap:hover {
filter: grayscale(0);
-webkit-filter: grayscale(0);
opacity: 1;
transition: .5s;
}
8

Коллега albinos помог с решением задачи.

Заслуга в этом только его. Я лишь выкладываю решение. Всё протестировано, все работает.

Решение работает с кодом социальных кнопок, представленным тут: https://tech.yandex.ru/share/

Чтобы кнопочки в пассивном состоянии были бледненько-черно-белые, а "загорались" по отдельности при наведении курсора нужно вставить пользовательский CSS:

.ya-share2__list_direction_horizontal > .ya-share2__item {

-webkit-filter: grayscale(100);

filter: grayscale(100);
opacity: .5;
transition: 1s;



}


.ya-share2__list_direction_horizontal > .ya-share2__item:hover {

-webkit-filter: grayscale(0);

filter: grayscale(0);

opacity: 1;

transition: .5s;

}

Для таких же "продвинутых", как я: вставляется он Дизайн-Темы-Редактор_тем-Редактировать-Пользовательские_CSS.

Чтобы на ПК не отображались кнопки "телефонных" месенджеров (Ватсап, Вайбер и Телеграм), туда же вставляем код:

@media screen and (min-width: 767px) {
.ya-share2__item_service_viber .ya-share2__icon {
    display: none;
}

.ya-share2__item_service_whatsapp .ya-share2__icon {

display: none;

}


.ya-share2__item_service_telegram .ya-share2__icon {

display: none;

}

}

Благодарим автора!

2 лайка
9

Возник вопрос: как фразу "Поделиться", предшествующую кнопкам сделать с ними в одной строке? Сейчас она над кнопками...

Исходный код такой:

Поделиться:

Есть мысль оформить вывод таблицей, но от этого решения каким-то "колхозом" веет. Есть другие варианты?

10

Социальные кнопки от Яндекса отключил, ибо сильно тормозили. Зачем-то загружали tag.js - вебвизор который не нужен.
Поставил кнопки от сервиса uptolike, работают хорошо и не грузят. Код прописал в окошко, где кнопки от Яндекса были.