Кнопки соц сетей для счетчик

Социальные кнопки поделиться – пишем сами! Часть 2. Добавляем счетчик

Ой, вы, гой еси, дорогие мои читатели! Совсем недавно, каких-то там шесть постов назад, я поднял тему социальных кнопок и очень рад, что статья пришлась вам по душе, и вы используете эти самые кнопки и делитесь материалами с моего сайта. Как я и обещал, продолжаем развивать тему и сегодня прикрутим к нашим кнопкам еще и счетчик, вещь, согласитесь, весьма необходимую и существенную, дабы поднять нашу самооценку до известного уровня и при случае заткнуть за пояс конкурентов, предъявив свои солидные «пузомерки».

Кто читал, тот знает, ну а кто не читал, тому настоятельно советую прочитать первую статью, ибо заново разъяснять написанное в ней я не буду, а ссылаться по ходу статьи на неё придется.

Сама идея добавления счётчика ничем не отличается от реализации кнопок поделиться. Мы по-прежнему работаем с API возможностями социальных сетей, а именно, обращаемся по сформированному URL, с целью получить заветное число поделившихся.

Итак, давайте приступим и начнем, пожалуй, с самого JavaScript. Работа скрипта касательно счётчика делится на две части:

• Счётчик необходимо добавлять к каждой кнопке из соцсетей при загрузке страницы;
• При событии клик по кнопкам изменять число поделившихся.

Для того чтобы реализовать первую часть логики скрипта, нам потребуется добавить метод init():

Теперь более подробно рассмотрим, как он работает. Этот метод является точкой входа/запуска скрипта, который принимает единственный параметр – это селектор поиска обёртки кнопок. Далее через jQuery метод ready() мы отслеживаем полную загрузку документа. Так как у нас на странице может быть несколько блоков поделиться, то через функцию each() для каждого элемента в наборе выполняем код, лежащий внутри функции. В объекте countApiUrls хранятся прямые ссылки для получения числа поделившихся. В pageUrl мы достаём и сохраняем адрес страницы, который указали в параметрах data-share-data. Завершая работу с методом init() мы вызываем метод getCountLikes(), где и реализуем получение самих чисел для счётчика:

Метод getCountLikes() принимает 4 параметра:

• box – обёртка для каждой из кнопок соцсети;
• apiUrl – адрес API на которой происходит обращение;
• pageUrl – адрес страницы, о которой мы хотим получить данные;
• type – тип социальной сети.

Мы при помощи jQuery метода $.getJSON() обращаемся на сформированный url = apiUrl + pageUrl. В зависимости от соцсети получаем ответ (в основном это json) и обрабатываем его. Исключением является «Вконтакте», так как при запросе мы получаем отработку метода VK.Share(), что вызывает у нас на странице естественную ошибку, так как у нас нет объекта VK, но при помощи «нехитрого» костыля мы вытягиваем нужный нам результат.

Последние, что нам останется – это отрисовать числа на кнопках. Эту задачу мы решаем при помощи нового метода setCountLikes(). Эта функция принимает два параметра: определитель обертки и само число.

На этом реализация первой части закончена, что мы получили в итоге: после того, как загрузиться страница у каждой кнопки «Поделиться» появиться число, в зависимости от результата работы с API. Теперь нам останется закончить вторую часть, а именно при клике по кнопке увеличивать счётчик на единицу. Это реализуем в старом методе popup():

Мы добавили новый параметр box, ранее описанный, и внутри при помощи условного оператора if() увеличиваем счётчик, в зависимости от наличия числа ранее поделившихся. На этом сам скрипт завершён, конечно, нужно ещё обновить в методах twitter(), vk(), facebook() строчку:

Теперь, что касательно HTML разметки, выше мы рассмотрели метод init() и так как это точка входа/запуска скрипта, то её мы вызываем на странице после подключения файлов:

Ещё в кнопке стоит добавить span с классом icon:

Также несущественные изменения произошли и в CSS. Надеюсь, к прочтению этого абзаца вы уже скачали архив с примером, если нет, то скачивайте и пользуетесь — всё работает. Данное решение я сам использую в нескольких проектах и проблем не замечал.

