Лучшие кнопки социальных сетей — большие кнопки от Яндекс

Перепробовав огромную кучу различных кнопок социальных сетей (кнопки поделиться), я остановился на блоке «Поделиться» от Яндекс и вот почему:

  • Это Яндекс. Это не левый сервис, который может встроить в свои коды какой-нибудь вирусный фрагмент кода. Яндекс так может, но вряд ли он будет это делать;
  • Это Яндекс. Другие сервисы, которыми я пользовался, могли иногда долго грузиться или вовсе, перестать работать. У Яндекса пока хватает «сил» поддерживать их непрерывную работоспособность;
  • Большое количество кнопок различных сетей;
  • Бесплатно;
  • Легко встраиваются.

Есть и минусы: очень мало настроек. Ну ЁМАЁ! Вы Яндекс! Добавьте хотя бы возможность выбирать размер кнопок, это ведь не трудно и не перегрузит ваши нежные сервера!

Как сделать кнопки блока «Поделиться» от Яндекс больше

Сначала устанавливаем кнопки как обычно. Просто встраиваем код, который дал Яндекс, в нужное место на сайте. Как вы сможете увидеть, будут они очень маленькими и скудными.

Чтобы поменять их размер и сделать более заметными, внесем изменения в их CSS код. НО, делать это будем, разумеется, на стороне нашего сайта.

Лучшие кнопки социальных сетей - большие кнопки от Яндекс

Исследовав элемент кнопок, мы нашли нужный нам параметр (класс).

Лучшие кнопки социальных сетей - большие кнопки от Яндекс

Что делаем дальше?

Открываем шаблон, куда вы вставили код кнопок.

Над самим кодом кнопок добавляем конструкцию вида:

<style>
.ya-share2__icon{
  width: Npx!important;
  height: Npx!important;
  background-size: Npx Npx!important;
}
</style>

Все N нужно заменить на числа — это и есть размер наших иконок. Тут можно задать любой размер, именно этого параметра и не хватает в стандартных настройках.

Ключевое слово здесь !important, именно благодаря ему наши кнопки имеют теперь тот размер, который диктуем ему мы, а не сервера Яндекс.

Пример готово кода с размером иконок в 36px.

<style>
.ya-share2__icon{
  width: 36px!important;
  height: 36px!important;
  background-size: 36px 36px!important;
}
</style>

P.S. Почему я не добавил этот код в CSS файл своей темы? Все просто, тогда он будет работать не на всех сайтах, так произошло и у меня. Дело в том что многие используют нестандартные темы или плагины, которые оптимизируют код сайта. Попробуй объяснить новичку почему код не работает? Проще использовать мой вариант и встраивать его непосредственно на ту страницу, где располагаются сами кнопки.

На этом мини-урок окончен 🙂


Читайте также:

Переход WordPress на HTTPS на примере моего блога... Вот и пришла пора переводить свой блог на HTTPS протокол. Хоть и до сих пор не вижу смысла, учитывая...
Как удалить стандартный jquery в wordpress Если вы хоть раз задумывались о масштабной оптимизации WordPress сайта, то вы наверняка задавались э...
Включаем асинхронную загрузку JavaScript на WordPress... Сейчас я расскажу Вам об интересном способе, который поможет вам ускорить свой сайт на WordPress за ...
WordPress — высокая нагрузка на хостинг. 2 хитрости для защиты с... Многие владельцы сайтов на WordPress задаются вопросами: «Почему мой сайт создает большую нагрузку н...
WordPress — запрещаем индексирование страниц с изображениями (At... При очередном анализе своего сайта, я обнаружил страшную находку! Обратите внимание, какие ст...

Комментарии к посту

  1. Пример кнопок можете наблюдать под статьей. Гораздо круче чем стандартные 🙂

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *