Перейти к содержимому


Им В "вконтакте" Через Iframe-Приложение


  • Авторизуйтесь для ответа в теме
Сообщений в теме: 5

#1 Prorock_Ugl

Prorock_Ugl

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 186 сообщений

Отправлено 28 Октябрь 2013 - 20:27

Здравствуйте! Попытался загрузить свой интернет-магазин в соцсеть "Вконтакте", посредством сервиса IFrame. Все, на первый взгляд вышло давольно не плохо. Но есть необходимость более тесно подружить ИМ и ВК (например сделать динамически изменяемый размер страниц магазина), для этого разработчики ВК предлагают использовать JAVA-скрипты, но в инструкции описан процесс не для моих интеллектуальных способностей. Поэтому прошу помощи, уважаемые администраторы, модераторы, разработчики, если можете, объясните более доступным языком, чем нижеприведенная инструкция. Это очень важно, полагаю, не только мне!

Вы можете создать любое интегрированное приложение, загружаемое с Вашего сервера с помощью встроенного на страницу ВКонтакте элемента IFrame. Такие приложения могут отображать информацию с помощью любых технологий, поддерживаемых браузером пользователя: HTML, Javasсript, AJAX, Flash и др.

При запуске приложения основные параметры в него передаются посредством строки запроса. Пожалуйста, ознакомьтесь с детальным списком используемых параметров.




Использование Javascript API в IFrame-приложении

Для более тесной интеграции IFrame-приложения c пользовательским интерфейсом ВКонтакте, предусмотрена возможность использования Javasсript API, который позволяет выполнять следующие функции:
  • Открытие окон установки приложения, настроек, приглашения друзей и ввода голосов для оплаты услуг.
  • Получение событий об успешной установке приложения пользователем, изменении настроек и баланса пользователя внутри приложения.
  • Динамическое изменение размера окна приложения.
  • Доступ к серверным методам API.
  • Подключение виджетов для сайтов


Инициализация Javascript API

1. Добавьте следующую ссылку в код Вашей страницы:


<script src="//vk.com/js/api/xd_connection.js?2"  type="text/javascript"></script>


2. После загрузки страницы для инициализации приложения следует вызвать функцию VK.init, принимающую параметры:
  • onSuccess – функция, вызываемая при успешной инициализации API.
  • onFail – функция, вызываемая при ошибке, например при отсутствии ВКонтакте в качестве родительского окна,
  • apiVersion – версия API используемая приложением, актуальная версия 5.2.

<script type="text/javascript">
  VK.init(function() {
// API initialization succeeded
// Your code here
  }, function() {
// API initialization failed
// Can reload page here
}, '5.2');
</script>



Обращаем Ваше внимание на то, что инициализация приложения может закончиться ещё до полной загрузки Вашего приложения и выполнения события window.onload.

Javascript API addCallback String name, Function callback Добавляет функцию callback в качестве обработчика события name. removeCallback String name, Function callback Удаляет обработчик события name. api String method, Object params, Function callback Выполняет запрос к ВКонтакте API и передаёт полученные данные в функцию callback.

[/url]
Вызов методов Javascript API

Для осуществления внешних вызовов необходимо использовать функцию VK.callMethod(String methodName, Object param1, Object param2, ...).

Список методов


Пример вызова внешнего метода:

VK.callMethod("resizeWindow", 510, 600);



JSONP.

[/url]
Пример обращения к ВКонтакте API:

VK.api('video.get',{videos: '-4363_136089719,13245770_137352259'},function(data) {
  if (data.response) {
  // data.response is object
  }
});



account.getAppPermissions. onBalanceChanged int balance Событие происходит, когда пользователь положил или снял голоса с баланса приложения. Параметр balance содержит текущий баланс пользователя в сотых долях голоса. Этот параметр можно использовать только для вывода пользователю. Достоверность баланса всегда нужно проверять с помощью метода secure.getBalance. onOrderCancel — Событие происходит, когда пользователь отменяет покупку. onOrderSuccess int orderId Событие происходит, когда покупка закончилась успешно. onOrderFail int errorCode Событие происходит, когда покупка закончилась неуспешно. onProfilePhotoSave — Событие происходит, когда пользователь подтвердил сохранение фотографии в окне, вызванном с помощью функции showProfilePhotoBox. onWallPostSave — Событие происходит, когда пользователь подтвердил публикацию записи на стене в окне, вызванном с помощью функции showWallPostBox. onWallPostCancel — Событие происходит, когда пользователь отменяет публикацию записи на стену. onWindowResized int width, int height Событие происходит, когда размер окна приложения был изменен. Параметры width и height содержат новые размеры приложения в пикселах. onLocationChanged String location Событие происходит, когда изменяется значение хеша после символа # в адресной строке браузера. Например, это происходит в результате использования кнопок "назад" и "вперед" в браузере. Данное событие происходит всегда при запуске приложения. onWindowBlur — Событие происходит, когда окно с приложением теряет фокус. Например, когда пользователь открывает окно с настройками приложения. onWindowFocus — Событие происходит, когда окно с приложением получает фокус. Например, когда пользователь закрывает окно с настройками приложения. onScrollTop int scrollTop, int windowHeight Событие происходит, когда вызывается метод scrollTop. Параметр windowHeight - высота окна в браузере. onScroll int scrollTop, int windowHeight Событие происходит, при прокрутке пользователем страницы. Для того, чтобы подписаться на данное событие - необходимо вызвать метод scrollSubscribe. Параметр windowHeight - высота окна в браузере. onToggleFlash bool show Событие происходит, когда открывается всплывающее окно, и flash компоненты в приложении у которых нет возможности установить wmode="opaque" необходимо спрятать, параметр show - определяет, какое действие необходимо произвести с компонентами, спрятать или показать.

