UpToLike — конструктор социальных кнопок для вашего сайта с расширенным функционалом (фолловинг, статистика, опросы)

19 Декабрь, 2013

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

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

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

Возможности UpToLike в создании кнопок для сайта


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

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

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

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

Сервис бесплатный и таковым планирует оставаться и далее. Это новость хорошая, так же как и та, что кроме кнопок соцсетей у них уже имеется конструктор голосований, а в будущем планируется и еще много чего доработать и добавить. Возникает вопрос, а откуда столько энтузиазма? Где планируется искать выгоду, чтобы оплачивать работу разработчиков и получать прибыль с проекта?

Оказывается, что способ монетизации довольно сложный. Данный сервис принадлежит той же корпорации, что и Сеопульт, под эгидой которого в ближайшем будущем будет запущен социальный сервис (продвижение, наверное), в котором планируется использоваться данные, собранные UpToLike. Вот именно по этой причине я и увидел эти кнопки в WebArtex, ибо они с Сеопультом одной крови.

Но мне, если честно, по барабану, кто и что будет брать из статистики собранной на моем блоге. Яндекс берет из своей Метрики и бара, Гугл из Аналитикса и кода Адсенса. Ну, будет еще один крупный игрок брать данные. Как будто счетчики Ливинтернета, Рамблер Топ 100 и других представителей поступают иначе. Бесплатно для нас не означает, что это не может быть доходным для владельцев.

Ладно, давайте к делу переходить. На главной странице UpToLike вам предлагают зарегистрироваться. Можете сразу это сделать, ибо потом логин и пароль понадобятся для входа в статистику использования установленного на вашем сайте блока кнопок. Если пока лень это делать, то может сразу начинать конструлить (я именно так и сделал).

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

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

Итак, основные настройки кнопок соцсетей в UpToLike:

  1. Назначение кнопочек — для достижения SEO эффекта следует выбирать вариант по умолчанию «Шаре». Но если вам нужны лайки или фоловеры, то есть возможность создать и подобный блок, выбрав другой вариант из этого списка.
  2. Расположение — вы вольны выбрать обычный горизонтальный блок, вертикальный, плавающий слева или справа, а так же зафиксированный внизу и вверху области просмотра.
  3. Показывать счетчик — замечательная штука. Что особо радует, вытаскиваются и все те расшаривания, что уже были сделаны для данной страницы до установки UpToLike. Можно отображать количество расшариваний для каждой социальной сети отдельно, а можно для всех скопом. По эстетическим соображениям я предпочел второй вариант.
  4. Дополнительные возможности:
    1. Цитирование — очень необычная штука. Пользователь, выделив интересный ему фрагмент на вашей странице, сможет его расшарить в социальной сети путем нажатия на появившуюся рядом кнопочку.
    2. Following — если активируете эту возможность, то придется заполнить данные по вашим аккаунтам в соцсетях в появившемся чуть ниже окне:

      Получится, что пользователь, после расшаривания вашей статьи в свою соцсеть посредством UpToLike, получит еще и приглашение стать вашим фоловером. Ну, типа, раз уж ты такой покладистый...

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

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

Настройка внешнего вида и установка кода на сайт


Ну, а дальше в UpToLike идет самое интересное — настройка стилей кнопок. Вот этот блок им особенно удался. Вроде бы все так просто, но одновременно столько возможностей и вариантов оформления он предоставляет, что даже устаешь их все перепробовать.

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

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

Разработчики советуют вставлять блок с кнопкам сразу под заголовком статьи, ибо считают, что так по нему будут больше кликать. Надо будет проверить данную теорию, тем более, что UpToLike позволяет просмотреть статистику за нужный интервал времени и сравнить данные по эффективности размещения.

Однако, мне по-прежнему кажется, что лучшее место для размещение горизонтального блока — сразу под статьей. Прочитали, просмотрели или просто прокрутили статью — можно выносить решение о том, делиться или не делиться материалом. Хотя, возможно, что я не прав. Надо будет поэкспериментировать.

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

В WordPress существует такое понятие, как шаблоны темы оформления, устройство и иерархию которых вы можете оценить, полистав статью по приведенной ссылке. Очевидно, что для вставки блока с кнопочками от UpToLike под текстом, нужно будет пытать шаблон SINGLE:

Живет он в папке с используемой вами темой оформления:

wp-content/themes/название_

