IFrame-приложение ВКонтакте. Вывод информации о пользователе

Готовые уроки IFrame + ВКонтакте API

IFrame-приложение ВКонтакте. Вывод информации о пользователе

Сообщение Александр » 08 июл 2010, 22:47

IFrame-приложение ВКонтакте. Вывод информации о пользователе
JavaScript, Iframe, ВКонтакте API, HTML

Приложение получает информацию о пользователе и выводит её.

Для работы приложения нужен хостинг.


1. Создаём html файл.
Можно использовать специальную программу или любой текстовый редактор, например, блокнот.
Расширение файла должно быть html.

2. Пишем в созданый html файл код:
  1. <html>
  2. <head>
  3. <!-- подключаем xd_connection.js -->
  4. <script src="http://vkontakte.ru/js/api/xd_connection.js?2" type="text/javascript"></script>
  5.  
  6. <script type="text/javascript" charset="cp1251" >
  7. window.onload = (function() {   // когда загрузится вся страница
  8.     VK.init(function() {    // инициализируем Vk API
  9.  
  10.     // узнаём flashVars, переданные приложению GET запросом. Сохраняем их в переменную flashVars
  11.     var parts=document.location.search.substr(1).split("&");
  12.     var flashVars={}, curr;
  13.     for (i=0; i<parts.length; i++) {
  14.         curr = parts[i].split('=');
  15.         // записываем в массив flashVars значения. Например: flashVars['viewer_id'] = 1;
  16.         flashVars[curr[0]] = curr[1];
  17.     }
  18.    
  19.     // получаем viewer_id из полученных переменных
  20.     var viewer_id = flashVars['viewer_id'];
  21.  
  22.     // выполняем запрос получения профиля
  23.     VK.api("getProfiles", {uids:viewer_id,fields:"photo_big"}, function(data) {
  24.         // обрабатываем полученные данные
  25.         // выводим имя и фамилию в блок user_info
  26.         document.getElementById('user_info').innerHTML = data.response[0].first_name + ' ' + data.response[0].last_name + '<br />';
  27.         // создаем img, для отображения аватарки
  28.         var image=document.createElement('img');
  29.         // из полученных данных берем ссылку на фото
  30.         image.src=data.response[0].photo_big;
  31.         // добавляем img в блок user_info
  32.         user_info.appendChild(image);
  33.     });
  34.  
  35.     });
  36. });
  37. </script>
  38. </head>
  39. <body>
  40. <div id="user_info"><a href="http://flapps.ru">http://flapps.ru</a></div>
  41. </body>
  42. </html>

В методах ВКонтакте API произошли изменения, используйте вместо метода getProfiles метод users.get
xd_connection.js позволяет делать запросы к API ВКонтакте при помощи функции VK.api(String method, Object params, Function callback), при этом не нужно заботиться о подписи, версии Api, и анализе полученных данных, данные будут приходить в виде javascript объекта.

VK.api принимает 3 параметра:
1) Название метода api.
2) Объект с параметрами запроса.
3) Функция для обработки результата.

Есть другой, более простой и удобный способ получения flashVars. Он описан в уроке Получение параметров (viewer_id и т.п.) в IFrame приложении.

3. Загружаем файл на свой сервер.

4. Настраиваем приложение на сайте вконтакте.
Выбираем:
Состояние: Приложение включено и видно всем
Тип приложения: IFrame
Адрес IFrame: Ссылка на созданный html файл на вашем сервере. Например https://flapps.ru/vk.html

