Iframe приложения для сообществ вконтакте. JavaScript: Первое приложение Вконтакте: Hello World, Иваныч

Практически у каждого из нас есть своя страница в любой соц. сети. Каждая соц. сеть привлекает абсолютно разными качествами, например, Вконтакте – комфортное общение, Instagram – запечатление моментов, Тwitter – внутренний мир, мысли. Но, Одноклассники отличились совсем другим, своего рода фишкой, что делает их особенными.

Поймать посетителей на своей странице. ТОП-5 лучших способов

Это интересно: Как зайти на свою страницу ВКонтакте?

Речь идет о функции Одноклассников – «посещаемые гости» . Для одних пользователей это вполне комфортно, другие же предпочитают оставаться в неведение. Поэтому для пользователей второго вида в приоритете Вконтакте . Но не стоит забывать, что, помимо официальных возможностей, существуют и нелегальные приложения, ловушки и прочие другие проделки программистов, которые даже Вконтакте помогут отследить и выявить вашего наблюдателя. Об этом и поговорим.

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

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

Способ первый

Читайте также: Одноклассники: регистрация нового пользователя + пошаговая ИНСТРУКЦИЯ

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

• Заходим на свою страницу. В левой стороне находим из многочисленных функций одну «мои настройки» и переходим на неё. В обновлённой версии настройки можем найти в верхнем правом углу, нажав на миниатюрное круглое изображение вашей аватарки.

• Опускаемся в самый низ и находим предложение «вы можете удалить свою страницу» . Переходим по ссылке.
• Из шести причин «почему вы удаляете свою страницу» выбираем предпоследнюю «мою страницу не комментируют» .
• Чуть ниже приложение выбивает имена и фамилии двух людей, которые последние заходили к вам на страницу.

Не переживайте! Таким способом вы не удалите свою страницу, так как на основную кнопку «удалить страницу» , которая расположена немного ниже надписи с именами посетителей, вы не нажали. Даже если вы и нажмёте на эту кнопку, которая в нашем эксперименте не пригодится, и ваша страница действительно удалиться, восстановить её вы сможете в течение полугода , в любой удобный вам случай. Это также не займёт много времени.

Повторив эксперимент второй раз, имена людей могут поменяться, так как вашу страницу, как и страницы других пользователей, регулярно посещают.

Минусы этого способа: вы не сможете узнать дату и время посещение вашей страницы. Всё, что вы можете узнать, это частоту посещение, если регулярно проверять и записывать. А также своих постоянных гостей.

Способ второй

Предлагается тем людям, у которых более 100 подписчиков. Этот способ заключается в статистике, поэтому придётся немного подумать. Многие прагматичные люди, которые не пользуются приложениями, склонны именно к этому способу. Ведь, в отличие от первого предложенного варианта, вам не нужно будет вручную создавать свою статистику, она будет написана на экране в полном и точном виде для вас. Но минус присутствует так же, как и в любом способе нахождения гостя.

• На главной странице пользователя, то есть вас, если листать вниз, где заканчивается лента слева, можно найти ссылку «статистика страницы» . Переходим по этой ссылке. В обновлённой версии Вконтакте эту функцию можно найти под аватаркой, справа от функции «редактировать» .

• Наверху будет три раздела: «Посещаемость», «Охват» и «Активность». Нажимаем на пункт «Посещаемость».
• Первое, что вы увидите, это график . График посещаемости по месяцам или дням. Это будет зависеть от вашего выбора. На этом графике можете увидеть наибольшую посещаемость вашей страницы.

• Второй график , который вы можете увидеть чуть ниже – график «пол/возраст» . Здесь возможно отследить средний возраст и пол людей, которые вас посещают. Также можно отследить посещаемость за неделю или месяц, как будет угодно. Под графиком будут проценты посещаемости пола, которые мы можем увидеть на картинке.
• Третий график – круговая диаграмма. На ней можно отследить проценты людей из различных стран и городов, по которым можно догадаться, кто именно к вам заходил.
• Последний график – подписчики. По ней вы сможете увидеть рост и падение подписчиков вашей страницы за всё время или сутки.
• На самом верху можно увидеть «среднее суточное количество уникальных посетителей» и «общее количество уникальных посетителей» за 30 дней.

