html текст
All interests
  • All interests
  • Design
  • Food
  • Gadgets
  • Humor
  • News
  • Photo
  • Travel
  • Video
Click to see the next recommended page
Like it
Don't like
Add to Favorites

Кастомные социальные кнопки из песочницы

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

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

Детальнее ознакомившись с 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=<-заголовок->

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

image

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

Перед выводом, url-ы приводим в безопасный вид с помощью urlencode(). У нас код получился таким:
  1.     <div id="social_block">
  2.             <div id="vk_sharer">
  3.                 <span>53</span>
  4.                 <a id="vk_btn" href="_http://vkontakte.ru/share.php?url=http%3A%2F%2Fsite.ru%2Fklasnaya-stranitsa%2F" target="_blank" title="Сохранить Вконтакте">Сохранить</a>
  5.             </div>
  6.             <div id="fb_sharer">
  7.                 <span>116</span>
  8.                 <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>
  9.             </div>
  10.             <div id="tw_sharer" style="">
  11.                 <span>31</span>
  12.                 <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>
  13.             </div>
  14.             <hr/>
  15.             <div id="total_count">200</div>
  16.     </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):

  1.            var click = false;
  2.            $('#fb_btn').click(function(){
  3.                // проверяем был ли уже клик по кнопке
  4.                if(!click){
  5.                    var social_box = $(this).parent('div');
  6.                    // увеличиваем значение счетчика социалки на 1
  7.                    var count = parseInt($('span', social_box).text());
  8.                    if(!isNaN(count)){
  9.                        count = count + 1;
  10.                        $('span', social_box).text(count);
  11.                    }
  12.                    // увеличиваем общий рейтинг на 1
  13.                    var total_cnt = parseInt($('#total_count').text());
  14.                    if(!isNaN(total_cnt)){
  15.                        total_cnt = total_cnt + 1;
  16.                        $('#total_count').text(total_cnt);
  17.                    }
  18.                    click = true;
  19.                }
  20.                // открываем окно
  21.                window.open($(this).attr("href"),'displayWindow', 'width=700,height=400,left=200,top=100,location=no, directories=no,status=no,toolbar=no,menubar=no');
  22.                 return false;
  23.            });
  24.  
  25.  


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

Счетчики


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

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


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


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


После получения данных добавляем их в DOM и отображаем весь блок с кнопками например:
$('#social_block').fadeIn('fast);.
Эврика!

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


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

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

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

Upd:
Архив с примером
Читать дальше
Twitter
Одноклассники
Мой Мир

материал с habrahabr.ru

10

      Add

      You can create thematic collections and keep, for instance, all recipes in one place so you will never lose them.

      No images found
      Previous Next 0 / 0
      500
      • Advertisement
      • Animals
      • Architecture
      • Art
      • Auto
      • Aviation
      • Books
      • Cartoons
      • Celebrities
      • Children
      • Culture
      • Design
      • Economics
      • Education
      • Entertainment
      • Fashion
      • Fitness
      • Food
      • Gadgets
      • Games
      • Health
      • History
      • Hobby
      • Humor
      • Interior
      • Moto
      • Movies
      • Music
      • Nature
      • News
      • Photo
      • Pictures
      • Politics
      • Psychology
      • Science
      • Society
      • Sport
      • Technology
      • Travel
      • Video
      • Weapons
      • Web
      • Work
        Submit
        Valid formats are JPG, PNG, GIF.
        Not more than 5 Мb, please.
        30
        surfingbird.ru/site/
        RSS format guidelines
        500
        • Advertisement
        • Animals
        • Architecture
        • Art
        • Auto
        • Aviation
        • Books
        • Cartoons
        • Celebrities
        • Children
        • Culture
        • Design
        • Economics
        • Education
        • Entertainment
        • Fashion
        • Fitness
        • Food
        • Gadgets
        • Games
        • Health
        • History
        • Hobby
        • Humor
        • Interior
        • Moto
        • Movies
        • Music
        • Nature
        • News
        • Photo
        • Pictures
        • Politics
        • Psychology
        • Science
        • Society
        • Sport
        • Technology
        • Travel
        • Video
        • Weapons
        • Web
        • Work

          Submit

          Thank you! Wait for moderation.

          Тебе это не нравится?

          You can block the domain, tag, user or channel, and we'll stop recommend it to you. You can always unblock them in your settings.

          • sviatoslav.danylenko
          • домен habrahabr.ru

          Get a link

          Спасибо, твоя жалоба принята.

          Log on to Surfingbird

          Recover
          Sign up

          or

          Welcome to Surfingbird.com!

          You'll find thousands of interesting pages, photos, and videos inside.
          Join!

          • Personal
            recommendations

          • Stash
            interesting and useful stuff

          • Anywhere,
            anytime

          Do we already know you? Login or restore the password.

          Close

          Add to collection

             

            Facebook

            Ваш профиль на рассмотрении, обновите страницу через несколько секунд

            Facebook

            К сожалению, вы не попадаете под условия акции