Меню

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

5 способов оптимизировать ваши кнопки (счетчики) социальных сетей

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

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

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

Socialite представляет собой javascript-библиотеку, разработанную David Bushell . Она позволяет нам загружать только сами кнопки социальных сетей при воспроизведении определенного события (например, при наведении курсором мыши или при клике), что позволяет вашей странице загружаться быстрее.

* Доступно в формате плагина для WordPress
* Нет необходимости в jQuery и других библиотеках
* Загрузка самих кнопок социальных сетей по событию: hover, scroll, click
* Возможность редактировать внешний вид посредством CSS
* Поддержка многих социальных сетей, включая Facebook, Twitter, Google+, Linkedin, Pinterest, Spotify и Github. Возможность расширения и для других социальных сетей.

* Нет поддержки опрашивания на количество перепостов или отметок «мне нравится».

Sharrre представляет собой jQuery-плагин, который позволяет вам добавлять кнопки социальных сетей на страницы сайта. Он предлагается с набором API, которые позволяют вам использовать довольно глубокие настройки.

* Поддержка множества кнопок социальных сетей, включая Google+, Facebook, LinkedIn, Digg и так далее
* Полностью редактируемые кнопки (посредством CSS и опций плагина)
* Возможность извлекать количество перепостов, а также суммировать их
* Система мониторинга на базе Google Analytics
* Доступен в формате плагина для WordPress .

* Работа плагина зависит от jQuery
* А также от дополнительного PHP-скрипта (для опроса на количество перепостов в G+).

TNW Social Count представляет собой WordPress-плагин, который изначально был разработан для The Next Web для извлечения количества перепостов статей, и отображения результата как показано на приведенном скриншоте. К счастью, разработчики оказались довольно сообразительными, и выпустили этот плагин на бесплатной основе, несмотря на то, что некоторые свойства и отсутствуют.

* WordPress-плагин. Простой и легкий в использовании посредством GUI
* Поддержка 4 основных социальных сетей: Facebook, Twitter, Google+ и LinkedIn (возможно, кому-то этого будет недостаточно)
* Полная поддержка редактирования при помощи CSS
* Возможность автоматически извлекать количество перепостов, либо по запросу.

* Работает только с WordPress, и для работы с Joomla и Drupal вам придется немного покопаться в коде
* Создает дополнительные поля в базе данных. Если на вашем хостинге имеется ограничение по базе данных, то это может привести к соответствующим проблемам
* На момент написания публикации поддерживались только 4 основные социальные сети, упомянутые выше.

Social Count — это jQuery-плагин, разработанный Filament Group для отображения количества перепостов в Facebook, Twitter и Google+. Данный плагин эффективным образом распределяет нагрузку за счет индивидуальной подгрузки кнопок лишь по запросу пользователя. Благодаря этому, ваши страницы будут открываться и работать быстрее.

* Индивидуальная загрузка кнопок при наведении
* Очень маленький размер (всего 2.98кб)
* Поддержка touch-устройств

* Поддержка только Facebook, Twitter и Google+
* Работает за счет jQuery. Так что, несмотря на малый вес, вам также придется использовать и 93кб для jQuery.

Social Likes представляет собой jQuery-плагин для отображения кнопок социальных сетей вместе со счетчиком. Плагин предлагается вместе со стилями, очень похожими на оригинальные кнопки (показано на скриншоте).

Читайте также:  Счетчик электрический двухтарифный энергомера

* Стандартные стили кнопок, схожие с оригинальными
* Внешний вид настраивается посредством CSS и GUI
* Поддержка Pinterest и Livejournal
* Возможность расширения для дополнительных социальных сетей

* Как и в случае с Sharrre, плагин работает на jQuery и использует PHP для получения данных счетчика G+
* Количество отметок опрашивается при загрузке страницы.

Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Источник

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

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

В последнее время каждый второй (если не первый) заказчик в требованиях по разработке сайта просит непременно связать его с социальными сетями. «Социальные» кнопки на сайте — средство номер 1 для привлечения целевой аудитории, распространения контента и пиара в целом. Причем совершенно бесплатное!

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

