Привет, Хабр!
Сегодня небольшим, но полезным туториалом с нами поделится Дмитрий Кабаков, Senior фронтенд-разработчик DataArt.
В современном «гугломире» все большую важность набирает социальная составляющая сайта. Но обычные социальные виджеты/коды не всегда почти никогда не вписываются в оформление сайта.
Что же делать? Нужно оформлять!
Для туториала вам понадобится:
- JS-плагин 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. Оформление
Тут все зависит от вашего воображения и, конечно, навыков. Ниже предлагаю вариант оформления:
<p data-height="315" data-theme-id="0" data-slug-hash="JdYbYQ" data-default-tab="result" data-user="Dmitriy-ateo" class='codepen'>See the Pen <a href='http://codepen.io/Dmitriy-ateo/pen/JdYbYQ/'>JdYbYQ</a> by Dmitriy (<a href='http://codepen.io/Dmitriy-ateo'>@Dmitriy-ateo</a>) on <a href='http://codepen.io'>CodePen</a>.</p> <script async src="//assets.codepen.io/assets/embed/ei.js"></script> Итог
В итоге плагин берет на себя функциональность, а оформление внешнего вида оставляет за нами. Благодаря простоте подключения, плагин можно использовать на различных страницах. Подключив lazy-load-скрипты социальные кнопки можно будет загрузить по мере появления их на странице.
В чем подвох?
Использование плагина значительно упрощает жизнь, но, конечно, есть и минусы такого подхода. Во-первых, этим плагином поддерживаются не все социальные сети, а только базовые. Во-вторых, для Google+ нужно дополнительно подключить PHP-скрипт, что добавляет некоторые трудности в реализацию.
Автор: Дмитрий Кабаков, Senior фронтенд-разработчик.
ссылка на оригинал статьи http://habrahabr.ru/post/265991/
Добавить комментарий