Как изменить внешний вид социальных кнопок?
Здравствуйте, друзья. Сегодня покажу как поставить кнопки социальных сетей на свой сайт задать им любой внешний вид. Будем устанавливать кнопки Goodshare, про преимущества которых сейчас и расскажу.
Преимущества Goodshare
Кратко почему именно Goodshare:
- Легкий код, а значит быстрая скорость работы;
- Отображение на всех устройствах;
- Универсальные настройки (можно задать любой вид);
А теперь подробно о каждом плюсе.
Код Goodshare не содержит скрытых скриптов слежения за вашими посетителями, рекламы или обратных ссылок на автора. Все это делает код гораздо легче аналогов (Pluso, UpToLike, Share42 и другие плагины социальных кнопок). А мы знаем правило: легче код — быстрее работа сайта.
Кнопки отображаются отлично на всех устройствах, от смартфона до компьютера с широкоформатным экраном. К тому же, кнопки поддерживают share-технологии мобильных мессанджеров: Telegram, Viber, WhatsApp. Это говорит о том, что расшаривать информацию с мобильных устройств будет гораздо проще, а значит делиться ее будут чаще.
Скрипт написан таким образом, что сделать share-кнопкой можно любой элемент. Тут сразу 2 плюса! Во-первых, мы не ограничены в выборе элементов (это могут быть ссылки, текст, кнопки). Во-вторых, мы избавляемся от внешних ссылок на соц. сети (все помнят кнопку Twitter, которую приходилось закрывать от поисковиков).
По-моему, преимущества над конкурентами огромные!
Устанавливаем на свой блог
Установка довольно простая. Переходим на сайт Goodshare.ru и нажимаем «Установить кнопки на сайт».
Будем подключать напрямую с их сервера, выбираем первый вариант. Копируем код и вставляем его в файл «footer.php». Для тех, кто хочет сохранить скрипт на своем сервере — есть возможность скачать его.
После этого, в том месте, где вы хотите вывести кнопки добавляем следующий код:
1 2 3 4 |
<div class="goodshare" data-type="fb"> Поделиться в FB <span data-counter="fb"></span> </div> |
Где следующие параметры:
- data-type — выбранная нами соц. сеть. Остальные соц. сети смотрите здесь: Goodshare.ru/documentation.html;
- Блок с data-counter — счетчик. Если не нужен — удалите его.
Быстро прописав стили, получил такой вид кнопок:
Если у вас блог имеет оригинальный или рисованный дизайн, вы можете использовать в кнопках любые картинки. Тут все ограничивается только вашей фантазией.
Уверен, это лучшее решение для изменения внешнего вида социальных кнопок. Если кто-то не согласен — поделитесь своим мнением в комментариях!)
На этом заканчиваю. Удачного дня!
Важность социальных кнопок неоспорима, у меня они везде поставлены, считаю, что они не помешают и нужны для социальных сигналов. Понравился блог, оформила подписку, люблю изучать вордпресс.
Вот за эту статью спасибо. Для тех, кто знает css такие кнопки просто находка. Под любой дизайн можно будет сделать.
Всегда искал такую возможность, а тут ребята прям уловили то, в чем так нуждались верстальщики.
Благодарю за статью! Хочу установить именно такие же кнопки как у Вас, только не могу разобраться как оформить сам дизайн кнопок, т.е. не знаю как работать со стилями. Можно об этом немного подробнее?
Виталий, вы можете посмотреть все стили через инспектор кода: кликаете на нужном элементе правой кнопкой мыши, выбираете «Исследовать элемент». Там видны стили к любому элементу.
Либо могу сделать такие же как у меня за 200 руб. — напишите на почту.