Минусы приложения

Из минусов: такой способ не предоставляет конкретных фамилий. Догадываться придётся самим, включая смекалку и опираясь на данные которые предоставила вам программа: возраст, пол, страна.

Вреда никакого программа не предоставит, более того, этот способ одобрен администрацией Вконтакте .

Способ третий

Мало того, что вполне простой, так ещё и предоставляет наибольшую информацию, чем любой другой способ. Знаете почему? Потому что программисты давно уже заинтересовались таким вопросом, как «гости» и позаботились о нас, создав такие приложения. Многие из них бесплатные, многие менее эффективны . Мы предоставим вам список лучших приложений, которые благодаря хорошим отзывам вошли в топ 5. Но об этом позже.

• С левой стороны экрана находим функцию «приложения» или «игры» . Переходим по ссылке.

Кликните по кнопке «игры», которая находится слева

• В правом верхнем углу страницы находим знак лупы и пропуск для ввода текста, где светлым шрифтом будет написано «поиск» . Вводим одну часть фразы из названия возможных предложений по нашей тематике- «гости» . Нажимаем на Enter на клавиатуре, тем самым запустив поиск, и ждём предложенных вариантов.

• Выбираем одно из приложений.

Каждое приложение имеет своё оформление, но связывают их такие детали:

• Все приложение в онлайн. Вконтакте не имеет такие функции, как «скачать приложение» ;
• Многие приложения бесплатны, но не все. Многие требуют премиум, чтобы открылись важные функции. Премиум можно купить за голоса, которые приобретают с помощью онлайн-денег. Стоимость 1 голоса – 7 рублей. Чтобы купить премиум, советуем купить сразу 10 голосов, так как премиум в среднем стоит не меньше 8 рублей;
• Оформление и основные функции у каждого приложения фактически одинаковы;
• В среднем каждое приложение имеет от 3,5 до 4 звёзд . Это ваш шанс создать приложение на 5 звёзд , которое в точности будет находить гостей!

Топ 5 приложений для «ловли» посетителей

Приложение может сканировать вашу страницу и подсчитать количество девушек и парней в процентах в гостях, друзьях и подписчиках. В разделе «мои гости» вы сможете контролировать посещаемость друзей и их гостей. В приложении 33 000 000 участников.

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

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

Как работать с приложением

После загрузки появится страница.

В разделе «гости» можно узнать всех кто вами интересовался, а также указывается дата и время посещения вашей страницы.

В разделе «Поклонники» можно узнать, насколько часто вами интересовались. Указывается за неделю, месяц, всё время

В разделе «Все о друзьях» можно узнать, кто заходил к ним в гости, и интересовался их личностью, очень удобно узнать всё о ваших знакомых.

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

Если вам такое положение вещей не нравится, или ваша вторая половина ревнивая, старается всё контролировать и за всем следить, разработчики придумали выход с этой ситуации, но конечно, не бесплатно. Чтобы о ваших действиях никто и ничего не узнал, зайдите в раздел «Мой профиль» , там вы узнаете, сколько стоит такая услуга.

«Ваши гости и поклонники»

Еще одно приложение для «слежки» за посетителями

Приложение имеет функцию «ревности» , где вы можете отследить лайки, посещаемость и имена, с кем переписывается человек, которого вы анализируете. Можно выбрать любую из ваших фотографий и преобразовать ее в произведение искусства одним из предложенных фильтров. Приложение имеет 12 000 000 участников.

Кнопка «гости» в приложении

На ней можно увидеть, кто и заходил к вам, сколько дней назад, количество посещений.

Желательно выставить удобный для вас фильтр . В окошке «Фильтровать» нужно выставить галочки на ваше усмотрение, для отображения информации интересующих людей. Удобное и не сложное приложение.

«Мои гости и анализ»