В заключение к этой статье, хочется добавить, что мы рассмотрели сам принцип написания социальных кнопок «Поделиться» и вы, думаю, поняли, что их можно реализовать самому, не используя сторонние сервисы и при этом меняя дизайн и функционал как угодно.

Источник

Кнопки соцсетей для сайта — обзор виджетов кнопок социальных сетей

Обзор отечественных конструкторов и скриптов кнопок социальных сетей для сайтов, а также зарубежных аналогов. Коротко, понятно и наглядно.

Конструкторы кнопок социальных сетей для сайта

1. Блок «Поделиться» — Технологии Яндекс
Блок «Поделиться» помогает посетителям сайта быстро публиковать ссылки на понравившиеся страницы в соцсетях и блогах. Создайте блок «Поделиться» с помощью конструктора, а дополнительные параметры ищите в документации.

2. Лёгкий способ получить ссылки на сайт – QIP.RU
Разместите кнопку на сайте и дайте посетителям возможность добавлять понравившиеся материалы сайта в закладки, блоги и соцсети. Три шага: где разметите кнопку (сайт, Blogger или WordPress), стиль кнопок (готовые варианты) и получить кнопку.

3. Кнопки для добавления контента в соцсети — Pluso
Разместите кнопки и дайте посетителям возможность делиться понравившимися страницами в соцсетях, а также печатать, отправлять письмо и добавлять закладки.

4. Сервис социальной активности — UpToLike
Кастомизированные кнопки соцсетей с возможностью задать цвет, форму, размер и спецэффекты. Дополнительные фишки – виджет расшаривания картинок PicShare, функция «Цитирование» и кастомизированная функция Following.

5. Одна кнопка! — для всех сервисов закладок и соцсетей
Выберите вид кнопку. Где будет установлена кнопка: сайт, Blogger или WordPress. Добавьте кнопку.

Скрипты кнопок социальных сетей для сайта

1. Красивые социальные кнопки для сайта — goodshare.js
Отображение кнопок практически на любом устройстве. Чистый код. Краткая документация. SEO friendly.

2. Скрипт кнопок социальных закладок и сетей — Share42
Выберите размер и отметьте иконки сервисов, которые хотите использовать на сайте. Выберите нужные опции. Посмотрите, как это будет выглядеть и/или скачайте готовый скрипт. Установите скрипт на сайт WordPress, Drupal, другое.

3. Красивые кнопки «лайков» соцсетей с использованием jQuery — Social Likes
Скрипт кнопок «лайков» со счётчиками в едином стиле для соцсетей: Facebook, Twitter, ВКонтакте, Одноклассники, Мой мир, Google+ и Pinterest.

Зарубежные аналоги кнопок социальных сетей для сайта

1. Share Buttons — AddThis
Кнопки шаринга помогут вам увеличить аудитория сайта, путем привлечения посетителей с других ресурсов и соцсетей, через распространяемый контент.

2. Get the Share Button — ShareThis
Выберите платформу: WordPress, Drupal, Joompla!, Blogger, TypePad, tumblr, Newsletter, IOS & Android, другое. Выберите стиль снопок (кнопки или тулбар), Настройте кнопки: выберите сервисы (кнопки поделиться или социальные плагины), укажите размер кнопок, другое. Получите код.

3. Share buttons for WordPress, Tumblr, Drupal, Joomla and all website — Shareaholic
Сделайте так, чтобы посетители сайта могли поделиться вашим контентом с друзьями в один клик. Выберите: тему, размещение, размер, счётчик, выравнивание и другие настройки кнопок и получите код.

Источник

uSocial

Социальные сервисы

uSocial

Социальные сервисы

Кнопки “Поделиться“

Эффект при наведении premium

Расположение

сверху снизу слева справа статичное

Ориентация

Состояние бара

Размер

Счетчик

Кнопка вверх

Настройки мобильного вида

Не делиться текущей страницей

Привлечение внимания к кнопкам

Дополнительные настройки набора

Авторизация

Код для Вашего сайта

Для получения кода вставки кнопок социальных сетей на сайт и получения доступа к статистике и личному кабинету, пожалуйста, авторизуйтесь через удобную для вас социальную сеть.