Каковы возможности и функции?

Кнопки социальных сетей являются основным составляющим продвижения вашего сайта в социальных сетях. Они позволяют поделиться материалами с сайта, отправив их на e-mail или опубликовав на странице в социальной сети, рассказать об акции или статье друзьям, разместить на сайте вашу ленту новостей, увеличить популярность странички и число подписчиков у вашей компании. Количество подписчиков, репостов (ссылки на ваши материалы, которыми поделились в соц. сетях) и переходов на ваш сайт из социальных сетей учитывается поисковыми системами для продвижения.

Если ваш сайт ориентирован на людей которые общаются популярных соц. сетях, например, Вконтакте, Twitter, Instagramm, Facebook, Google+, Pinterest и прочее, и вы хотите охватить их все, то чтобы не устанавливать кнопки каждой из них по отдельности, учитывая то, что они могут отличаться по размерам и дизайну, советуем воспользоваться сервисами-агрегаторами. Это простые и удобные инструменты, которые позволят посетителям сайта быстро делиться информацией со своими друзьями вне зависимости какой социальной сетью они пользуются. Ниже мы разберем наиболее популярные сервисы.

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

Яндекс разработал свой простой и удобный сервис кнопок социальных сетей – блок «Поделиться». Он позволяет сгенерировать код для добавления на сайт кнопок самых популярных соц сетей:

  • Вконтакте;
  • Facebook;
  • Twitter;
  • Одноклассники;
  • Мой Мир;
  • Livejournal;
  • Я.ру;
  • Friendfeed;
  • Мой круг;
  • Google+;
  • Pinterest;
  • Surfingbird.

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

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

Выбрав внешний вид блока «счетчики», вы получите кнопки сервисов с отображением числа сделанных репостов, т.е. сколько данной новостью человек уже поделилось в соответствующей соц. сети. Эта функция поддерживает наиболее популярные социальные сети (Вконтакте, Facebook, Twitter, Google+, Я.Ру, Мой Мир, Одноклассники.ru).

На сайте это выглядит следующим образом:

Если вы используете сервис Яндекс.Метрика, счетчик для контроля посещаемости сайта, то сможете без труда отслеживать статистику кликов по социальным кнопкам от Яндекс, что может быть полезным. Зачем нужны счетчики посещаемости читайте в статье «Счетчик посещаемости сайта: зачем он вам нужен?».

Кнопки социальных сетей Share Pluso

Share Pluso проверенный бесплатный сервис, который позволит посетителям вашего сайта делиться интересными материалами в социальных сетях. Он позволяет установить кнопки социальных сетей, а так же отправить страницу на печать, добавить ее в закладки или отправить другу по e-mail.

Читайте также:  Класс точности электросчетчиков для предприятия

Выглядит на сайте это следующим образом:

Сервис позволяет выбрать один из предложенных дизайнов оформления кнопок на сайте. Кнопки Pluso поддерживают порядка 20 социальных сетей и социальных сервисов в одном комплекте. Код генерируется онлайн.

Кроме этого, вы можете выполнить более точные настройки, например, выбрать размер значков, их форму, расположение (горизонтальное/вертикальное, в один или два ряда), с фоном или без, со счетчиком репостов или без него. Когда вы выполните все настройки и выберите свой вариант, то конструктор предоставит вам код для размещения виджета на сайте.

Так же на PLUSO имеются подразделы Блог и FAQ, где вы сможете найти ответы популярные вопросы, а так же инструкции по установке.

Кнопки «Мне нравится» и «Поделиться»

«Мне нравится» (Like) — самая популярная кнопка ,которая позволяет посетителям сайта выразить отношение к материалу.

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

Кнопки этого типа есть во всех популярных социальных сетях:

Источник

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

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

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

Источник



Социальные кнопки поделиться – пишем сами! Часть 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. Надеюсь, к прочтению этого абзаца вы уже скачали архив с примером, если нет, то скачивайте и пользуетесь — всё работает. Данное решение я сам использую в нескольких проектах и проблем не замечал.

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

Источник