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 и заполняем его:

<!DOCTYPE html>
<html>
<head>
<!-- Подключаем jquery -->
<script src='http://code.jquery.com/jquery-1.7.1.js'></script>
</head>
<!-- ОБЯЗАТЕЛЬНО указываем <body> id='body' !-->
<body style='text-align:center;padding-top:50px;'>
</body>
</html>

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

<!DOCTYPE html>
<html>
<head>
<!-- Подключаем jquery -->
<script src='http://code.jquery.com/jquery-1.7.1.js'></script>
<!-- Подключаем VK-->
<script src="http://vk.com/js/api/xd_connection.js?2" type="text/javascript"></script>
</head>
<body style='text-align:center;padding-top:50px;' id='body'>
</body>
</html>

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

<!DOCTYPE html>
<html>
<head>
<!-- Подключаем jquery -->
<script src='http://code.jquery.com/jquery-1.7.1.js'></script>
<!-- Подключаем VK-->
<script src="http://vk.com/js/api/xd_connection.js?2" type="text/javascript"></script>
<!-- Подключаем скрипт регулировки высоты-->
<script src="vk_height.js" type="text/javascript"></script>
</head>
<body style='text-align:center;padding-top:50px;' id='body'>
</body>
</html>

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

<!DOCTYPE html>
<html>
<head>
<!-- Подключаем jquery -->
<script src='http://code.jquery.com/jquery-1.7.1.js'></script>
<!-- Подключаем VK-->
<script src="http://vk.com/js/api/xd_connection.js?2" type="text/javascript"></script>
<!-- Подключаем скрипт регулировки высоты-->
<script src="vk_height.js" type="text/javascript"></script>
</head>
<body style='text-align:center;padding-top:50px;' id='body'>
Hello, world!
</body>
</html>

Сразу наблюдаем как размер окошка уменьшился...

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

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

<!DOCTYPE html>
<html>
<head>
<!-- Подключаем jquery -->
<script src='http://code.jquery.com/jquery-1.7.1.js'></script>
<!-- Подключаем VK-->
<script src="http://vk.com/js/api/xd_connection.js?2" type="text/javascript"></script>
<!-- Подключаем скрипт регулировки высоты-->
<script src="vk_height.js" type="text/javascript"></script>
<!-- Скрипт получения фоток друзей и непосредственно их вывод-->
<script>
// Функция получения друзей и вывода их на экран
function doIt(){
        /*
        VK.api('метод', {параметр: "значение"}, callback функция{
        // работаем с полученными данными
        });
        */

	VK.api("friends.get", {fields: "photo_medium"}, function(data) { 
		// Действия с полученными данными 
		for(c=0;c<data.response.length;c++){
			$("body").append("<img src='"+data.response[c].photo_medium+"'><br><br>");
		}
	});
}
$(document).ready(function(){
	doIt();
});
</script>
</head>
<body style='text-align:center;padding-top:50px;' id='body'>
</body>
</html>

Сразу наблюдаем как размер окошка уменьшился...

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