Страница должны быть доступна по протоколу https. Необходимо получить SSL сертификат (например, бесплатный Let's Encrypt).


5. Всё готово.

Исходник Чтобы увидеть ссылку - зарегистрируйтесь

За это сообщение автора Александр поблагодарили - 9:
Серёга, Frostman, Gas, lewka151, nikolay206, Noise Gate, Rembrant, T710MA, turikhay
Аватара пользователя
Александр
Создатель сайта
Создатель сайта
 
Автор темы
Сообщения: 4574
Зарегистрирован: 27 сен 2009, 16:45
Откуда: Санкт-Петербург
Благодарил (а): 126 раз.
Поблагодарили: 771 раз.

Чтобы убрать блок с рекламой, зарегистрируйтесь на форуме или войдите.

Google
 



Re: IFrame-приложение ВКонтакте. Вывод информации о пользователе

Сообщение Влад » 09 июл 2010, 08:57

АААА! Супер пупер!!!!! Спасибо Александр!!!!!!!!!!!!!!!!!!!!!!
https://hrefs.ru - сервис крауд маркетинга №1 в 2019 году

За это сообщение автора Влад поблагодарил:
Strannik_Kazani
Аватара пользователя
Влад
Модератор
Модератор
 
Сообщения: 655
Зарегистрирован: 29 апр 2010, 22:24
Благодарил (а): 26 раз.
Поблагодарили: 58 раз.

Re: IFrame-приложение ВКонтакте. Вывод информации о пользователе

Сообщение Влад » 12 июл 2010, 12:30

Подскажите пожалуйста как предать в скрипт .php хочу попробовать сделать запись Id в БД
https://hrefs.ru - сервис крауд маркетинга №1 в 2019 году
Аватара пользователя
Влад
Модератор
Модератор
 
Сообщения: 655
Зарегистрирован: 29 апр 2010, 22:24
Благодарил (а): 26 раз.
Поблагодарили: 58 раз.

Re: IFrame-приложение ВКонтакте. Вывод информации о пользователе

Сообщение Александр » 12 июл 2010, 21:43

Влад
Javascript - XMLHTTPRequest.
Или подключай, например, jQuery. Там get, post.
В обоих случаях нужны знания Javascript.

За это сообщение автора Александр поблагодарил:
Strannik_Kazani
Аватара пользователя
Александр
Создатель сайта
Создатель сайта
 
Автор темы
Сообщения: 4574
Зарегистрирован: 27 сен 2009, 16:45
Откуда: Санкт-Петербург
Благодарил (а): 126 раз.
Поблагодарили: 771 раз.

Re: IFrame-приложение ВКонтакте. Вывод информации о пользователе

Сообщение Влад » 13 июл 2010, 19:00

гуглил не подуше как-то, пробовал - не получилось
https://hrefs.ru - сервис крауд маркетинга №1 в 2019 году
Аватара пользователя
Влад
Модератор
Модератор
 
Сообщения: 655
Зарегистрирован: 29 апр 2010, 22:24
Благодарил (а): 26 раз.
Поблагодарили: 58 раз.

Re: IFrame-приложение ВКонтакте. Вывод информации о пользователе

Сообщение lol123 » 14 июл 2010, 02:39

Не пойму, почему не могу вывести nickname, sex, bdate. Возвращает андефайнды одни.
lol123

 
Сообщения: 36
Зарегистрирован: 18 фев 2010, 17:19
Благодарил (а): 5 раз.
Поблагодарили: 0 раз.

Re: IFrame-приложение ВКонтакте. Вывод информации о пользователе

Сообщение Влад » 14 июл 2010, 09:24

lol123 что именно приходит?
https://hrefs.ru - сервис крауд маркетинга №1 в 2019 году
Аватара пользователя
Влад
Модератор
Модератор
 
Сообщения: 655
Зарегистрирован: 29 апр 2010, 22:24
Благодарил (а): 26 раз.
Поблагодарили: 58 раз.

Re: IFrame-приложение ВКонтакте. Вывод информации о пользователе

Сообщение alexei » 17 июл 2010, 16:08

Расширение файла должно быть html.

А нельзя php, aspx, htm? Где надо исправить?
http://appslessons.com/ — Мой блог посвященный урокам приложений ВКонтакте
Аватара пользователя
alexei
Разработчик
Разработчик
 
Сообщения: 836
Зарегистрирован: 21 янв 2010, 19:44
Откуда: Rostov-on-Don
Благодарил (а): 5 раз.
Поблагодарили: 54 раз.

Re: IFrame-приложение ВКонтакте. Вывод информации о пользователе

Сообщение Влад » 17 июл 2010, 16:54

php можно - пробовал
https://hrefs.ru - сервис крауд маркетинга №1 в 2019 году
Аватара пользователя
Влад
Модератор
Модератор
 
Сообщения: 655
Зарегистрирован: 29 апр 2010, 22:24
Благодарил (а): 26 раз.
Поблагодарили: 58 раз.

Re: IFrame-приложение ВКонтакте. Вывод информации о пользователе

Сообщение alexei » 17 июл 2010, 18:18

Уже получилось. Жаль что приходиться все тащить за собой при переходе не другие страницы. Всю QueryString(((. Или почти ее всю.
http://appslessons.com/ — Мой блог посвященный урокам приложений ВКонтакте
Аватара пользователя
alexei
Разработчик
Разработчик
 
Сообщения: 836
Зарегистрирован: 21 янв 2010, 19:44
Откуда: Rostov-on-Don
Благодарил (а): 5 раз.
Поблагодарили: 54 раз.

След.

Вернуться в Уроки IFrame ВКонтакте



Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей и гости: 0