В ней 70% участников , в общем количестве которых 5 400 000 , дают приложению 5 звёзд . Приложение предлагает довольно популярную функцию PR . Она сделает вас популярным во Вконтакте . Много лайков, больше поклонников и гостей, новых друзей и популярность. Конечно, это не бесплатно, но, в отличие от остальных приложений, наиболее эффективно.

«ПоискВС: Оценки, Пиар, Гости и Анализ лайков»

Самая интересная и полезная функция этого приложение, помимо поиска гостей – подсчёт общего количества лайков . Полный анализ вашей страницы и качественный поиск гостей привлекает посетителей. В приложении 3 200 000 участников .

«Мои друзья (связи, гости)»

Имеет 6 600 000 участников . Показывает добавившихся и удалившихся друзей, поклонников, кумиров, гостей, связи, теорию 6-ти рукопожатий. Приложение было очень популярным в 2015 году. 57 986 участников дают 5 звёзд приложению.

Минусов приложение фактически не имеет. Единственное – друзья могут видеть, что вы пользуетесь этим приложением.

Способ четвертый: Ловушка

С этой ловушкой нам поможет приложение Вконтакте . Это приложение для поиска гостей, именно через него мы активируем ссылку, точнее ловушку для гостей. Способ не очень популярный, что даст вам преимущество.

• Заходим в приложение (как заходить в это приложение, говорилось ранее).
• Когда «мои гости» запустится, находим на верхней главной линии приложения раздел «мой профиль» , который находиться в левом углу, и нажимаем на него.

Чуть выше круговой диаграммы статистики друзей и подписчиков вы найдёте раздел «ловушка для гостей» , где чуть ниже будет написано большими буквами «не активировано» и менее большими буквами «активировать». Нажимаем «активировать».

Вы можете активировать функцию «ловушка»

• Высветится табличка «поймать больше гостей» . С левой стороны вы увидите под номер ячейку, в которой находится ссылка. Наводите мышкой на ссылку, зажимаете левую кнопку мыши с первого символа ссылки и ведёте горизонтально стрелку мыши до конца ссылки. На выделенный шрифт нажимаете правой кнопкой мыши и из предложенных функций выбираете «Копировать» . Есть другой способ: ниже ссылки можно нажать на надпись «скопировать ссылку» . Это облегчит вам задачу.

• Теперь нужно вставить ссылку в поле «веб-сайт» на своей странице. Заходим на свою страницу. Под аватаркой есть раздел «редактировать» , нажимаем на надпись.
• С правой стороны в блоке находим пункт . Переходим в этот раздел.

Перейдите в раздел «Контакты»

• В поле «личный сайт» вставляем ссылку. Делаем это таким образом: на пустое место в ячейке нажимаем правой кнопкой мыши. Из предложенных функций выбираем «Вставить» .
• Нажимаем на синюю надпись «сохранить» и возвращаемся на свою страницу. Не нажав на «сохранить» , ваши новые данные не сохранятся, и придётся повторить весь процесс 6 пункта.

• Возвращаемся в приложение . Снова переходим на раздел «Мой профиль» . Видим надпись «Активировано на 50%» . Это подтверждение того, что мы сделали всё правильно.
• Заходим в раздел . Теперь все пользователи, которые переходили по этой ссылке, будут отмечаться в списке ваших гостей.

Командир судна 28 апреля 2012 в 23:46 VK API + Iframe для чайников. Урок 1. Вывод аватаров друзей

Топик создан для чайников VK API но для программистов которые понимают что такое php, javascript, jquery, css.

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

Мне лично было очень сложно понять что и где, по этому и появилась идея данного топика.

1. Заходим на страницу разработчиков: vk.com/developers.php

2. Создаем приложение нажав на синюю кнопку.

3. Вводим название, выбираем тип - iframe/Flash и любую категорию

4. Получаем смс от ВК, подтверждаем что мы - не бот. Мы - хабрамэн!

5. Ура - ура - ура! Вы создали ваше первое приложение (а может и не первое)! Далее заходим в «Настройки».