[/url]
Пример кода обработки события:

VK.addCallback("onSettingsChanged", onSettingsChanged);
...
function onSettingsChanged(settings) {
// do something
}


<a name="Пример выполнения запроса к API:" style="color: rgb(43, 88, 122); cursor: pointer; font-family: tahoma, arial, verdana, sans-serif, 'Lucida Sans'; font-size: 11px; line-height: 17px; background-color: rgb(255, 255, 255);">
Пример выполнения запроса к API:

VK.api("users.get", {user_ids:"1,2,3,4"}, function(data) {
// Действия с полученными данными
});



#2 Сake

Сake

    Активный участник

  • Модератоpы
  • 5 979 сообщений

Отправлено 29 Октябрь 2013 - 01:36

То что вы описываете как я понимаю было взято с страницы http://vk.com/dev/IFrame_apps На данной странице представлен API взаимодействия с приложением, это своего рода инструмент который можно применить в своих приложениях или как-то их совместно интегрировать. API это не готовый код, который без дополнительной обработки будет работать. API это лишь инструмент. Тот метод который вы приводите

VK.callMethod("resizeWindow", 510, 600);

сам по себе не может существовать, он должен быть с чем-то связать. Должно произойти какое-то событие, которое повлечет за собой вызов данного метода. Необходимо использовать обработчики событий и т.д

#3 Prorock_Ugl

Prorock_Ugl

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 186 сообщений

Отправлено 29 Октябрь 2013 - 10:31

Просмотр сообщенияСake (29 Октябрь 2013 - 01:36) писал:

То что вы описываете как я понимаю было взято с страницы http://vk.com/dev/IFrame_apps На данной странице представлен API взаимодействия с приложением, это своего рода инструмент который можно применить в своих приложениях или как-то их совместно интегрировать. API это не готовый код, который без дополнительной обработки будет работать. API это лишь инструмент. Тот метод который вы приводите

VK.callMethod("resizeWindow", 510, 600);

сам по себе не может существовать, он должен быть с чем-то связать. Должно произойти какое-то событие, которое повлечет за собой вызов данного метода. Необходимо использовать обработчики событий и т.д

Спасибо! А если еще упростить, то динамически изменяемый размер окна приложения просто так добиться у меня не получится или есть способы?

#4 Сake

Сake

    Активный участник

  • Модератоpы
  • 5 979 сообщений

Отправлено 30 Октябрь 2013 - 01:16

На сколько я понимаю судя по документации - для изменения размера окна необходимо вызывать метод о котором я сообщал ранее (тот который и вы приводите)

VK.callMethod("resizeWindow", 510, 600);

данный метод изменит окно на 510x600px соответственно по высоте и ширине. Если передать другие размеры, то окно примет их. Вся сущность заключается в том что необходимо само событие которое и будет вызывать метод. Если этот метод внедрить просто так - то он однократно изменит размер не более. О каком событии в данном случае можно говорить мне не понятно, да и из документации тоже не совсем понятно когда и как именно можно применить его. Попробуйте обратиться в службу поддержки данного API для прояснения сложившейся ситуации.

#5 Prorock_Ugl

Prorock_Ugl

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 186 сообщений

Отправлено 30 Октябрь 2013 - 09:44

Спасибо. Хорошо, попробую админов  вк попытать.. а так, все остальное меня устраивает и тестовые заказы пробовал делать, все работает..очень хотелось бы использовать ИМ прям в соцсети...

#6 TVS163

TVS163

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 92 сообщений

Отправлено 24 Март 2015 - 22:02

Что то

Просмотр сообщенияProrock_Ugl (30 Октябрь 2013 - 09:44) писал:

Спасибо. Хорошо, попробую админов  вк попытать.. а так, все остальное меня устраивает и тестовые заказы пробовал делать, все работает..очень хотелось бы использовать ИМ прям в соцсети...

что то я не совсем понял, получается надо создать iframe приложение в вк, а скрипт записать в редакторе html на сайте ИМ?




Количество пользователей, читающих эту тему: 0

0 пользователей, 0 гостей, 0 анонимных