Приложение получает информацию о пользователе и выводит её.
Для работы приложения нужен хостинг.
1. Создаём html файл.
Можно использовать специальную программу или любой текстовый редактор, например, блокнот.
Расширение файла должно быть html.
2. Пишем в созданый html файл код:
<html>
<head>
<!-- подключаем xd_connection.js -->
<script src="http://vkontakte.ru/js/api/xd_connection.js?2" type="text/javascript"></script>
<script type="text/javascript" charset="cp1251" >
window.onload = (function() { // когда загрузится вся страница
VK.init(function() { // инициализируем Vk API
// узнаём flashVars, переданные приложению GET запросом. Сохраняем их в переменную flashVars
var parts=document.location.search.substr(1).split("&");
var flashVars={}, curr;
for (i=0; i<parts.length; i++) {
curr = parts[i].split('=');
// записываем в массив flashVars значения. Например: flashVars['viewer_id'] = 1;
flashVars[curr[0]] = curr[1];
}
// получаем viewer_id из полученных переменных
var viewer_id = flashVars['viewer_id']; // выполняем запрос получения профиля
VK.api("getProfiles", {uids:viewer_id,fields:"photo_big"}, function(data) { // обрабатываем полученные данные
// выводим имя и фамилию в блок user_info
document.getElementById('user_info').innerHTML = data.response[0].first_name + ' ' + data.response[0].last_name + '<br />'; // создаем img, для отображения аватарки
var image=document.createElement('img');
// из полученных данных берем ссылку на фото
image.src=data.response[0].photo_big;
// добавляем img в блок user_info
user_info.appendChild(image);
});
});
});
</script>
</head>
<body>
<div id="user_info"></div>
</body>
</html>
В методах ВКонтакте API произошли изменения, используйте вместо метода getProfiles метод users.get
xd_connection.js позволяет делать запросы к API ВКонтакте при помощи функции VK.api(String method, Object params, Function callback), при этом не нужно заботиться о подписи, версии Api, и анализе полученных данных, данные будут приходить в виде javascript объекта.
VK.api принимает 3 параметра:
Название метода api.
Объект с параметрами запроса.
Функция для обработки результата.
3. Загружаем файл на свой сервер.
4. Настраиваем приложение на сайте вконтакте.
Выбираем:
Состояние: Приложение включено и видно всем
Тип приложения: IFrame
Адрес IFrame: Ссылка на созданный html файл на вашем сервере. Например http://site/vk.html
5. Всё готово.