«Кастомные социальные кнопки»

Раздел: Социальные сети

Недавно участвовал в разработке одного проекта — фото конкурса. По задумке, рейтинг фото альбомов должен формироваться из суммы всех публикаций в социальных сетях: Facebook, Вконтакте, Twitter. Т.е. общий рейтинг фотоальбома расчитывается:

Рейтинг фотоальбома = кол-во «Share» в Facebook + кол-во «Сохранить» в Вконтакте + кол-во «Retweet» в Twitter

На макетах, вид кнопок несколько отличался от предоставляемых социальными сетями плагинов, формируемых функциями api. В частности вид счетчиков:

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

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

Итак:

количество лайков будем получать от REST сервисов каждой социалки
кнопки рисуем свои и обрабатываем событие click

Кнопки

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

Facebook:
_http://www.facebook.com/sharer.php?u=<-url публикуемой страницы->&t=<-заголовок->&src=sp
Вконтакте:
_http://vkontakte.ru/share.php?url=<-url публикуемой страницы->
Twitter
_http://twitter.com/share?url=<-url публикуемой страницы->&text=<-заголовок->

Для имитации стандартного функционала, кнопки оформляем в виде ссылок с бэкграундами:

CSS приводить не буду, думаю с этим не должно возникнуть трудностей. У каждой кнопки-ссылки атрибут href должен содержать url в соответствии с описанными выше шаблонами.

Перед выводом, url-ы приводим в безопасный вид с помощью urlencode(). У нас код получился таким:


    <div id="social_block">
            <div id="vk_sharer">
                <span>53</span>
                <a id="vk_btn" href="_http://vkontakte.ru/share.php?url=http%3A%2F%2Fsite.ru%2Fklasnaya-stranitsa%2F" target="_blank" title="Сохранить Вконтакте">Сохранить</a>
            </div>
            <div id="fb_sharer">
                <span>116</span>
                <a id="fb_btn" href="_http://www.facebook.com/sharer.php?u=http%3A%2F%2Fsite.ru%2Fklasnaya-stranitsa%2F&t=%D0%9A%D0%BB%D0%B0%D1%81%D1%81%D0%BD%D0%B0%D1%8F+%D1%81%D1%82%D1%80%D0%B0%D0%BD%D0%B8%D1%86%D0%B0&src=sp" target="_blank" title="Мне нравится">Нравится</a>
            </div>
            <div id="tw_sharer" style="">
                <span>31</span>
                <a id="tw_btn" href="_http://twitter.com/share?url=http%3A%2F%2Fsite.ru%2Fklasnaya-stranitsa%2F&text=%D0%9A%D0%BB%D0%B0%D1%81%D1%81%D0%BD%D0%B0%D1%8F+%D1%81%D1%82%D1%80%D0%B0%D0%BD%D0%B8%D1%86%D0%B0" target="_blank" title="Retweet">Retweet</a>
            </div>
            <hr/>
            <div id="total_count">200</div>
    </div>

Также можно позаботиться о том как будет выглядеть «пост» в социальной сети, для этого разместим в секции <head> страницы соответсвующие мета теги.

У Facebook для этих целей есть Open Graph теги:

<meta property="og:title" content="Заголовок"/>

<meta property="og:description" content="Описание"/>

<meta property="og:image" content="url к картинке"/>

Вконтакте будет искать:

<meta name="title" content="Заголовок статьи" />

<meta name="description" content="Описание статьи. Это очень интересная статья." />

<link rel="image_src" href="_http://mysite.com/mypic.jpg" />

Далее обрабатываем событие click каждой кнопки, при возникновении которого, открываем новое окно браузера с url указанным в атрибуте href, при этом окно с заданными шириной и высотой, а то оно откроется как новая вкладка.

Код для кнопки Facebook (jQuery):


           var click = false;
           $('#fb_btn').click(function(){
               // проверяем был ли уже клик по кнопке
               if(!click){
                   var social_box = $(this).parent('div');
                   // увеличиваем значение счетчика социалки на 1
                   var count = parseInt($('span', social_box).text());
                   if(!isNaN(count)){
                       count = count + 1;
                       $('span', social_box).text(count);
                   }
                   // увеличиваем общий рейтинг на 1
                   var total_cnt = parseInt($('#total_count').text());
                   if(!isNaN(total_cnt)){
                       total_cnt = total_cnt + 1;
                       $('#total_count').text(total_cnt);
                   }
                   click = true;
               }
               // открываем окно
               window.open($(this).attr("href"),'displayWindow', 'width=700,height=400,left=200,top=100,location=no, directories=no,status=no,toolbar=no,menubar=no');
                return false;
           });

Аналогично для остальных. С «расшариванием» как видите все предельно просто.

Счетчики

Количество Share-ов для кажой страницы будем получать от REST сервисов социалок, после формирования страницы (событие ready). Так как в проекте повсеместно использовали jQuery, то и здесь она нам пригодится, в частности метод $.getJSON, c возможностью выполнять кроссдоменные запросы (хотя в версии jQuery 1.5 такая возможность добавлена и в $.ajax).

Код для Facebook:


        var pageuri = '<-- url публикуемой страницы -->';
       $.getJSON('http://api.facebook.com/restserver.php?method=links.getStats&callback=?&urls=' + pageuri + '&format=json', function(data) {
                // вставляем в DOM
                $('#fb_sharer span').text(data[0].share_count);
        });

Для Вконтакте необходимо объявить два объекта: VK и VK.Share, а также callback метод VK.Share.count(index, count):


        var pageuri = '<-- url публикуемой страницы -->';
        VK = {};
        VK.Share = {};
        // объявляем callback метод
        VK.Share.count = function(index, count){
            // вставляем в DOM
            $('#vk_sharer span').text(count);
        };
        $.getJSON('http://vkontakte.ru/share.php?act=count&index=1&url=' + pageuri + '&format=json&callback=?');

Для Twitter:


        var pageuri = '<-- url публикуемой страницы -->';
        $.getJSON('http://urls.api.twitter.com/1/urls/count.json?url=' + pageuri + '&callback=?', function(data) {
            // вставляем в DOM
            $('#tw_sharer span').text(data.count);
        });

После получения данных добавляем их в DOM и отображаем весь блок с кнопками например:

$('#social_block').fadeIn('fast);.

Эврика!

Обновление рейтинга

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

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

И еще один момент: Facebook перенес функционал Share в Like, но Share пока работает и надеюсь продолжит. Для получения количества «лайков» используйте в callback функции data[0].like_count.

Upd:
Архив с примером

Дата публикации: 2011-03-31

Источник