Статистика в личном кабинете поможет вам понять, какие материалы вашего сайта больше интересуют посетителей, в какие соц сети больше шарят материалы с вашего сайта и многое другое.

Информация об AppID

Для получения AppID и Secret key необходимо создать приложение разработчика на Одноклассниках и пройти модерацию.

Модерация приложения занимает

Остальные поля не обязательны для заполнения.

После создания приложения Вы получите письмо с данными AppID и Secret key для вставки в соотвествующие поля на uSocial.pro при создании социального замка.

После этого, для корректной работы приложения и замка, необходимо отправить письмо службе поддержке Одноклассников на получение доступа к необходимым правам и функциям приложения:

Адрес для отправки сообщения:
api-support@ok.ru

Тема сообщения:
Внешнее приложение (Виджет публикации)

Текст сообщения:
Прошу предоставить доступ приложению с ID****** (указать ID Вашего приложения) к функции «Виджет публикации» https://apiok.ru/ext/publish
Адрес сайта приложения: адрес Вашего сайта
Цель получения доступа: использование сервиса https://usocial.pro/socialkey

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

Важно: не редактируйте приложение после того, как оно прошло модерацию.

Источник

Конструкторы социальных кнопок для сайта

На сегодняшний день не встретить ни одного сайта без связки с социальными сетями. Это социальные кнопки «Поделиться», быстрая регистрация через социальные сети, виджеты комментариев и групп. В сегодняшнем посте мы рассмотрим варианты реализации социальных кнопок, их плюсы и минусы, а также посмотрим, какие есть конструкторы социальных кнопок для сайта, а именно кнопок «Поделиться», ведь они являются отличным источником трафика.
Не так давно мы обновляли дизайн данного сайта и решили заменить социальные кнопки. В старом дизайне были использованы стандартные лайки от социальных сетей. Они были невзрачны, совсем не привлекали внимания и не работали так, как нам хотелось бы. Было принято решение заменить Like-кнопки на Share, так как вторые более броские для глаза, все в одном стиле, да и проще. Было несколько требований: яркие, плоский стиль, кнопки со счетчиком для каждой социальной сети. Для реализации этой задачи существует несколько путей: взять готовый jQuery скрипт социальных кнопок, сделать свое решение с собственным видением реализации или использовать онлайн конструкторы социальных кнопок, которые предлагают самим сконструировать и получить красивые кнопки на любой вкус. Скажу сразу, споров было много, ведь в каждом варианте реализации есть свои плюсы и минусы. Первый вариант быстро отпал, так как скрипты, в основном, написаны забугорными веб-мастерами, а буржуйнет о наших социальных сетях и не слыхал. Все, что написано нашими веб-мастерами — убогое и страшное, зато есть Вконтакте, Одноклассники, Мой мир и т.д. Портить внешний вид социальными кнопками не хотелось. Лучший вариант — написать скрипт самим. Тут и раздолье для творчества и есть возможность стилизировать все под сайт, но чтобы написать свой вариант решения, требуется время. Отложили эту идею на лучшие времена. Кстати, если все же реализуем свои социальные кнопки, обязательно их выложим на этом сайте для свободного пользования. Подписывайтесь на нас в социальных сетях или на RSS, чтобы не пропустить. Итак. Решили пока использовать сторонний сервис, хоть в данном решении есть много существенных минусов.
Давайте обсудим все плюсы и минусы использования социальных кнопок, предоставленных сторонним сервисом.

Плюсы:

• Можно стилизировать социальные кнопки под ваш сайт с помощью визуального конструктора.
• Много концепций социальных кнопок (вертикальные, горизонтальные, фиксированные, со счетчиком и без него)
• Время. Можно получить красивые кнопки, потратив минимум времени.
• Аналитика. У некоторых сервисов есть своя статистика по кликам, что очень удобно для аналитики.
• Много дополнительных плюшек. Сервисов для генерации социальных кнопок становится все больше и каждый из них стремится выделиться, придумав что-то новенькое.

Минусы:

