Uptolike / кнопка "вверх"

На uptolike.com в модуле социальных кнопок появилась возможность добавить кнопку "Перейти в начало документа". Для этого в теге div необходимо добавить параметр data-top-button='true':

<script type="text/javascript">(function(w,doc) {
if (!w.__utlWdgt ) {
    w.__utlWdgt = true;
    var d = doc, s = d.createElement('script'), g = 'getElementsByTagName';
    s.type = 'text/javascript'; s.charset='UTF-8'; s.async = true;
    s.src = ('https:' == w.location.protocol ? 'https' : 'http')  + '://w.uptolike.com/widgets/v1/uptolike.js';
    var h=d[g]('body')[0];
    h.appendChild(s);
}})(window,document);
</script>
<div data-pid="###" ...  data-top-button='true' class="uptolike-buttons" ></div>

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

Uptolike / рейтинги

На uptolike.com зарелизили модуль рейтингов. Смысл модуля - в подсчете лайков/анлайков на манер кнопок like соц сетей. Конкурентное преимущество состоит в том, что подсчет идет на основе профиля соц сети, то есть 2 раза проголосовать не получится даже с разных браузеров.


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


Для списка статей, как и в случае с кнопками шар, есть специальная версия кода:

1. Вставляем скрипт 

   <script src='http://w.uptolike.com/widgets/v1/uptolike.js' 
        type='text/javascript'></script>

   в <head>
2. В нужное место кода вставляем <div> с классом uptolike-rating.

Заметьте, если вы уже вставили кнопки с помощью описанного мной подхода, то пункт 1 делать не нужно, скрипт уже добавлен.

Пример div:

<div class="uptolike-rating" data-count-clicks="true" 
    data-icon-color="cc0000" data-icon-size="14" 
    data-pid="1" data-url="http://penkovvladimir.blogspot.ru/"><div>

Параметры следующие:

• data-url - адрес страницы, на которой размещена статья
• data-pid - идентификатор проекта на сайте Uptolike
• data-like-layout - порядок элементов в блоке like. 3 буквы 't' = текст, 'i' = иконка, 'c' = счетчик. Например, tic = текст-иконка-счетчик. ict=иконка-счетчик-текст. i - иконка
• data-like-layout - порядок элементов в блоке like. 3 буквы 't' = текст, 'i' = иконка, 'c' = счетчик. Например, tic = текст-иконка-счетчик. ict=иконка-счетчик-текст. i - иконка
• data-dislike-layout - порядок элементов в блоке dislike. Аналогично like-layout
• data-icon-size - размер иконки в пикселях.
• data-icon-style - стиль иконки. Число от 0 до 5
• data-icon-color - цвет иконки. Формат "rrggbb"
• data-text-size - размер текста в пикселях.
• data-text-color - цвет текста. Формат "rrggbb"
• data-count-clicks - true|false. Если true, то разрешает нажатие на кнопки. Если false, то выводит блок как статическую текстовую информацию.
• data-like-text - текст блока like
• data-like-title - подсказка блока like
• data-dislike-text - текст блока dislike
• data-dislike-title - подсказка для блока dislike
• data-disable-tooltip - true|false. Если true, то подсказка не отображается.

Объясню смысл параметра data-count-clicks. С помощью него можно вывести блок, отображающий количество лайков, но не дающий возможности нажать на кнопку. Так сделано, к примеру, в youtube: под общим количеством просмотров у них выводится количество голосов, а кнопки для голоса выводятся в левой части блока.

Анализируя работу кода в firebug, видим что на сервер уходит всего 2 запроса: запрос на скрипт ratingModule.js и скомпанованный запрос на параметры каждого блока, что ни коим образом не нагружает загружку страницы.

Оптимизация кода uptolike.ru

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

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