Добрый день,
Хочу рассказать вам про, как мне кажется, очень интересный jQuery плагин, который позволяет привязывать свой дизайн практически ко всем популярным современным социальным сервисам. Он может существенно облегчить жизнь тем, кому нужно быстро создать share button'ы или виджеты со своим дизайном, отличающимся от шаблонных.
Называется он — Sharrre и достался мне совершенно случайно. Как-то вечером я решил попрактиковаться и сделать верстку CSS3 лайк-баттонов для нескольких соц. сетей, привязав к ним свой собственный дизайн, главным же условием было наличие cчетчиков, которые бы показывали сколько людей уже успело нажать на кнопку. Facebook, Twitter и Digg предоставляют достаточно удобный API, и с помощью $.getJSON лайки тянутся совершенно спокойно, никаких проблем не возникло. А вот с другими сервисами все несколько сложнее, и если вы уже пробовали сделать что-то подобное с Google+, то, скорее всего, вас ожидала неудача. Как раз тут мне на помощь и пришел этот чудесный плагин, разработанный Жульеном Ани.
Что особенно радует, Sharrre позволяет использовать свою верстку кнопок, она помещается внутрь div'а с айди, на который собственно и вешается функция:
<div id="facebook" class="boxer" data-url="http://labs.voronianski.com/css3-share-buttons/" data-text="CSS3 Share Chunky Buttons"></div>
data-url — урл, которым мы делимся;
data-text — текст, который будет отображаться в вашем твите или хронике;
data-title — текст самой кнопки.
В качестве примера, привожу демо страницу, во время создания которой я и открыл плагин для себя.
Фрагмент jquery-кода выглядит следующим образом:
$('#facebook').sharrre({
share: {
facebook: true
},
template: '<a href="#" data-counter="{total}" class="facebook sharer gradient"><span></span>Like</a>',
shorterTotal: true,
enableHover: false,
enableTracking: true,
click: function(api, options){
api.simulateClick();
api.openPopup('facebook');
}
});
$('#pinterest').sharrre({
share: {
pinterest: true
},
urlCurl: 'sharrre.php',
template: '<a href="#" data-counter="{total}" class="pinterest sharer gradient">Pin it</a>',
shorterTotal: true,
enableHover: false,
enableTracking: true,
click: function(api, options){
api.simulateClick();
api.openPopup('pinterest');
}
});
Для лайков на Google+, StumbleUpon и Pinterest все еще используется php-скрипт. Обратите внимание на параметр template, в нем находится верстка кнопки. Плагин предоставляет достаточно много интересных опций и параметров для кастомизации, поэтому для более детального ознакомления с его возможностями, советую почитать документацию.
Демо можно посмотреть тут.
Документация по плагину тут.
Буду благодарен за комментарии. Спасибо!