6. Выбираем: Состояние - приложение включено и видно всем, Тип приложения: iframe. Установка приложения - требуется. Запрашивать доступ к - доступ к друзьям. Вводим адрес на скрипт (в моем случае скрипт будет размещен на локалке).
Внимание! Максимальная ширина приложения - 827 пикс.

7. Теперь открываем наш index.php и заполняем его:

8. Вроде ничего сложно в выше сказанном коде нету. Продолжим. теперь мы подключим скрипты Вконтакте API.

9. Теперь мы будем использовать скрипт для изменения высоты Iframe в зависимости от содержимого. Допустим у нас высота приложения в настройках - 500 пикс. А если у нас 200 друзей и будет 200 аватаров в столбец? Что делать? По этому создаем скрипт - vk_height.js

VK.init(function(){ }); function autosize(width) { //Проверяем элемент body на наличие. if (!document.getElementById("body")) { alert("error"); return; } // Успешно ли подключен ВК скрипт if (typeof VK.callMethod != "undefined") { /* Вызываем функцию vk js api для управления окном. VK.callMethod("функция", параметры) В данном случае у нас - VK.callMethod("изменение_размеров_окна", ширина, высота); Так же добавляем еще 60 пикселей что бы было небольшое расстояние. */ VK.callMethod("resizeWindow", 840, document.getElementById("body").clientHeight + 60); } else { alert("error #2"); } } $(document).ready(function(){ //Вызываем функцию регулировки высоты каждые пол секунды. setInterval("autosize(607)", 500); });

10. Теперь подключим наш vk_height.js к index.php

11. Пропишем Hello, world! в index.php
Hello, world!

12. Настало время работы с самим VK JS API.

Api ВК очень напоминает мне jquery. Людям которые знают $.post, $.get, $.ajax сразу поймут что к чему. Внимание! По умолчанию данные от ВК приходят в json.

// Функция получения друзей и вывода их на экран function doIt(){ /* VK.api("метод", {параметр: "значение"}, callback функция{ // работаем с полученными данными }); */ VK.api("friends.get", {fields: "photo_medium"}, function(data) { // Действия с полученными данными for(c=0;citems as $item){
$uids = $item->item;
}
$api = new vkapi();
$ans = $api->api("getProfiles", array("uids" => implode(",",$uids), "fields" => "photo, photo_big"));

Первый foreach берет всех зарегистрированных пользователей из моего приложения (но не более 1000), а далее выполняется запрос к «API в контакте» на загрузку данных об этих пользователях. На выходе имеем массив значений вида: $ans["response"][$i]["field"], где response - массив данных о пользователях, дальше $i элемент и наконец требуемое свойство пользователя field например first_name (имя) или photo.

Преимущества такого подхода:

1. Становятся доступными secure методы API, что не маловажно если нужно узнать баланс или зачисить/снять голоса.
2. Не нужно писать «тысячи» строк кода на JS для работы с API
3. Мы получаем легко-администрируемый сайт и приложение одновременно.

Что именно я делал в Joomla рассказывать очень долго и не нужно я только приведу примерную логику работы моего приложения.

Не для кого не секрет, что все компоненты Joomla базируются на MVC-паттерне. Который все раскладывает по полочкам!

Controller компонента принимает все команды/запросы пользователя (хоть на действия пользователя при переходе по ссылкам, хоть с помощью AJAX запросов c использованием JS)

Model отвечает за все операции с базой данных нашего компонента, у меня, например: выводит само голосование, списки проголосовавших за определенного участника голосования, отвечает на проверку и повторного голосования и еще несколько вспомогательных функций.

View управляет выводом различных Layout"ов и передачей в них данных из модели.

Тем кто занимался разработкой компонентов под Joomla все предельно ясно.

Никто не мешает нам использовать класс vkapi.class.php в любом месте приложения, лично я использовал его только во view для подготовки данных к выводу (например по uid пользователей в контакте, который поставили мое приложение, я подгружал адреса фотографий)

Этап 5: Виджеты

