социальные кнопки Яндекс.Share / Блок кнопок «Поделиться» своего размера

211
.
VARG
¤
И так, приветствую вас, камрады.
Постала необходимость разместить кнопки Яндекс.Share на паре проектов, но размеры, которые предлагает Яндекс, никому давно уже не втарахтели, 18 и 24 пикселя - это уже звиняйте, прошлый век, т.к. щас все дизайны адаптивные, => кнопки многие жмакают с плашмета/смурфона и т.д.

Год назад, была похожая задача, спасибо Максу, подкинул вариант со "своими" иконками для шары, НО: сейчас то появились на я.шаре новые сервисы (вайбер, вацап, скайп, телеграм) и их конечно же ОЧЕНЬ выгодно запиливать для шарокнопок! Но дорисовывать новые иконки в прошлый вариант - не улыбалось, если честно, да и css потом допиливать надо было.. Короче, заморочился я этим вопросом так, что все блин бросил)))

В итоге. Оказалось, сами иконки в яндекс.шаре в svg и вшиты в css в base64, а их размер собсно довольно просто фиксется в слитом ихнем же css, и заботливо подсунутом шаре локально.

Мануал для тех, кому надо поменять размер кнопок Яндекс.Share на свой.
Изменение размера кнопок Яндекс.Share / Блок кнопок «Поделиться»

1) Заходим на страницу яндекс.шары https://tech.yandex.ru/share/

2) Выбираем Внешний вид блока Только иконки

3) Вставляем выданный вам код кнопок:

<script src="//yastatic.net/es5-shims/0.0.2/es5-shims.min.js"></script>
<script src="//yastatic.net/share2/share.js"></script>
<div class="ya-share2" data-services="vkontakte,facebook,odnoklassniki,moimir,gplus,twitter,viber,whatsapp,skype,telegram"></div>


4) Качаем файлик css (см.вложение)

5) Правим в нем размер иконок (для большого размера M по Яндексу):
.ya-share2__container_size_m .ya-share2__icon {
    height: 34px !important;
    width: 34px !important;
    background-size: 34px 34px !important ;
}
.ya-share2__container_size_m .ya-share2__title {
    line-height: 34px !important;
}


6) Вписываем наш css в нужном файле в бошке:
<link href="css/share.css" rel="stylesheet">


7) Профит
Прикрепленные файлы:
Всего: 1
Фильтр по автору
Скачать тему