IndieSocial — кнопки социальных сетей без внешних скриптов

Возможность поделиться каким-либо материалом в социальных сетях используется довольно часто. Почти все социальные сети предоставляют скрипты для вставки таких кнопок на веб-страницы. Но с этим решением есть две проблемы.

1. Скорость загрузки. Если вы разместите огромное количество таких кнопок, то страницы будут грузиться медленно, а если одна из социальных сетей лежит, то пользователи скорее закроют ваш сайт, чем будут ждать. Да, это можно решить ассинхронной загрузкой, и даже есть библиотека Socialite.js для этого, но даже она не отменяет общего размера кнопок.
2. Приватность. Социальные сети узнают не только о том, что вы туда добавили сами, но даже и том, что вы посетили страницу с подобным виджетом.

Но отказываться полностью от кнопок не обязательно. Я написал небольшую библиотеку на JS, которая работает полностью автономно и распространяется на условиях CC0.

Мне очень нравится блок «Поделиться» от Яндекса и я старался сделать что-то подобное, но с возможностью полностью контролировать данные и без редиректов кликов через собственный сервер. Также мне нравится Fontello, поэтому иконки социальных сетей сделаны через него. Fontello — это шрифт с иконками и небольшая библиотека, позволяющая вставлять иконки в текст так, как это сделано в Twitter Bootstrap — путем создания элемента с class="код_иконки".

IndieSocial работает очень просто. Вы подключаете ее около и создаете блок с id="indiesocial-init". Теперь осталось только настроить

Конфигурация

1. Чтобы добавить иконки Fontello, добавьте к блоку data-addFontelloIcon="true".
2. Чтобы добавить текстовые названия сервисов, добавьте data-addText="true"
3. Вы можете включить только некоторые сервисы. Для этого к вашему блоку добавьте параметр data-indieSocialServices, в котором через запятую перечислите необходимые социальные сети.
4. Чтобы установить URL, добавьте data-URL="URL". По умолчанию — window.location
5. Чтобы установить заголовок, добавьте data-title="заголовок". Не работает с Google+.
6. Ну и конечно, все это легко можно настраивать с помощью CSS и JS. Каждой социальной сети кнопке соответствует класс с именем indiesocial-имя_социальной_сети.

Поддерживаемые сервисы

1. Facebook
2. Twitter
3. VK
4. Одноклассники
5. Google+
6. Ya.ru
7. FriendFeed
8. LinkedIn
9. Tumblr
10. Blogger

Добавление новой социальной сети.

Просто добавьте ее в переменную indiesocialServices. Пример с Facebook.

'facebook': {
    'URL': 'https://www.facebook.com/sharer.php?u=',
    'title' : '&t=',
    'fontello': 'icon-facebook',
    'name' : 'Facebook',
},

Репозиторий на Github, демо.