Привет, Хабр!

Сегодня небольшим, но полезным туториалом с нами поделится Дмитрий Кабаков, 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 фронтенд-разработчик.