Размер кнопок в блоке Яндекс.Поделиться

#javascript #css #яндекс #share #ya_share2

Как увеличить размер кнопок "Поделиться", используя сервис Яндекс/Поделиться?
    

Ответы

Ответ 1

UPD. Спасибо EatMyDust за комментарий к ответу. Исследовал вопрос подробнее.

Яндекс предлагает 4 внешних вида для блока «Поделиться». Четвёртый из них — с кнопками
маленького размера, поэтому увеличивать интересно только первые три.

Предлагаю вариант стилей для кнопок со стороной 32 пикселя вместо 24. Базовые значения —
в комментариях к каждой строке.


ya-share2__container_size_m .ya-share2__icon нужно переопределить для всех видов блока.
Для блока со счётчиками нужно добавить .ya-share2__container_size_m .ya-share2__counter.
А для блока с меню — .ya-share2__container_size_m .ya-share2__icon_more:before и
.ya-share2__container_size_m .ya-share2__popup_direction_bottom.




/* 1 */
.ya-share2__container_size_m .ya-share2__icon {
    height: 32px !important; /* 24px */
    width:  32px !important; /* 24px */
    background-size: 32px 32px !important; /* 24px 24px */
}

/* 2 */
.ya-share2__container_size_m .ya-share2__counter {
    font-size: 14px !important; /* 12px */
    padding: 8px 10px 0 10px !important; /* 5px 8px 0 8px */
}

/* 3 */
.ya-share2__container_size_m .ya-share2__icon_more:before {
    line-height: 22px !important; /* 13px */
}
.ya-share2__container_size_m .ya-share2__popup_direction_bottom {
    top: 36px !important; /* 28px */
}
только иконки


счётчики


иконки и меню






Ответ 2

Вообще, если есть необходимость как то визуально изменить блок, наиболее правильным
путём будет использование атрибута data-bare, который является признаком того, что
загрузка стилей отключена. Если добавить атрибут, соцсети будут отображаться в виде
текстового вертикального списка. А дальше на своей стороне можете делать оформление
как удобнее. У вас, по факту остаётся минимальная вёрстка и доступ к API блока.


Ответ 3

Нет никакой гарантии, что переопределение стилей, предлагаемое @Gleb Kemarsky, не
сломается при ближайшем обновлении блока.

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



.ya-share2__list {
  transform: translate(25%, 25%) scale(1.5);
}







Для старых IE можно использовать в качестве фоллбэка свойство zoom.