Установка приложений ВКонтакте — различия между версиями

Материал из TourClient - Руководство пользователя
Перейти к: навигация, поиск
(Установка как приложение)
 
(не показаны 38 промежуточные версии 2 участников)
Строка 1: Строка 1:
 
== Приложения ==
 
== Приложения ==
  
[http://tourclient.ru TourClient] имеет 4 приложения ВКонтакте. С примерами приложений можно ознакомиться по адресу - http://vk.com/tourclient .
+
[http://tourclient.ru TourClient] имеет 6 приложений ВКонтакте. С примерами приложений можно ознакомиться по адресу - http://vk.com/tourclient .
  
 
Каждое приложение состоит из одного или нескольких модулей:
 
Каждое приложение состоит из одного или нескольких модулей:
Строка 9: Строка 9:
 
* Путеводитель (модуль [[Путеводитель]])
 
* Путеводитель (модуль [[Путеводитель]])
 
* Каталог отелей (модуль [[Каталог отелей]])
 
* Каталог отелей (модуль [[Каталог отелей]])
 +
* Календарь туров (модуль [[Календарь туров]])
 +
* Свободная форма заявки (модуль [[Свободная форма заявки]]) (https://vk.com/app7808152_-72166143)
  
  
Строка 27: Строка 29:
 
# '''Подключение приложения к сообществу.''' На данном этапе размещается ссылка на приложение на странице сообщества, для созданного приложения производится его настройка.  
 
# '''Подключение приложения к сообществу.''' На данном этапе размещается ссылка на приложение на странице сообщества, для созданного приложения производится его настройка.  
  
Обратите внимание - для полноценной работы приложения необходимо выполнить все 3 этапа настроек.
+
Обратите внимание - для полноценной работы приложения необходимо выполнить полностью все этапы настроек.
  
 
<br>
 
<br>
Строка 55: Строка 57:
 
При переходе по ссылке из сообщества в адресе передается индентификатор сообщества из которого осуществлялся переход.  
 
При переходе по ссылке из сообщества в адресе передается индентификатор сообщества из которого осуществлялся переход.  
  
На основе этого идентификатора определяется аккаунт [http://tourclient.ru TourClient] из под которого будет запущено приложение.
+
На основе этого идентификатора определяется связь с [[Аккаунт пользователя AgentPassport|Аккаунтом пользователя AgentPassport]] из под которого будет запущено приложение.
  
 
==== Преимущества ====
 
==== Преимущества ====
 
* Это наиболее простой и быстрый способ установки.  
 
* Это наиболее простой и быстрый способ установки.  
 
* Не требуется создавать и настраивать собственное приложение ВКонтакте, т.к. будет использоваться уже готовое публичное приложение [http://tourclient.ru TourClient].
 
* Не требуется создавать и настраивать собственное приложение ВКонтакте, т.к. будет использоваться уже готовое публичное приложение [http://tourclient.ru TourClient].
* В случае установки нашими сотрудниками, требуется только административный доступ к профилю (добавить нашего сотрудника администратором сообщества). Доступ может быть дан на время установки, а потом отозван.
+
* В случае установки нашими сотрудниками, требуется только административный доступ к странице сообщества ВКонтакте (добавить нашего сотрудника администратором сообщества). Доступ может быть дан на время установки, а потом отозван.
  
 
==== Недостатки ====
 
==== Недостатки ====
 
* Нет возможности кастомизации приложения ВКонтакте, в частности иконок, имен ссылок, ширины экрана (будут использоваться настройки общего публичного приложения [http://tourclient.ru TourClient]).  
 
* Нет возможности кастомизации приложения ВКонтакте, в частности иконок, имен ссылок, ширины экрана (будут использоваться настройки общего публичного приложения [http://tourclient.ru TourClient]).  
* Не доступна статистика ВКонтакте по использованию приложения (т.к. агентство не имеет доступа к остатистике общего приложения).
+
* Не доступна статистика ВКонтакте по использованию приложения (т.к. у вас нет доступа к статистике общего приложения).
* При добавлении приложения в "Свои приложения" пользователь ВКонтакте будет добавлять общее публичное приложение [http://tourclient.ru TourClient], а не приложение конкретного агентства (т.к. источник откуда было добавлено приложение в данном случае не сохраняется).
+
* При добавлении приложения в "Свои приложения" пользователь ВКонтакте будет добавлять общее публичное приложение [http://tourclient.ru TourClient], а не ваше приложение (т.к. источник откуда было добавлено приложение в данном случае ВКонтакте не сохраняет).
  
 
==== Ссылки на приложение ====
 
==== Ссылки на приложение ====
Правильная ссылка на приложение в этом случае должна выглядеть следующим образом - http://vk.com/app4792639_-87928782 . Где первая часть (app4792639) - идентификатор общего публичного приложения [http://tourclient.ru TourClient], а последняя часть (87928782) - должен быть ID вашего сообщества, в котором установлена ссылка. Именно он будет определять что это "ваше" приложение. Ссылки такого вида можно отправлять другим пользователям через ВКонтакте или Skype, ICQ, Email. Они будут видеть "ваше" приложение. В случае если в ссылке не будет идентификатора сообщества (http://vk.com/app4792639), пользователь будет видеть общее публичное приложение [http://tourclient.ru TourClient].
+
Правильная ссылка на приложение в этом случае должна выглядеть следующим образом - http://vk.com/app4792639_-87928782 . Где первая часть (app4792639) - идентификатор общего публичного приложения [http://tourclient.ru TourClient], а последняя часть (87928782) - должен быть ID вашего сообщества, в котором установлена ссылка.  
 +
 
 +
Именно он будет определять что это "ваше" приложение. Ссылки такого вида можно отправлять другим пользователям через ВКонтакте или через Skype, ICQ, Email. Они будут видеть "ваше" приложение.  
 +
 
 +
В случае если в ссылке не будет идентификатора сообщества (http://vk.com/app4792639), пользователь будет видеть общее публичное приложение [http://tourclient.ru TourClient].
  
 
<br clear="all"/>
 
<br clear="all"/>
Строка 75: Строка 81:
 
[[Файл:Vkontakte apps block.png|thumb|200px|right|Блок приложений]]
 
[[Файл:Vkontakte apps block.png|thumb|200px|right|Блок приложений]]
  
 +
==== Техническая сторона ====
 +
Данный тип установки подразумевает что вы создаете свое собственное приложение ВКонтакте.
 +
 +
Связь вашего приложения с вашим [[Аккаунт пользователя AgentPassport|Аккаунтом пользователя AgentPassport]] настраивается в [[Личный кабинет|Личном кабинете]] и определяется через ID приложения.
 +
 +
==== Преимущества ====
 +
* Возможность более гибкой настройки. Вы сможете переопределить заголовки, иконки, размеры окна, поясняющие тексты.
 +
* Доступна статистика ВКонтакте по использованию приложения.
 +
* При добавлении в "Свои приложения" пользователь ВКонтакте будет добавлять именно ваше приложение.
 +
 +
==== Недостатки ====
 +
* Более сложная настройка
 +
* В случае установки нашими сотрудниками им потребуется доступ к вашему аккаунту ВКонтакте, который будет владельцем приложения и который имеет административные права на управление сообществом, где приложение будет размещаться. Также потребуется подтверждение некоторых действий при помощи смс на номер телефона связанный с данным аккаунтом, что усложняет процесс установки.
 +
 +
==== Ссылки на приложение ====
 +
Ссылка на приложение будет выглядеть следующим образом - http://vk.com/app4792639. Где первая часть (app4792639) - идентификатор вашего приложения.
  
 +
Ссылки такого вида можно отправлять другим пользователям через ВКонтакте или через Skype, ICQ, Email. Они будут работать с вашим приложением.
  
  
Строка 130: Строка 153:
 
#* "Указать ID ВК страницы" - для установки при помощи ссылки.  
 
#* "Указать ID ВК страницы" - для установки при помощи ссылки.  
 
#* "Указать ID ВК приложения" - для установки как приложения.
 
#* "Указать ID ВК приложения" - для установки как приложения.
# В соответствующем инпуте внизу ввести ID сообщества или приложения, полученные на предыдущем шаге.
+
# В соответствующем поле для ввода внизу ввести ID сообщества или приложения, полученные на предыдущем шаге.
 
# Далее для каждого модуля необходимо выбрать визуальную и функциональную конфигурацию, созданные на предыдущем шаге.
 
# Далее для каждого модуля необходимо выбрать визуальную и функциональную конфигурацию, созданные на предыдущем шаге.
 +
# После установки настроек нажмите кнопку "Сохранить".
 +
 +
Обратите внимание. Изменения вступают в силу с задержкой в несколько минут.
 +
 +
 +
Если вы выбрали способ установки через создание своего приложения, для дальнейшей настройки вам потребуется '''адрес IFrame'''. Получить его можно нажав соответствующую кнопку рядом с редактированием настроек приложения.
  
  
 
<gallery>
 
<gallery>
Файл:Agentpassport vk fb edit.png
+
Файл:Agentpassport vk fb edit.png|Приложения ВК и FB
Файл:Agentpassport vk settings.png
+
Файл:Agentpassport vk settings.png|Настройки приложения
 +
Файл:Agentpassport iframe address.png|Адрес IFrame
 
</gallery>
 
</gallery>
  
Строка 154: Строка 184:
 
Файл:Vk_add_link.png
 
Файл:Vk_add_link.png
 
</gallery>
 
</gallery>
 +
 +
 +
Ссылки для подключения приложений:
 +
 +
* Поиск туров - http://vk.com/app4792639
 +
* Витрина туров - http://vk.com/app4792650
 +
* Каталог отелей - http://vk.com/app4797787
 +
* Путеводитель - http://vk.com/app4792660
  
 
=== Подключение приложения ===
 
=== Подключение приложения ===
 +
Для того чтобы подключить приложение необходимо выполнить дополнительные настройки приложения в интерфейсе разработчика ВКонтакте - http://vk.com/dev .
 +
 +
Ниже описан минимальный рекомендуемый набор настроек. Остальные вы можете устанавливать по своему усмотрению.
 +
 +
 +
На странице "Информация":
 +
* Загрузите иконки приложений:
 +
** Иконка 16x16
 +
** Квадратная обложка
 +
** Квадратная обложка для каталога
 +
* В настройке "Группа приложения" выберите группу в которой хотите разместить приложение
 +
* Нажмите кнопку "Сохранить изменения"
 +
 +
Вы можете загрузить свой набор иконок или воспользоваться нашим - http://wiki.tourclient.ru/w/tourclient_vk_iconset.rar .
 +
 +
 +
На странице "Настройки" установите следующие значения:
 +
* '''Состояние:''' Приложение включено и видно всем
 +
* '''Настройки контейнера, Тип приложения:''' IFrame
 +
* '''Адрес IFrame:''' введите '''адрес IFrame''', полученный на предыдущем шаге
 +
* '''Размер IFrame:''' необходимо указать высоту и ширину окна в котором будет открываться ваше приложение. Высоту указывать не нужно, т.к. она будет рассчитываться автоматически, поэтому можно оставить 500. Ширину вы можете указать любую в зависимости от выбранных вами визуальных настроек. Стандартная ширина окна приложения TourClient - 850.
 +
 +
Нажмите кнопку "Сохранить изменения".
 +
 +
На данном этапе может потребоваться подтверждение по смс. В появившемся окне нажмите "Получить код" и введите код который будет отправлен вам в смс-сообщении.
 +
 +
 +
<gallery>
 +
Файл:Vk app information.png|Информация
 +
Файл:Vk_app_settings.png|Настройки приложения
 +
</gallery>
 +
  
 +
После сохранения настроек в блоке приложений сообщества появится кнопка для запуска приложения.
  
 
<br>
 
<br>

Текущая версия на 17:36, 7 декабря 2021

Приложения

TourClient имеет 6 приложений ВКонтакте. С примерами приложений можно ознакомиться по адресу - http://vk.com/tourclient .

Каждое приложение состоит из одного или нескольких модулей:


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

Каждое приложение настраивается и устанавливается независимо от других. Вам нужно будет проделать описанные ниже шаги для каждого приложения.

Приложения устанавливаются в сообщества ВКонтакте. Т.е. в группы или публичные страницы. Другого способа использования приложений ВКонтакте не предполагается.


Установка приложения TourClient

Установка приложения в сообщество состоит из следующих шагов:

  1. Выбор способа устаноки. На данном этапе необходимо определиться каким образом приложение будет размещаться в сообществе.
  2. Получение ID. На данном этапе необходимо получить ID страницы или приложения (в зависимости от способа установки).
  3. Настройка приложения в Личном кабинете. На данном этапе настраивается связь приложения с Аккаунтом пользователя AgentPassport, а также внешний вид и поведение модулей.
  4. Подключение приложения к сообществу. На данном этапе размещается ссылка на приложение на странице сообщества, для созданного приложения производится его настройка.

Обратите внимание - для полноценной работы приложения необходимо выполнить полностью все этапы настроек.


Выбор способа установки

Приложение "Поиск туров"

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

На странице сообщества по сути можно разместить только ссылку на приложение. Ссылка может находиться в двух местах:

  • в блоке ссылок
  • в блоке приложений


Само же приложение будет всегда открываться на отдельной странице приложения (см. пример на рисунке справа).

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


Установка добавлением ссылки

Блок ссылок

Техническая сторона

Данный тип установки подразумевает что в сообщество просто добавляется ссылка на общее публичное приложение TourClient.

При переходе по ссылке из сообщества в адресе передается индентификатор сообщества из которого осуществлялся переход.

На основе этого идентификатора определяется связь с Аккаунтом пользователя AgentPassport из под которого будет запущено приложение.

Преимущества

  • Это наиболее простой и быстрый способ установки.
  • Не требуется создавать и настраивать собственное приложение ВКонтакте, т.к. будет использоваться уже готовое публичное приложение TourClient.
  • В случае установки нашими сотрудниками, требуется только административный доступ к странице сообщества ВКонтакте (добавить нашего сотрудника администратором сообщества). Доступ может быть дан на время установки, а потом отозван.

Недостатки

  • Нет возможности кастомизации приложения ВКонтакте, в частности иконок, имен ссылок, ширины экрана (будут использоваться настройки общего публичного приложения TourClient).
  • Не доступна статистика ВКонтакте по использованию приложения (т.к. у вас нет доступа к статистике общего приложения).
  • При добавлении приложения в "Свои приложения" пользователь ВКонтакте будет добавлять общее публичное приложение TourClient, а не ваше приложение (т.к. источник откуда было добавлено приложение в данном случае ВКонтакте не сохраняет).

Ссылки на приложение

Правильная ссылка на приложение в этом случае должна выглядеть следующим образом - http://vk.com/app4792639_-87928782 . Где первая часть (app4792639) - идентификатор общего публичного приложения TourClient, а последняя часть (87928782) - должен быть ID вашего сообщества, в котором установлена ссылка.

Именно он будет определять что это "ваше" приложение. Ссылки такого вида можно отправлять другим пользователям через ВКонтакте или через Skype, ICQ, Email. Они будут видеть "ваше" приложение.

В случае если в ссылке не будет идентификатора сообщества (http://vk.com/app4792639), пользователь будет видеть общее публичное приложение TourClient.


Создание своего приложения

Блок приложений

Техническая сторона

Данный тип установки подразумевает что вы создаете свое собственное приложение ВКонтакте.

Связь вашего приложения с вашим Аккаунтом пользователя AgentPassport настраивается в Личном кабинете и определяется через ID приложения.

Преимущества

  • Возможность более гибкой настройки. Вы сможете переопределить заголовки, иконки, размеры окна, поясняющие тексты.
  • Доступна статистика ВКонтакте по использованию приложения.
  • При добавлении в "Свои приложения" пользователь ВКонтакте будет добавлять именно ваше приложение.

Недостатки

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

Ссылки на приложение

Ссылка на приложение будет выглядеть следующим образом - http://vk.com/app4792639. Где первая часть (app4792639) - идентификатор вашего приложения.

Ссылки такого вида можно отправлять другим пользователям через ВКонтакте или через Skype, ICQ, Email. Они будут работать с вашим приложением.



Получение ID

Получение ID сообщества

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

В случае если у вашего сообщества не задано имя страницы, ID будет содержаться в адресе сообщества.

В случае если имя страницы задано - перейдите в раздел "Статистика страницы". Адрес раздела будет вида - http://vk.com/stats?gid=76684688 .

Цифры 76684688 и есть ID сообщества.

Получение ID приложения

Для того чтобы получить ID приложения его необходимо создать.

Приложения создаются в интерфейсе разработчика ВКонтакте - http://vk.com/dev .

  1. Нажмите на кнопку "Создать приложение"
  2. Укажите параметры приложения:
    • Название: название приложения (например: Поиск туров)
    • Тип: IFrame/Flash - приложение
    • Тип: приложение
    • Категория: Прочее
  3. Нажмите кнопку "Перейти к загрузке приложения"
  4. На данном этапе может потребоваться подтверждение по смс. В появившемся окне нажмите "Получить код" и введите код который будет отправлен вам в смс-сообщении.
  5. Перейдите на вкладку "Настройки"
  6. На странице настроек будет указан "ID приложения"


Настройка в Личном кабинете

Конфигурации модулей

Необходимо выполнить настройку Функциональной и Визуальной конфигураций в Личном кабинете для каждого модуля из которых состоит приложение.

На этом шаге вы определяете как будет выглядеть и работать данный модуль. Подробнее это описано в разделе - Настройка модуля.

Хотя допустимо использовать конфигурации по умолчанию, но мы все же рекомендуем для каждого модуля создать отдельную функциональную и визуальную конфигурацию специально для приложения ВКонтакте.

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

Настройка приложений

Настройка приложений осуществляются в разделе "Приложения ВК и FB".

  1. В блоке настроек ВКонтакте выберите нужное приложение и нажмите на значок редактирования.
  2. В появившемся окне нужно выбрать тип настройки:
    • "Указать ID ВК страницы" - для установки при помощи ссылки.
    • "Указать ID ВК приложения" - для установки как приложения.
  3. В соответствующем поле для ввода внизу ввести ID сообщества или приложения, полученные на предыдущем шаге.
  4. Далее для каждого модуля необходимо выбрать визуальную и функциональную конфигурацию, созданные на предыдущем шаге.
  5. После установки настроек нажмите кнопку "Сохранить".

Обратите внимание. Изменения вступают в силу с задержкой в несколько минут.


Если вы выбрали способ установки через создание своего приложения, для дальнейшей настройки вам потребуется адрес IFrame. Получить его можно нажав соответствующую кнопку рядом с редактированием настроек приложения.



Подключение приложения к сообществу

Подключение ссылки

На странице сообщества ВКонтакте.

  1. Перейдите в "Управление страницей"
  2. Перейдите в на вкладку "Ссылки"
  3. Скопируйте ссылку на приложение в форму для ввода и нажмите "Добавить ссылку"
  4. В появившемся всплывающем окне, при необходимости, укажите комментарий и нажмите кнопку "Добавить"



Ссылки для подключения приложений:

Подключение приложения

Для того чтобы подключить приложение необходимо выполнить дополнительные настройки приложения в интерфейсе разработчика ВКонтакте - http://vk.com/dev .

Ниже описан минимальный рекомендуемый набор настроек. Остальные вы можете устанавливать по своему усмотрению.


На странице "Информация":

  • Загрузите иконки приложений:
    • Иконка 16x16
    • Квадратная обложка
    • Квадратная обложка для каталога
  • В настройке "Группа приложения" выберите группу в которой хотите разместить приложение
  • Нажмите кнопку "Сохранить изменения"

Вы можете загрузить свой набор иконок или воспользоваться нашим - http://wiki.tourclient.ru/w/tourclient_vk_iconset.rar .


На странице "Настройки" установите следующие значения:

  • Состояние: Приложение включено и видно всем
  • Настройки контейнера, Тип приложения: IFrame
  • Адрес IFrame: введите адрес IFrame, полученный на предыдущем шаге
  • Размер IFrame: необходимо указать высоту и ширину окна в котором будет открываться ваше приложение. Высоту указывать не нужно, т.к. она будет рассчитываться автоматически, поэтому можно оставить 500. Ширину вы можете указать любую в зависимости от выбранных вами визуальных настроек. Стандартная ширина окна приложения TourClient - 850.

Нажмите кнопку "Сохранить изменения".

На данном этапе может потребоваться подтверждение по смс. В появившемся окне нажмите "Получить код" и введите код который будет отправлен вам в смс-сообщении.



После сохранения настроек в блоке приложений сообщества появится кнопка для запуска приложения.