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

Устанавливаем 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.

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

Пару дней назад, одна моя знакомая попросила помочь ей создать интернет-голосование, поскольку, функционала в Контакте не хватало (там можно создавать опрос только на 15 человек). Задачка оказалась интересной. Итак, за дело!

Кому может пригодиться данный пост:

Устанавливаем 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.

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

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

Возле ректора 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.

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