Находите в этом файле упоминание функции the_content:

<?php the_content('Читать полностью'); ?>

И вставляете код социальных кнопок сразу после нее. Если взятый в UpToLike блок с кнопками плавающий или приклеенный к верхнему или нижнему краю области просмотра, то, по идее, место его вставки не так важно. Но если запихнуть его в HEADER, FOOTER или SIDEBAR, то он получится сквозным, что будет, наверное, лишним, ибо мало кто захочет расшаривать страницы категорий или тегов. Хотя, может быть и имеет смысл.

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

Собственно, создал новый набор социальных кнопочек в UpToLike и разместил его код в шаблоны WordPress под названием ARCHIVE (рубрики, категории, метки, временные архивы) и INDEX (в моем случае это только главная страница).

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

Что касаемо Joomla. Для вставки сквозного плавающего или прилипшего блока можно открыть файл INDEX.PHP, из папки с используемым (активным в данный момент) шаблоном:/templates/название_папки_с_используемым_шаблоном/index.php

В самом низу содержимого файла INDEX.PHP найдите закрывающий тег /body и вставьте сразу перед ним ваш код. Получится примерно так:

<!-- footer end -->
  </div>
 </div>
здесь должен быть вставлен фрагмент
</body>
</html>

Сохраните произведенные в INDEX.PHP изменения (файлзила и нотепад++ вам в помощь).

Для вставки в Joomla вертикального или горизонтального блока с социальными кнопками созданными в UpToLike можно воспользоваться стандартным модулем произвольного Html кода. Обычно в шаблоне имеются позиции сразу после текста статьи. В крайнем случае вставите содержимое модуля в текст описанным по ссылке способом.

Опросы в UpToLike и анализ социальной активности на сайте


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

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

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

Также на второй вкладке можно открыть конструктор для создания опросов, но я пока это дело еще не опробовал.

Результаты по опросам будут доступны на главной странице для авторизованного пользователя на соответствующей вкладке.

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

Как бороться с этой напастью в WordPress при использовании стандартной кнопки Твитера я уже писал. Способ этот универсален для Вордпресса и о нем же я писал в статье про файл functions.php. Так вот, обратившись к разработчикам UpToLike со своей проблемой, я таки получил ее решение и именно поэтому этот блок все еще живет на моем блоге.

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

  var cmp = c + Math.floor(Math.random() * 10000);

Добавить такой вот фрагмент:

 window["__uptolike_widgets_settings_"+cmp] = {
    "title": "<?php trim_title_chars(110, '...'); ?>"
  };
  var 

Цифра 110 задает число символов, после которого тайтл будет обрезаться и в месте обрыва будет стоять приведенное в коде троеточие. Правда чуть ниже в коде шла строка window, которая не давала работать этому методу, поэтому ее пришлось удалить и в результате код выглядит сейчас примерно так:

<script>
//uptolike share begin
(function(d,c){
  var up=d.createElement('script'),
  s=d.getElementsByTagName('script')[0],
  r=Math.floor(Math.random() * 1000000);
  var cmp = c + Math.floor(Math.random() * 10000);
  window["__uptolike_widgets_settings_"+cmp] = {
    "title": "<?php trim_title_chars(110, '...'); ?>"
  };
  var url = window.location.href;
  d.write("<div id='"+cmp+"' class='__uptlk' data-uptlkwdgtId='"+r+"'></div>");
  up.type = 'text/javascript'; up.async = true;
  up.src = "//w.uptolike.com/widgets/v1/widgets.js?b=fb.tw.vk.gp.ok.my.mr.em.ps.pn&id=42196&o=1&m=1&sf=3&ss=1&sst=1&c1=ededed&c1a=0.0&c3=ff9300&mc=1&c2=0b0000&c4=ffffff&c4a=1.0&mcs=0&sel=1&fol=0&c=" + cmp + "&url="+encodeURIComponent(url);
  s.parentNode.insertBefore(up, s);
})(document,"__uptlk");
//uptolike share end
</script>

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

Удачи вам! До скорых встреч на страницах блога KtoNaNovenkogo.ru

Еще:

Рубрики :SMO продвижение сайта

Комментарии и отзывы

olston3d

Дмитрий, спасибо за информативный пост! Попробовал поставить к себе в блог эти кнопульки — развалился весь дизайн. Сайдбар улетел вниз под комментарии. Пришлось отказаться. Использую кнопки от Яндекса, очень доволен.

