О виджетах популярных социальных сетей знают практически все web мастера. Использовать их достаточно просто. В большинстве случаев нужно вставить блок с JavaScript кодом в шаблон страницы. Но что мы получаем в результате? Стандартную кнопку, позволяющую посетителю быстро опубликовать ссылку на текущую страницу в социальной сети и обычно счетчик таких публикаций.

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

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

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

1) Кнопка публикации.
2) Счетчик публикаций.

Рассмотрим их подробнее.

Кнопка публикаций

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

Для facebook:

<a href="http://www.facebook.com/sharer.php?u=url&t=text" target="_blank">facebook</a>

<a href="http://vkontakte.ru/share.php?url=url" target="_blank">вконтакте</a>';

Счетчик публикаций

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

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

1) Любой запрос занимает какое-то время, которое прибавляется к общему времени формирования страницы. Кэширование в какой-то степени решает эту проблему (запросы будут отправляться не при каждом просмотре страницы), но не полностью.
2) При большом количестве запросов, социальная сеть может заблокировать ваш IP (зависит от политики социальной сети).
3) Создаётся дополнительная нагрузка на ваш сервер.

Второй вариант – отправлять запросы со стороны клиента, с помощью JavaScript.

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

1) Встроенная защита браузеров от кросс-доменных запросов.

Т.е. вы не можете отправить AJAX запрос на другой домен, но можно вставить в страницу тег script и в его атрибуте src указать адрес нужного скрипта на другом домене. В результате браузер загрузит нужный вам скрипт и выполнит код, находящийся в нём. При использовании jQuery задача решается с минимумом усилий. Например, так:

$.getJSON('http://vkontakte.ru/share.php?act=count&index=1&url=page_url&callback=?', function(response) {
    …
});

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

2) Формат ответа социальной сети.

С facebook всё отлично. Эта социальная сеть поддерживает JSONP и если мы отправим запрос вида.

$.getJSON('http://graph.facebook.com/' + encodeURI(page_url)
        + '&callback=?', function(response) {
    if (response.shares !== undefined) {
        fb_counter = response.shares;
    }
    $('#facebook_count').html(response.shares);
});<pre>
 
То получим следующий ответ.
 
<pre lang="javascript">jQuery16105957901661749929_1306057803097({
   "id": "http://www.smashingmagazine.com/",
   "shares": 5454
});

В случае с вконтаке всё сложнее. Эта социальная сеть JSONP не поддерживает и на запрос

$.getJSON('http://vkontakte.ru/share.php?act=count&index=1&url='
    + encodeURI(page_url) + '&callback=?', function(response) {});

VK.Share.count(1, 9);

VK is not defined

Вообще ответ сервера вконтакте – это обычный вызов метода count, присвоенного параметру Share объекта VK. Откуда берется этот объект? Его создаёт скрипт, который нужно подключить при использовании стандартного виджета. Но этот скрипт нам не нужен, т.к. виджет мы не используем, а количество публикаций ссылки нужно вставить в заранее подготовленный блок о котором стандартный скрипт ничего не знает. Т.е. нам нужен собственный объект VK с соответствующими параметрами. Создать его совсем не сложно.

var VK = {
    Share: {
        count: function(value, count) {
            $('#vkontakte_count').html(count);
        }
    }
}

Обратите внимание – этот код должен находится в глобальной области видимости. Привожу весь код целиком.

Страницы со счетчиками

<!DOCTYPE html>
<html>
<head>
    <title>Счетчики</title>
    <meta charset="utf-8" />
</head>
 
<body>
    <div>Facebook <span id="facebook_count"></span></div>
    <div>ВКонтакте <span id="vkontakte_count"></span></div>
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
    <script src="social_counters.js"></script>
</body>
</html>

jQuery(document).ready(function($) {
    var fb_counter = 0;
    var vk_counter = 0;
    var page_url = 'http://www.smashingmagazine.com/';
 
    $.getJSON('http://vkontakte.ru/share.php?act=count&index=1&url='
        + encodeURI(page_url) + '&callback=?', function(response) {});
 
 
    $.getJSON('http://graph.facebook.com/' + encodeURI(page_url)
            + '&callback=?', function(response) {
        if (response.shares !== undefined) {
            fb_counter = response.shares;
        }
        $('#facebook_count').html(response.shares);
    });
});
 
var VK = {
    Share: {
        count: function(value, count) {
            $('#vkontakte_count').html(count);
        }
    }
}

В заключение пара замечаний

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

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

Успехов!

Written by: Владимир Стаценко
WWW: ]]>http://www.simplecoding.org/javascript-xss-poluchenie-dannyx-ot-facebook-i-vkontakte.html]]>
Date: 31.10.2011