WordPress как на ладони
wordpress jino

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

Наткнулся недавно на сервис социальной статистики UpToLike. О нем и расскажу немного в этой заметке. Это один из немногих сервисов, мимо которого я не смог пройти. Более того, я установил социальные кнопки на этом блоге, которые вы можете видеть в конце этой заметки. До этого я использовал либо родные кнопки соц.сетей, либо кнопки Social Likes от Артёма Сапегина - тоже интересный вариант. Интересен Social Likes тем, что гибко можно настроить внешний вид кнопок под дизайн сайта и нет нужды собирать кнопки отдельно, да и работает все немного быстрее чем родные кнопки социалок.

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

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

Uuptolike2

Отдельно опишу пункт настроек "назначение", потому что сразу может быть не понятно какой подпункт что означает:

  • 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/

uptolike плагин

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

uptolike плагин

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

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

  • для корректировки контент-стратегии: вы точно знаете, что больше всего нравится пользователям на вашем сайте;

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

  • для получения еще большего трафика из социальных сетей: переупаковывайте контент, делайте дайджесты самых популярных материалов за период, пишите больше материалов на «неустаревающие» темы и дублируйте их расшаривание в социальных сетях через 6-12 месяцев.
UpToLike: сервис социальных кнопок и статистики по ним + плагин для WordPress 17 комментариев
Полезные 1 Все
  • Roman

    А что у Вас за скрипт или плагин используется для увеличения картинок ? Спасибо за ответ.

    Ответить3.2 года назад #
    • Kama4662

      Самописный, легкий.

      Ответить3.2 года назад #
      • Vseprimety cайт: vseprimety.ru @

        Можно у вас этот скрипт как-то получить/узнать как он написан?

        Ответить3 года назад #
        • Kama4662

          Вот jQuery код:

          /*! waitForImages jQuery Plugin - v1.4.2 - 2013-01-19
          * https://github.com/alexanderdickson/waitForImages
          * Copyright (c) 2013 Alex Dickson; Licensed MIT */
          (function(e){var t="waitForImages";e.waitForImages={hasImageProperties:["backgroundImage","listStyleImage","borderImage","borderCornerImage"]},e.expr[":"].uncached=function(t){if(!e(t).is('img[src!=""]'))return!1;var n=new Image;return n.src=t.src,!n.complete},e.fn.waitForImages=function(n,r,i){var s=0,o=0;e.isPlainObject(arguments[0])&&(i=arguments[0].waitForAll,r=arguments[0].each,n=arguments[0].finished),n=n||e.noop,r=r||e.noop,i=!!i;if(!e.isFunction(n)||!e.isFunction(r))throw new TypeError("An invalid callback was supplied.");return this.each(function(){var u=e(this),a=[],f=e.waitForImages.hasImageProperties||[],l=/url\(\s*(['"]?)(.*?)\1\s*\)/g;i?u.find("*").andSelf().each(function(){var t=e(this);t.is("img:uncached")&&a.push({src:t.attr("src"),element:t[0]}),e.each(f,function(e,n){var r=t.css(n),i;if(!r)return!0;while(i=l.exec(r))a.push({src:i[2],element:t[0]})})}):u.find("img:uncached").each(function(){a.push({src:this.src,element:this})}),s=a.length,o=0,s===0&&n.call(u[0]),e.each(a,function(i,a){var f=new Image;e(f).bind("load."+t+" error."+t,function(e){o++,r.call(a.element,o,s,e.type=="load");if(o==s)return n.call(u[0]),!1}),f.src=a.src})})}})(jQuery);
          
          /* мой мини lightbox
          ---------------------------------------------------------------- */
          	var lbspeed = 200;
          
          	var $lbWrapper      = $('<div class="klb_wrapper"/>').appendTo('body');
          	var $lbContainer    = $('<div class="klb_container"/>').appendTo( $lbWrapper ).hide();
          	var $klbLoader      = $('<div class="klb_loader"></div>');
          	var $falseContainer = $('<div style="position:absolute;top:9999999px;left:9999999px;"/>').appendTo('body').hide();
          
          	// закрыть Х
          	$(document).click(function(e){ if( ! $(e.target).closest( $lbContainer ).length )
          		$lbContainer.animate( {width:200, height:200}, lbspeed, function(){ $(this).hide(); } );
          	});     
          
          	$('a').click(function(){
          		var 
          		href = $(this).attr('href'),
          		$img = $(this).find('img'),
          		wH   = $(window).height();
          
          		// ставим отступ сверху у блока
          		$lbWrapper.css({'top': $(window).scrollTop() + wH/2 });
          
          		// если не картинка ничего не делаем    
          		if( ! href || ! $img[0] || ! href.match(/^.*\.(png|jpg|gif)/) )
          			return;
          
          		// подпись
          		var desc = $img.attr('title') || $img.attr('alt');
          		if( desc ) desc = '<p class="desc">'+ desc +'</p>';
          
          		var html = '<img src="'+ href +'">' + desc;
          
          		$lbContainer.show().css({'margin-top': '-'+ $lbContainer.height()/2 +'px' }).html( $klbLoader );
          
          		// установим ширину и высоту, жедем пока картинка загрузится (waitForImages плагин jquery)
          		$falseContainer.show().html( html ).waitForImages(function(){
          			$(this).find('img').attr('style','max-width:none;max-height:none;');
          
          			var 
          			containerW = $(this).width(),
          			containerH = $(this).height();
          
          			var marginTop = ( containerH > wH ) ? wH/2 : containerH/2;
          
          			$lbContainer.html( html ).css('margin-top', '-'+ marginTop +'px').animate( { width:containerW, height:containerH }, lbspeed ); // показываем
          			$(this).hide();
          		});
          
          		// останавливаем событие клика и др...
          		return false;
          	});

          А это CSS стили:

          /* lightbox 
          -------------------------------------------------------------------- */
          .klb_wrapper{ z-index:10001; height:0; position:absolute; top:0px; left:0px; width:100%; }
          .klb_container{ position:relative; margin:0 auto; width:200px; height:200px; padding:15px; background:#555; border-radius:10px; }
          .klb_container img { display:block;; }
          .klb_container .desc { padding-top:8px; text-align:center; color:#eeeeee; }
          
          .klb_loader { width:50px; height:50px; background-color:#eee; margin:37% auto;  -webkit-animation: rotateplane 1.2s infinite ease-in-out; animation: rotateplane 1.2s infinite ease-in-out; }
          @-webkit-keyframes rotateplane {  
          	0% { -webkit-transform: perspective(120px) }  
          	50% { -webkit-transform: perspective(120px) rotateY(180deg) }  
          	100% { -webkit-transform: perspective(120px) rotateY(180deg)  rotateX(180deg) }
          }
          @keyframes rotateplane { 
          	0% { transform: perspective(120px) rotateX(0deg) rotateY(0deg); -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg) } 
          	50% { transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);  -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg) } 
          	100% { transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);  -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); }
          }
          1
          Ответить3 года назад #
          • Vseprimety cайт: vseprimety.ru @

            Спасибо большое, буду сейчас разбираться

            Ответить3 года назад #
          • Добрый день. А как это подключить? Я в JQuerry не силен (. Создал файл JS, подрубил в футере. Вроде jquery.min.js тоже подключаю. Стили добавил. Не работает.
            Спасибо.

            Ответить1.8 года назад #
            • Все работает, нужно только немного подстроить стили под себя спасибо. Наморозил с путем к JS.

              Ответить1.8 года назад #
  • Как-то шустро этот сервис взлетел, почти везде уже стоят их кнопки, обошел мне кажется pluso...

    Ответить3.2 года назад #
  • Dest

    реально хороший сервис)

    Ответить3 года назад #
  • Денис @

    Добрый день. Куда пихать код для picshare? все мозги сломал уже.

    Ответить2.7 года назад #
    • Денис @

      Разобрался. Код просто добавляю в ВП текстовым виджетом - работает. cool

      1
      Ответить2.7 года назад #
  • Андрей cайт: ex3m.com.ua @

    На сайте используется этот плагин, но так как он выводится с контентом мне не удалось найти как же вывести его в шаблоне в произвольном месте, может Вы подскажите?

    Ответить2.5 года назад #
    • Андрей cайт: ex3m.com.ua @

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

      Ответить1.5 года назад #
  • Александра @

    Добрый день!
    Установила плагин, все кнопочки получились просто супер, но есть одна проблемка crazy Когда нажимаешь на кнопку соц. сетей, чтобы поделиться ссылкой на сайт-заместо текста выходит просто приветствие WordPress на англ. яз.,т.е. не выходит название сайта и текст на заглавной странице. Что нужно сделать, чтобы все отражалось идеально? sorry

    Ответить2.5 года назад #
    • campusboy1946 cайт: www.youtube.com/c/wpplus

      Эту инфу плагин вроде "подкачивает" из title и description страницы. Просмотрите их правильность.

      Ответить2.5 года назад #
  • Тимур, а какой скрипт социалок вы используете у себя? В UpToLike не нашел таких иконок как у вас на этой страничке под постом. Смотрю у вас от share42 или я ошибаюсь? А как сделать такие же кнопочки как у вас и чтобы подгружались асинхронно?
    Спасибо.

    Ответить1.8 года назад #

Здравствуйте, !

Ваш комментарий