Дмитрий

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

olston3d

Спасибо за быстрый ответ, Дмитрий. Скачал еще раз, заменил, все проверил — та же беда! Скорее всего есть какая-то несовместимость с шаблоном. Оставил кнопки от яндекса. Они мне тоже нравятся.

alexzsoft

Прикольно сделано, цвета в стиле iOS 7. Дмитрий, как вы успевает писать так часто посты, да ещё в таких подробностях? И хотелось бы поинтересоваться, улучшилась ли ситуация с яндексом, когда вы начали писать статьи про сео и веб?

BlogAdmin

Не очень удобно. Пользуюсь share42

Дмитрий

alexzsoft: ну, все лето и часть осени очень серьезно работал над переделкой старых статей. Втянулся в режим полной загруженности, а теперь переделывать уже нечего, поэтому и переключился, наверное, на написание. А с Яндексом все примерно на том же уровне, что и в начале осени (писал об этом в статье про Disavow links). Спасибо.

alexzsoft

BlogAdmin, как раз на первом сайте стоят share42, по сравнению с этими, без обид, фигня полная... Тут больше возможностей, меньше гемороя в установке, в new adman запихнул и все) Статистика причем есть крутая! В share42 ничего такого нет...

Ольга

а не проще использовать готовый плагин vkontakte? мучилась мучилась в share42 в итоге нашла этот плагин и вуаля все работает))

Дмитрий

Ольга — это хорошо, когда у вас один плагин стоит. А если их штук 7, то будет очень медленно загружаться.

sibroy

Плохо что выводит только title...лучше бы дескриптион или определённое количество символов их сонтента...

Art_gud

Добрый день, Дмитрий. А почему вы отказались от этого сервиса или вы решили протестировать новый дизайн кнопок от Яндекса?

Дмитрий

Art_gud: здравствуйте, у меня возникла проблема с отправкой в Фейсбук. Возможно, что проблем была на стороне социальной сети, но вот пока решил потестировать новые кнопочки Яндекса.

Art_gud

Дмитрий: держите в курсе, очень интересно. А как вы сделали кнопки чуть больше, чем они есть на самом сервисе Яндекса, нужно лезть в API? Или мне показалось?

Евгений

Дмитрий, спасибо за пост. У меня англо сайт — все хорошо, но при наводе курсора высвечивается «Поделиться ...» Мне же нужен этот текст на английском. Посмотрел код, там вроде это не прописано. Помогите, пожалуйста!!!

Ольга

Дмитрий, здравствуйте! Возможно, у вас есть опыт или мнение сложилось по данному вопросу. Подскажите, пожалуйста, какие кнопки эффективней: вертикальные залипшие кнопки сбоку страницы или горизонтальные, под статьей? У меня стоят кнопки от share42.

Вадим

Привет, Дмитрий! Хотел узнать ваше мнение...

На сервисе пишут: «При установке кода UpToLike все данные других кнопок сохраняются».

Интересно, если у меня в статье стоит еще родная кнопка «Поделиться» от ВКонтакте, будет ли uptolike учитывать ее данные и отображать в своей статистике?

Спасибо!

Дмитрий

Вадим: по задумке должен, но лучше будет уточнить у них в техподдержке.

Виктор

Ребята, а по какой причине может плагин Не считать статистику? Ввел ключ, э-мейл, а такое впечатление, что не авторизуется... Кто что может посоветовать?

Александр

Скажи пожалуйста, такую вещь. Вот я что эти ставил, что кнопку от яндекса. Когда нажимаю поделиться, у меня не подхватывает ни картинку... ничего, кроме названия материла, в чем может быть причина? Или это изза того, что сайт на денвере еще? Ну я не думаю... Хотя...

Константин

Подскажите пожалуйста, как быть с кириллическим доменном?!

У меня Твиттер ругается на то что твит содержит больше 140 символов когда адресс кириллический (сам домен, остальная часть URL латиница), если вставляю вручную домен в Punycode, то твит уходит нормально. http://xn----7sbcqk1bfcbaffvcp4n.xn--p1ai/

Grjomka

Вот спасибо за статейку, а именно за описание — в какой именно файл код вставлять и в какое место! А то из меня кодер некудышный, только html знаю более или менее )))

Владислав

так на вк оно поставиться не сможет?

Подписаться не комментируя