Уже все привыкли к огромному количеству различных форм и кнопочек из соц сетей. Мне тоже захотелось такую в своем Iframe приложении. Каким образом подключить виджет комментариев:

Ни в коем случае не добавляйте на страницу следующий код:

это подходит для сайтов, но не подходит для Iframe приложений!

Достаточно сделать вот так:

VK.Widgets.Comments("vk_comments", {limit: 10, width: "578", attach: "*"});

в JS API уже реализованы функции добавления виджетов.

Что касается самих комментариев то вы знаете, что когда пользователь оставляет свой комментарий на странице с приложением, на его стене он тоже публикуется, но ссылкой на ваш сайт, а не на приложение! Что бы этого избежать нужно использовать параметр pageURL в котором будет указан адрес приложения в формате www.vkontakte.ru/app {app_id}

В итоге у меня получилось так:

VK.Widgets.Comments("vk_comments", {limit: 10, width: "578", attach: "*", pageURL: "http://vkontakte.ru/app2176209"});

Этап 6: Вывод

На выходе имеем не сложное, но рабочее приложение в Контакте. Которое можно легко расширять и развивать добавляя новые и новые возможности и компоненты используя свою любимую CMS совместно с API в Контакте и JS API.

Спасибо за внимание, с уважением Данила.

P.S. Администрация одобрила приложение через день, попросив в залог 10 голосов.
P.P.S Через полтора часа после этого поступило уже несколько предложений о покупке! Сразу говорю не продается, не вижу смысла, теперь тем более!

6 марта 2011 в 14:13 Разработка IFrame приложения в Контакте, использование Vkontakte API

• Разработка веб-сайтов

Устанавливаем Joomla - там все довольно прозрачно и понятно.

Этап 3: JS API и «API в Контакте»

Что у нас на вооружении: свеженькое приложение в Контакте и только что созданный сайт на каком-нибудь стандартном шаблоне Joomla.

Тут сразу хочу обратить внимание на API в Контакте!

API существует 2 вида:

Javascript API

API в Контакте

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

Возможности второго намного больше! Обращение к скрипту www.vkontakte.ru/api.php может производиться любым удобным способом будь то AJAX запрос или HTTP запрос напрямую с сервера. Описание всех методов api есть .

Теперь подробнее об инициализации api и работы с ними. Начнем по порядку:

JS API инициализируется добавлением в наш шаблон следующей яваскрипта:

Src=http://vkontakte.ru/js/api/xd_connection.js?2

VK.init(function() {

// Your code here
});

Сразу хотелось бы заметить что «API initialization succeeded» эта строка здесь написана не зря и говорит о том, что функция VK.init выполнится, когда готово к работе API! Но не ваш web-ресурс. Для того что бы проверить готовность к выполнению вашего js кода, можно воспользоваться вашей любимой js-библиотекой или фереймворком. Лично я предпочитаю Mootools - им и воспользовался.

Мой код инициализации выглядит так:

VK.init(function() {
// API initialization succeeded
window.addEvent("domready", function(){
//DOM ready
})
});

Что теперь мы можем делать? А теперь мы можем использовать API то есть например проверить, выбрал ли пользователь требуемые параметры доступа приложения к его данным. Например так:

VK.api("getUserSettings", function(data){
if (data.response){
if (!(256 & data.response))
VK.callMethod("showSettingsBox", 263);
}
if (data.error){
alert("Error Code:"+data.error.error);
}
});

Для этого сначала вызовем функцию getUserSettings, которая вернет нам битовую маску настроек текущего пользователя. Вызов осуществляется с помощью метода VK.api, где первый параметр это название функции, а второй CallBack функция. Переменная data это результат работы функции getUserSettings, который нужно проверить на предмет ошибки, если вернулось data.error - значит ошибка! Ошибка может быть по двум (на мой взгляд) причинам: приложение не одобрено администрацией сайта (у меня до одобрения работало только getProfiles, кстати, я потом встречал записи на форумах что в тестовом режиме все работает). Если функция вернула data.response то продолжаем работу сверяем битовые маски текущих прав и требуемых и вызываем функцию JS API showSettingsBox с единственным параметром (маска требуемых прав, у меня 263 - это доступ к фотографиям, друзьям и сслыка на приложение в левом меню пользователя)

