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

Опубликовано: 01.09.2018

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

Как поставить кнопки социальных сетей на WordPress с помощью плагина UpToLike

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



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

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


Как сделать кнопки социальных сетей для сайта wordpress

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

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

Чтобы поменять их размер и сделать более заметными, внесем изменения в их 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 файл своей темы? Все просто, тогда он будет работать не на всех сайтах, так произошло и у меня. Дело в том что многие используют нестандартные темы или плагины, которые оптимизируют код сайта. Попробуй объяснить новичку почему код не работает? Проще использовать мой вариант и встраивать его непосредственно на ту страницу, где располагаются сами кнопки.

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

rss