Блог веб-разработчика v 1.0.0
Symfony2, AngularJS, React, Gulp, PhpStorm и много других страшных слов

Адаптивные кнопки шаринга в соц-сети

10 лет назад
9665 просмотров
JavaScript jQuery plugin Полезности

Адаптивные кнопки расшариванияСреди множества плагинов для добавления шаринг-кнопок ходит один и тот же жирный минус. Ни один плагин не реагирует на разрешение экрана пользователя. kni-labs занялись этой проблемой и вот что у них получилось: https://github.com/kni-labs/rrssb

jQuery плагин (так же используется modernizr) позволяющий создать кнопки расшаривания для Facebook, Linkedin, Twitter, Google+, Pinterest, GitHub, а так же отправить страницу на Email. Выбор не велик, но, думаю, список поддерживаемых соц-сетей будет со временем пополняться.

 

Подключение плагина

Подключаем файл стилей и скриптов. Будем считать, что jQuery и Modernizr вы уже подключили (если что, они оба есть в репозитории):

<link rel="stylesheet" href="css/rrssb.css" />
<script src="js/rrssb.min.js"></script>

HTML для кнопок необходимо писать самостоятельно в качестве LI внутри UL с классом rrssb-buttons. При добавлении к ссылке кнопки класса popup, она будет всплывать в отдельном окне. Это не слишком удобно, но позволяет встраивать практически любые кнопки в эту систему. Например, в репозитории есть готовые иконки для YouTube, Tumblr, Instagram, Reddit помимо тех, что я перечислил в начале статьи. Исходный код кнопок можете взять из демо, т.к. не хочется сильно увеличивать статью.

Плагин может использоваться не только для соц кнопок, но и для вообще любых кнопок, т.к. он просто автоматически подстраивает их размер и не "смотрит" на содержимое.

Живой пример социальных кнопок:

Что еще почитать