Привет, Хабр!
Сегодня небольшим, но полезным туториалом с нами поделится Дмитрий Кабаков, Senior фронтенд-разработчик DataArt.
В современном «гугломире» все большую важность набирает социальная составляющая сайта. Но обычные социальные виджеты/коды не всегда почти никогда не вписываются в оформление сайта.
Что же делать? Нужно оформлять!
Для туториала вам понадобится:
- jQuery-плагин sharrre;
- иконки FontAwesome;
- знания HTML/CSS3;
- минут 10 вашего времени
Шаг 1. Создание структуры
Думаю, наилучшим вариантом будет список из основных социальных сетей.
<ul class="socials">
<li id=”twitter” class="social"></li>
<li id=”facebook” class="social"></li>
<li id=”linkedin” class="social"></li>
<li id=”pinterest” class="social"></li>
</ul>
Полагаю, этого хватит. Внутренности указываются в скрипте Sharrre. Если нам не нужен пользовательский шаблон, можно не указывать структуру, но сейчас — не тот случай.
Шаблоны практически идентичные, меняем лишь FontAwesome-класс иконки (ставим класс иконки, соответствующий социальной сети).
<span class="fa fa-twitter"></span>
<a class="box" href="#">
<div class="count" href="#">{total}</div>
</a>
Шаг 2. Подключение плагина Sharrre
Со структурой разобрались, подключаем плагин.
$('#twitter').sharrre({
share: { twitter: true },
template: '<span class="fa fa-twitter"></span><a class="box" href="#"><div class="count" href="#">{total}</div></a>',
enableHover: false,
buttons: {
twitter: {
via: 'your_account'
}
},
click: function (api, options) {
api.simulateClick();
api.openPopup('twitter');
}
});
Вкратце мы просим скрипт:
- показать только одну социальную сеть;
- применить пользовательский шаблон;
- скрыть базовый функционал сети;
- на клик выполнить функционал социальной кнопки.
Аналогично — для каждой сети (для google+ нужно еще подключить PHP-скрипт).
Шаг 3. Оформление
Тут все зависит от вашего воображения и, конечно, навыков. Ниже предлагаю вариант оформления:
codepen.io/Dmitriy-ateo/pen/JdYbYQ
Итог
В итоге плагин берет на себя функциональность, а оформление внешнего вида оставляет за нами. Благодаря простоте подключения, плагин можно использовать на различных страницах. Подключив lazy-load-скрипты социальные кнопки можно будет загрузить по мере появления их на странице.
В чем подвох?
Использование плагина значительно упрощает жизнь, но, конечно, есть и минусы такого подхода. Во-первых, этим плагином поддерживаются не все социальные сети, а только базовые. Во-вторых, для Google+ нужно дополнительно подключить PHP-скрипт, что добавляет некоторые трудности в реализацию.
Автор: Дмитрий Кабаков, Senior фронтенд-разработчик.
