Плюсы:

Pluso XЭкспериментальная версия конструктора социальных кнопок Share Pluso. В ней улучшен дизайн иконок , всплывающего окна с полным списком доступных социальных сетей, а также потерпела изменения раздражающая оранжевая кнопка со знаком "+", на ее месте теперь тот же плюсик, но уже в более приятном оформлении.
По заявлению разработчиков, новые социальные кнопки заточены под Retina мониторы . Все остальное, на первый взгляд, осталось прежним. К сожалению, в конструкторе среди доступных вариантов я не нашел кнопок со счетчиком, хотя в стандартной редакции Pluso они есть.
Не знаю, заменят ли они новым конструктором старый, но, на данный момент, одновременно работают оба по разным ссылкам.

Add ThisAdd This - это сервис, предоставляющий качественные, стильные и гибкие социальные кнопки. Данный ресурс является лидирующим на западе. У нас менее популярен, но мне частенько встречаются русскоязычные сайты с виджетом Add This.
Есть платные и бесплатные виджеты. В бесплатном аккаунте доступны только наиболее простые варианты. В платном доступно намного больше концепций оформления таких как: адаптивные кнопки , кнопки с различными счетчиками и много чего другого.
Данный вариант для наших людей, думаю, плохо подходит, так как за навороты нужно будет заплатить, а на отечественном рынке можно найти все то же самое, но бесплатно.
В конструкторе Add This имеется огромный список доступных социальных сетей, включая Вконтакте, Мой Мир и Одноклассники. Есть плагин для .

Good ShareЛегкие и красивые share-кнопки для вашего сайта с маленьким по объему кодом для вставки, что очень привлекает. К сожалению, есть только один вариант оформления с несколькими цветовыми схемами. Есть все популярные в рунете социальные сети
Как заявляют разработчики, их детище оптимизировано и поисковики полюбят ваш сайт. Не знаю, сколько здесь правды.
Если вам не нужно наворотов, этот вариант именно для вас.

ShareaholicОчень интересный западный сервис для создания социальных кнопок, который я открыл для себя совсем недавно.
Shareaholic предлагает несколько новых концепций share-кнопок. Лично мне понравилась стрелочка над кнопками (стрелки - очень сильный маркетинговый инструмент), но, к сожалению, надпись на английском, так что для нашего народа не подходит. Среди доступных социальных сетей есть Вконтакте .

В этом небольшом уроке мы создадим простые и кастомные кнопки для шаринга в социальные сети.

Предлагаемый мной вариант лишен этих недостатков — все файлы будут на вашем сервере (то есть упадёт вместе с сайтом), ничего не подгружая извне, и к тому же очень хорошо кастомизируется. Кроме того, у нас будет небольшой плюс — обыкновенно в состав социальных кнопок входит большая тройка (ВКонтакте, Facebook и Twitter). В нашем случае в обойме присутствует Mail.Ru, Одноклассники и Telegram, чтобы никто не ушёл с нашего сайта нерасшаренным.

Единственный существенный минус: количество нажатий на кнопки считаться не будет . Мы уходим за рамки простоты и гибкости.

Впервые вопрос о собственных кнопках соц.сетей меня посетил в тот момент, когда для страницы на сайте социальный шаринг был очень нужен, но все ресурсы не подходили по дизайну. И не меня одного — сама идея кастомных кнопок далеко не новая. Самое интересное решение, на мой взгляд, было мной обнаружено на Хабре и после непродолжительных поисков привела на GitHub . Я взял за основу логику работы таких кнопок шаринга и творчески их доработал.

Решение простое как валенок — делаются ссылки для социальных сетей, внутри которых передаются понятные им параметры. Поскольку для этого используется тег , то в него можно завернуть практически всё, что угодно — простор для кастомизаций (ради чего всё это и делается) огромный.

Но у этого скрипта есть один недостаток — скрипт, который обрабатывал поведение браузера при нажатии на одну из кнопок. Привожу его часть, в которой вы сами легко увидите две проблемы:

Vkontakte: function(purl, ptitle, pimg, text) { url = "http://vkontakte.ru/share.php?"; url += "url=" + encodeURIComponent(purl); url += "&title=" + encodeURIComponent(ptitle); url += "&description=" + encodeURIComponent(text); url += "&image=" + encodeURIComponent(pimg); url += "&noparse=true"; Share.popup(url); },

Первая проблема небольшая и многие могут сказать мне: “Эй, чувак написал это в 2012 году! Просто поменяй строчку и всё”. И я с вами соглашусь, что можно просто поменять vkontakte.ru на vk.com и просто закрыть вопрос.

Вторая — под каждый сервис нужно писать новый блок. Который тоже сделать не очень-то проблемно, просто скопипастив и убрав/добавив нужные параметры.

Но что делает этот скрипт в итоге? Он просто создаёт всплывающее окно, в которое передаёт перечисленные параметры. Вот эти строчки:

Popup: function(url) { window.open(url,"","toolbar=0,status=0,width=626,height=436"); }

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

Вначале нам необходимо иметь несколько переменных для кнопок шаринга:

• $Title — Заголовок (название) страницы
• $Description — Описание страницы
• $ImageUrl — путь к изображению страницы
• $Link — прямая ссылка на страницу

Я назвал их условно, чтобы было наглядно понятно, сколько их необходимо и что они из себя представляют. Каким способом они будут браться на вашем сайте — вручную или автоматически — зависит только от приложения, на котором это будет исполнено. Например, в CMS WordPress это будет выглядеть так:

• $Title — это
• $Description —
• $ImageUrl —
• $Link —

Теперь в нужном нам месте вставляем следующий код, где на место переменных подставляем нужные значения (если необходимо):

ВКонтакте Facebook Mail.Ru Одноклассники Twitter Telegram

Готово. Код уже рабочий и его можно использовать — при нажатии на ссылку открывается новая вкладка социальной сети. А теперь давайте сделаем так, чтобы он не плодил вкладок, а открывал небольшое окошко поверх браузера. Чуть ниже добавим следующего кода:

function setOnclick(a) { a.setAttribute("onclick","popupWin = window.open(this.href,"contacts","toolbar=0,status=0,width=626,height=436"); popupWin.focus(); return false"); } function externalLinks() { var links = document.getElementsByTagName("a"); for (i=0; i