На мой взгляд вызывать методы «API в Контакте» с помощью JS API как-то не хорошо. Это удобно для простых задач. Полностью Iframe приложение построеное на JS это очень трудоемко. И поэтому переходим к изучению HTTP запросов к API.

Этап 4: PHP и «API в Контакте»

Для этого у нас есть Joomla и класс который забираем по ссылке

Для работы с API через PHP потребуется создать две константы, будут включаться в каждый запрос это api_id вашего приложения (его видно прямо в адресной строке при переходе по ссылке на приложение) и секретный ключ - он выдается при создании приложения (он длинный и его можно изменить в настройках приложения)

Вызов API средствами PHP выглядит следующим образом:

Foreach ($this->items as $item){
$uids = $item->item;
}
$api = new vkapi();
$ans = $api->api("getProfiles", array("uids" => implode(",",$uids), "fields" => "photo, photo_big"));

Первый foreach берет всех зарегистрированных пользователей из моего приложения (но не более 1000), а далее выполняется запрос к «API в контакте» на загрузку данных об этих пользователях. На выходе имеем массив значений вида: $ans["response"][$i]["field"], где response - массив данных о пользователях, дальше $i элемент и наконец требуемое свойство пользователя field например first_name (имя) или photo.

Преимущества такого подхода:

1. Становятся доступными secure методы API, что не маловажно если нужно узнать баланс или зачисить/снять голоса.
2. Не нужно писать «тысячи» строк кода на JS для работы с API
3. Мы получаем легко-администрируемый сайт и приложение одновременно.

Что именно я делал в Joomla рассказывать очень долго и не нужно я только приведу примерную логику работы моего приложения.

Не для кого не секрет, что все компоненты Joomla базируются на MVC-паттерне. Который все раскладывает по полочкам!

Controller компонента принимает все команды/запросы пользователя (хоть на действия пользователя при переходе по ссылкам, хоть с помощью AJAX запросов c использованием JS)

Model отвечает за все операции с базой данных нашего компонента, у меня, например: выводит само голосование, списки проголосовавших за определенного участника голосования, отвечает на проверку и повторного голосования и еще несколько вспомогательных функций.

View управляет выводом различных Layout"ов и передачей в них данных из модели.

Тем кто занимался разработкой компонентов под Joomla все предельно ясно.

Никто не мешает нам использовать класс vkapi.class.php в любом месте приложения, лично я использовал его только во view для подготовки данных к выводу (например по uid пользователей в контакте, который поставили мое приложение, я подгружал адреса фотографий)

Этап 5: Виджеты

Уже все привыкли к огромному количеству различных форм и кнопочек из соц сетей. Мне тоже захотелось такую в своем Iframe приложении. Каким образом подключить виджет комментариев:

Ни в коем случае не добавляйте на страницу следующий код:

Это подходит для сайтов, но не подходит для Iframe приложений!

Достаточно сделать вот так:

VK.Widgets.Comments("vk_comments", {limit: 10, width: "578", attach: "*"});

В JS API уже реализованы функции добавления виджетов.

Что касается самих комментариев то вы знаете, что когда пользователь оставляет свой комментарий на странице с приложением, на его стене он тоже публикуется, но ссылкой на ваш сайт, а не на приложение! Что бы этого избежать нужно использовать параметр pageURL в котором будет указан адрес приложения в формате www.vkontakte.ru/app {app_id}

В итоге у меня получилось так:

VK.Widgets.Comments("vk_comments", {limit: 10, width: "578", attach: "*", pageURL: "http://vkontakte.ru/app2176209"});

Этап 6: Вывод

На выходе имеем не сложное, но рабочее приложение в Контакте. Которое можно легко расширять и развивать добавляя новые и новые возможности и компоненты используя свою любимую CMS совместно с API в Контакте и JS API.

Вот что у меня получилось.