UpToLike: сервіс соціальних кнопок та статистики за ними + плагін для WordPress

Натрапив нещодавно на сервіс соціальної статистики UpToLike . Про нього і розповім трохи у цій нотатці. Це один з небагатьох сервісів, повз який я не зміг пройти. Більше того, я встановив соціальні кнопки на цьому блозі, які ви можете побачити наприкінці цієї статті. До цього я використовував або рідні кнопки соц.мереж, або кнопки Social Likes від Артема Сапегіна – теж цікавий варіант. Цікавий Social Likes тим, що гнучко можна налаштувати зовнішній вигляд кнопок під дизайн сайту і немає потреби збирати кнопки окремо, та й працює дещо швидше ніж рідні кнопки соціалок.

Часто при встановленні соц.кнопок на сайти вебмайстрам доводиться змінювати код по кілька разів, поки не вийде те, що треба за кольором, розміром та іншими параметрами. Це довго та втомлює, а потрібно практично для всіх сайтів. Саме тому сервіс UpToLike є актуальним, він дозволяє встановити соціальні кнопки з мінімум зусиль, які тільки можливі, і при цьому дозволяє гнучко налаштувати розташування кнопок та налаштувати зовнішній вигляд повністю «під себе». Крім того, можна вибрати призначення кнопок, які будуть кнопки: лайки, кнопки поділитися або кнопки на сторінки проектів в соц.мережах.

UpToLike мабуть найгнуткіший за налаштуваннями російськомовний сервіс. Краще за сервіс я не знаю. Крім того, на вибір пропонується дуже багато соціальних мереж. Простіше зайти і подивитися самому , ніж розповідати тут, як і що там налаштовується. Налаштування гранично зрозуміле і відразу видно, що виходить. Погляньте на скрін:

Окремо опишу пункт налаштувань “призначення”, тому що відразу може бути не зрозуміло який підпункт що означає:

Share (поділитись) – за натисканням на кнопку користувач зможе швидко опублікувати запис про поточну сторінку у свою сторінку соц.мережі.
PicShare (поділитися для картинок) – теж що share, тільки кнопки будуть працювати для кожної картинки на сторінці і ділитися користувач буде саме картинкою або посиланням на картинку, а не сторінкою в цілому. У цьому режимі з’являються кнопки при наведенні мишки на картинку.
Like – виведе кнопки лайків.
Follow (підписатися) – виведе блок кнопок, натиснувши на які користувача перекине на сторінку проекту соц.мережі, де користувач може підписатися.
Лічильник – вставляє невидимий лічильник, завдяки якому ви зможете дивитися статистику соціальної активності.

Переваги

Встановлення коду не впливає на швидкість відображення сторінки сайту користувачеві. Підвантаження скрипта кнопок UpToLike здійснюється асинхронно (тегу <script> встановлюється аттрибут async). Це означає, що файл скрипта буде підвантажуватися без очікування завантаження веб-сторінки, а веб-сторінка не буде очікувати на завантаження файлу і браузер буде відображати сторінку як завжди.

Окрім того, що сервіс пропонує зручно вставити кнопки, він ще й збирає статистику соціальної активності. Статистику можна переглянути в панелі сервісу. Для доступу до статистики потрібно буде зареєструватися на сайті. Або можна встановити плагін для WordPress, дивіться нижче.

На сторінці можна розмістити декілька блоків кнопок. Один одному вони не заважатимуть. Для цього потрібно розмістити два різні коди.

Недоліки

Незалежно від того, скільки кнопок використовується в наборі, скрипт підвантажує дані всіх наявних кнопок. Втім наприкінці кожного блоку є кнопка ...натискання на яку користувачу доступні всі кнопки сервісу. Але така кнопка часто просто не потрібна, а тим більше якщо вона підвантажує непотрібні дані.

Встановлення коду

Після того як ви налаштували зовнішній вигляд кнопок на сайті сервісу, натисніть кнопку “отримати код”. Скопіюйте код, що з’явився, і вставте його в те місце шаблону, де потрібно вивести кнопки. Це все!

Додаткове налаштування CSS стилів

Несмотря на то, что сервис предлагает гибкую настройку внешнего вида блока. В некоторых случаях её может быть не достаточно. Чтобы дополнительно настроить CSS стили можно использовать такой нехитрый хак: обернуть код в свой <div>, которому указать атрибут id – <div id="uptolike">. Хорошо, что стили кнопок описаны через классы, а значит их можно перебить указав более весомое правило CSS – через селектор id #:

#uptolike .uptl_container li{ padding:0px; } /* это правило сильнее */
.uptl_container li{ padding:10px; } /* это правило слабее */

/* можно проще */

#uptolike li{ padding:0px; }

Для примера, уберем все отступы у элементов <li> в блоке кнопок. Для этого обернем код в div и укажем свои правила:

<style type="text/css">
	#uptolike li{ padding:0; margin:0; }
</style>
<div id="uptolike">
	<!-- Здесь код uptolike -->
</div>

Чтобы узнать как выглядит HTML разметка блока кнопок uptolike воспользуйтесь встроенным в браузер инстурментом: “Просмотр кода элемента” (Chrome), “Проинспектировать элемент” (FireFox, Opera). Инструмент доступен при нажатии правой кнопки мыши на элементе.

Плагин UpToLike для WordPress

Для подавляющего большинства удобнее ничего никуда не копировать, а просто установить плагин, который разработан создателями сервиса UpToLike. Кроме этого, плагин UpToLike выводит статистику социального поведения пользователей на сайте прямо в админке WordPress.

Скачать плагин можно с репозитории WordPress: http://wordpress.org/plugins/uptolike-share/

Рис. 1 Статистика привлеченных пользователей за счет шаринга

Рис. 2 Постраничная статистика

Эту информацию удобно использовать:

для корректировки контент-стратегии: вы точно знаете, что больше всего нравится пользователям на вашем сайте;
для контроля эффективности трафика из социальных сетей: вы точно знаете, работают ли лайки и шары на вашем сайте на привлечение новых посетителей или это «пустые» социальные действия;
для получения еще большего трафика из социальных сетей: переупаковывайте контент, делайте дайджесты самых популярных материалов за период, пишите больше материалов на «неустаревающие» темы и дублируйте их расшаривание в социальных сетях через 6-12 месяцев.