Привет, Хабр!
Сегодня небольшим, но полезным туториалом с нами поделится Дмитрий Кабаков, 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 фронтенд-разработчик.
Комментарии (22)
DigitalSmile
02.09.2015 18:06+3Написали, что JS-плагин, а на деле оказалось JQuery…
DataArt
02.09.2015 18:14-1Закралось. Починили, спасибо за бдительность.
DigitalSmile
02.09.2015 18:20А я все же надеялся :)
Было бы полезно мне кажется иметь виджет, без лишних зависимостей… Может кто подскажет такой, с опытом реального использования?
RabbitGP
02.09.2015 18:07-8Интересно, с меня подписка!))) И ещё такой вопрос: как это скрипт совмести с flash сайтами, не будет ли скрипт прыгать на сайте при скроле?
cmepthuk
02.09.2015 23:40+41. Зачем привязываться по id ссылок? А если кнопок несколько на странице? В самой основе это довольно не корректно, классы — наше всё, разве нет?
2. Зачем все такм таскать jQuery, когда есть и аналоги на pure js, и свой велосипед написать — делов на полчаса (включая приоготовление и поедание бутербродов)?
3. Ради четырех иконок таскать все 585? Есть же куда более аскетичные аналоги, подумайте о трафике и целесообразности. Исключения, разумеется — проекты уже использующие fa, но ведь довольно часто примеры копипастят не задумываясь
prog666
03.09.2015 11:04В чем плюсы использования тегов списка вместо обычных <div/>?
cmepthuk
03.09.2015 11:09Семантически вернее, и логичнее отображается при отсутствии css. Как то так
prog666
03.09.2015 11:11А если вдруг потом понадобиться добавить div внутрь этого li, что будете делать? ну в данном случае то понятно что не понадобится, но иногда бывают сложные многоуровневые меню где списками их делать просто неудобно, и я всегда хотел спросить кого-нибудь на эту тему.
cmepthuk
03.09.2015 11:24- Если подразумевается блочная структура — делай внутри блоков (при отсутствии css будет каша).
- Если только ссылки — делай списками (при отсутствии css всё будет хорошо).
- Если хочешь блоки внутри списков — переопределяй свойства
display, сохраняя валидность кода и получая требуемое отображение (при отсутствии css будет каша). Но перед этим пересмотри п.1 и п.2.
Надеюсь, я ответил на твой вопрос :)prog666
03.09.2015 11:25Да, в целом я так и думал, спасибо за ответ! А насколько актуальна читаемость без css, как много осталось пользователей браузеров типа «Lynx»?
cmepthuk
03.09.2015 11:30Крайне мало, я бы назвал это хорошим тоном, который не хреново так дисциплинирует. Страница должна отображаться корректно, даже если у неё отсутствуют изображения, стили, и прочее. Т.е. «голая» верстка должна оставаться читаемой вне зависимости от внешних факторов.
RabbitGP
Очень интересная идея и полезная, думаю многим она пригодится. Надо попробовать, но есть вопрос по оформлению: есть ли какие нибудь ограничения или параметры?
Спасибо за статью.
DataArt
Ограничений нет: структура и стили — все кастомные. Только воображение и скиллы могут вас остановить.
На Copyblogger использовано подобное, например. Другие примеры можно посмотреть на сайте плагина.