• Сомнительная безопасность. В интернете есть много споров по поводу использования социальных кнопок от различных сервисов. Многие говорят, что вставив сторонний код в страницу, вы предоставляете неким лицам (в данном случае сервисам социальных кнопок)информацию, которой не хотели бы делиться с кем попало. Также ходят слухи о сборе Cookies и много чего другого.
• Скорость работы. Социальные кнопки от различных онлайн-конструкторов тормозят загрузку страницы. Это неоспоримый факт. Даже на нашем сайте они загружаются со значительным запозданием. Плюс ко всему подгружается много лишнего хлама. Так уж устроено, что если что-то делается для широкой аудитории, то приходится нагружать продукт мусором, дабы охватить как можно больше аудитории.
• Паранойя. А вдруг сервис завтра прогорит? Это самая маленькая беда, так как в любой момент можно заменить код на другой — взять у конкурентов.

Итак. Минусов много, но учитывая, что получить качественные социальные кнопки можно в течении минуты не прикладывая усилий, закроем глаза на все это.
К вашему вниманию подборка сервисов, предоставляющих социальные кнопки «поделиться» для вашего сайта.

uSocial

Относительно молодой сервис по созданию социальных кнопок. Несмотря на это, в его арсенале огромный набор различных социальных виджетов:

• Кнопки “Поделиться“;
• Кнопки “Like“;
• Социальный замок (скоро);
• Инструменты для работы с группами и т.д.

uSocial имеет довольно богатый конструктор share-кнопок. Однако в полной мере его «пощупать» можно при наличии Pro-аккаунты. Если говорить о дизайне, все очень неплохо. Кнопки получаются аккуратными и вписываются в любой сайт.

• Скачать

Pluso

Pluso — лидер рунета среди сервисов, конструирующих социальные кнопки для сайта. Блуждая по сайтам, я часто натыкаюсь на эту своеобразную, немного раздражающую и чрезмерно броскую иконку «плюс».
Pluso имеет очень удобный конструктор, в котором за несколько секунд можно сгенерировать классный виджет. Есть кнопки со счетчиком, что является огромным плюсом.

• Перейти

Pluso X

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

• Перейти

Add This

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

• Перейти

Good Share

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

• Перейти

Up To Like

Отечественный сервис предоставляющий социальные кнопки «Поделиться». В его конструкторе очень много настроек. Некий комбайн. Вы можете настроить кнопки как захотите, хоть со счетчиком, хоть без, с общим счетчиком и с раздельными счетчиками для каждой социальной сети и т. д. Зарегистрировав сайт в системе, вы получаете доступ к панели аналитики, где показано сколько человек поделилось, сколько привлечено пользователей и много чего другого. Но, как это не печально, гибкость требует жертв. Виджет очень тяжелый и загружается с приличным запозданием. Несмотря на это, именно он установлен на нашем сайте. Нам очень понравилось, что счетчики показывают реальные количества лайков в социальных сетях, то есть сервис тесно взаимодействует с API социальных сетей.

• Перейти

Shareaholic

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

• Перейти

Блок «Поделиться» от Яндекс

Всем известные социальные кнопки от компании Яндекс. Раньше они были страшные, но Яндекс решил добавить еще кнопки со счетчиком с обновленным дизайном и стало сносно.
Сам конструктор довольно скудный и некоторые настройки сменить нельзя, но можно немного изменить код и кнопки станут, например, больше.
Если вам нужны простые кнопки «Поделиться» со счетчиком, берите их, не пожалеете.

• Перейти

Share This

Share This — западный конструктор социальных кнопок. Простой, с малым количеством настроек, но есть Вконтакте и Одноклассники. Пока тесно не работал с данным сервисом.

• Перейти

Интересный сервис. Дизайн самих кнопок мне не очень нравится, хотелось бы увидеть Flat оформление, но есть счетчик поделившихся. Такая же концепция виджета, как на скрине, есть на сайте Add This, но там она доступна только в платном аккаунте.

• Перейти

Add to any

Простенький забугорный конструктор с малым выбором виджетов, но есть в наличии плагины для популярных CMS.
В Add to any огромный выбор социальных сетей, включая наши отечественные.

• Перейти

QIP кнопка

И напоследок страшные социальные кнопки от всем известного QIP. Не знаю, кто такое захочет поставить себе на сайт, но может кому-то понадобится.

• Перейти

Источник