Вывод аватарок друзей, списки Online и Offline

Готовые уроки IFrame + ВКонтакте API
Аватара пользователя
Александр
Создатель сайта
Создатель сайта
Сообщения: 4574
Зарегистрирован: 27 сен 2009, 16:45

Вывод аватарок друзей, списки Online и Offline

Сообщение Александр »

Вывод аватарок друзей, списки Online и Offline
JavaScript

В этом уроке показано:
- как узнать список друзей
- разделение друзей на online и offline
- вывод аватарок друзей
- правильные окончания (1 друг, 2 друга, 5 друзей)
- использование изображения прелоадера

Изображение

Я использую jQuery, но если очень нужно, то можно обойтись без этой библиотеки.

code.js

Код: Выделить всё

/*  https://flapps.ru/forum - форум о создании приложений */ $(document).ready(function(){    VK.init(function() {    // выполняем запрос получения списка друзей    VK.api("friends.get", {fields:"online,photo"}, function(data) {        // узнаем количество друзей        var frCount = data.response.length;         var onlineCount = 0;        var offlineCount = 0;         var onlineStr = ''; // html код списка друзей Online        var offlineStr = ''; // html код списка друзей Offline         for (var i=0; i<frCount; i++) {            if (data.response[i].online == 1) { // если онлайн                onlineCount++; // прибавляем счетчик онлайн пользователей                onlineStr += '<a href="http://vkontakte.ru/id' + data.response[i].uid + '" title="' + data.response[i].first_name + ' ' + data.response[i].last_name + '"><img src="' + data.response[i].photo + '" /></a>';            }            else {                offlineCount++;                offlineStr += '<a href="http://vkontakte.ru/id' + data.response[i].uid + '" title="' + data.response[i].first_name + ' ' + data.response[i].last_name + '"><img src="' + data.response[i].photo + '" /></a>';            }        }         $("#totalCount").html('У вас ' + frCount + ' ' + num_ending(frCount));        $("#onCount").html(onlineCount + ' ' + num_ending(onlineCount) + ' онлайн');        $("#online").html(onlineStr);        $("#offCount").html(offlineCount + ' ' + num_ending(offlineCount) + ' оффлайн');        $("#offline").html(offlineStr);                // скрываем прелоадер        $('#loader').fadeOut(1000);    });    });});  function num_ending(number) {    var endings = ['друзей','друг','друга'];    var num100 = number % 100;    var num10 = number % 10;    if (num100 >= 5 && num100 <= 20) {        return endings[0];    } else if (num10 == 0) {        return endings[0];    } else if (num10 == 1) {        return endings[1];    } else if (num10 >= 2 && num10 <= 4) {        return endings[2];    } else if (num10 >= 5 && num10 <= 9) {        return endings[0];    } else {        return endings[2];    }} /* flapps.ru */
index.html

Код: Выделить всё

<html><head><script src="js/jquery-1.6.1.min.js" type="text/javascript"></script><script src="js/code.js" type="text/javascript"></script><link rel="stylesheet" href="css/style.css" type="text/css" /> <script src="http://vkontakte.ru/js/api/xd_connection.js?2" type="text/javascript"></script> </head><body><div id="loader"><img src="http://vk.com/images/upload.gif" alt="" width="32" height="8" border="0" /></div> <div id="totalCount"></div> <div id="onCount"></div><div id="online"></div>  <div id="offCount"></div><div id="offline"></div>  <br /><a href="https://flapps.ru/" target="_blank">https://flapps.ru/</a> </body></html>
style.css

Код: Выделить всё

body {    padding:0;    margin:0;    font-family: tahoma, verdana, arial, sans-serif, Lucida Sans;    font-size: 11px;} #online img, #offline img{    padding:0;    margin:0;}#totalCount,#onCount, #online,#offCount, #offline {    display:block;    clear:both;}#totalCount, #online, #offline {    margin-bottom:20px;} /* изображение прелоадер */#loader {    width: 100%;     height: 100%;     position: fixed;     text-align: center;     z-index: 1000;     background-color: #fff;     opacity: 0.80;} #loader img{    position: absolute;     left: 50%;     top: 50%;     margin: -40px 0 0 -40px;}
Приложение должно быть включено.
Состояние: Приложение включено и видно всем.
В настройках приложения должен быть разрешен доступ к друзьям.

Исходник: https://flapps.ru/example/friends_get_o ... ffline.rar
Аватара пользователя
revizor
FL Team
FL Team
Сообщения: 1034
Зарегистрирован: 18 ноя 2009, 20:22

Re: Вывод аватарок друзей, списки Online и Offline

Сообщение revizor »

хороши друзья )
manok
Сообщения: 1
Зарегистрирован: 20 мар 2011, 13:53

Re: Вывод аватарок друзей, списки Online и Offline

Сообщение manok »

Не работает. По-крайней мере, может раньше и работало, но сейчас нет. Идёт меню "загрузки" и зависает.

p.s. ff 4.0
Аватара пользователя
Александр
Создатель сайта
Создатель сайта
Сообщения: 4574
Зарегистрирован: 27 сен 2009, 16:45

Re: Вывод аватарок друзей, списки Online и Offline

Сообщение Александр »

manok
Исходник скачал? Там чуть не тот метод был. Вместо friends.get, оставил getProfiles. Поправь вручную как в тексте урока или перекачай исходник.
Если хочешь сам замечать и исправлять ошибки, используй Charles.
kostya74
Сообщения: 59
Зарегистрирован: 09 авг 2011, 11:25

Re: Вывод аватарок друзей, списки Online и Offline

Сообщение kostya74 »

Я залил файлы исходника на сайт, указал адресс iframe, но всё равно идёт постоянно загрузка, всё включил, почему так может быть?
kostya74
Сообщения: 59
Зарегистрирован: 09 авг 2011, 11:25

Re: Вывод аватарок друзей, списки Online и Offline

Сообщение kostya74 »

всё нашёл у себя ошибку. всё работает спс
amadeusgil
Сообщения: 2
Зарегистрирован: 17 авг 2011, 15:04

Re: Вывод аватарок друзей, списки Online и Offline

Сообщение amadeusgil »

kostya74, у меня проблема как у тебя. Поделись решением. В чем проблема?
amadeusgil
Сообщения: 2
Зарегистрирован: 17 авг 2011, 15:04

Re: Вывод аватарок друзей, списки Online и Offline

Сообщение amadeusgil »

ок. Вроде разобрался: нужно права доступа поставить. Но другая проблема: не распознает кирилицу. Как поправить?
garymar
Сообщения: 30
Зарегистрирован: 26 авг 2010, 14:57

Re: Вывод аватарок друзей, списки Online и Offline

Сообщение garymar »

Привет! А как можно сделать определение пользователя онлайн когда он находится в самом приложении?? То есть, юзер зашел в приложение - онлайн, вышел из него (закрыл браузер) - оффлайн... Как это проконтролировать...???
Аватара пользователя
Александр
Создатель сайта
Создатель сайта
Сообщения: 4574
Зарегистрирован: 27 сен 2009, 16:45

Re: Вывод аватарок друзей, списки Online и Offline

Сообщение Александр »

amadeusgil писал(а):Но другая проблема: не распознает кирилицу. Как поправить?
кодировка файла utf-8 без BOM.

garymar
Как-то записывать в базе у себя на сервере находится ли пользователь в приложении. Проверять каждые n минут.
Ответить