Истории в профиле пользователя

Игроки могут делиться достижениями и другой информацией с друзьями в историях ВКонтакте и в моментах в Одноклассниках. Например, в игре можно разместить кнопку «Рассказать» или «Поделиться историей». По нажатию откроется редактор с заранее подготовленным текстом и изображением. В игре ВКонтакте перед публикацией пользователь может отредактировать текст и заменить изображение, а затем разместить историю в своём профиле.

Пример редактора истории ВКонтакте Пример редактора истории ВКонтакте

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

Пример публикации момента в Одноклассниках Пример публикации момента в Одноклассниках

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

Пример опубликованной истории Пример опубликованной истории

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

Как реализовать

1.
Подготовьте один или несколько шаблонов, чтобы пользователям было проще делиться историей или моментом и они не создавали их с нуля.
- •
  История ВКонтакте может содержать одно или несколько изображений, видео, тексты, кнопки и другие визуальные элементы.
- •
  Момент в Одноклассниках пользователи не смогут отредактировать, поэтому добавьте текст на фон заранее и реализуйте переход по ссылке в игру.

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

У события много параметров. Вот самые часто используемые:

Параметр	Описание
`background_type` и `url`	`background_type` указывает тип фона: изображение или видео, `url` — ссылку на файл изображения или видео.
`locked`	• `false` — пользователь может изменять размер фонового изображения и перемещать его в редакторе истории. • `true` — изображение растягивается на весь экран истории и изменить его размер и положение нельзя. Мы рекомендуем использовать `locked: true`.
`attachment`	Объект, который описывает вложение: видео, ссылку, изображение. Удобно использовать для кнопки внизу истории, чтобы зрители могли перейти в игру. Обратите внимание, что кнопка не отображается в редакторе историй, но видна в опубликованной истории. Пример использования.
`stickers`	Массив стикеров: изображения, тексты, хештеги, время и другие. Поле `transform` стикера определяет его положение и угол поворота на экране истории. Для добавления текстов используйте стикеры вида `native` и подтипа `action_text`. Пример использования.

Обратите внимание. Некоторые виды стикеров и атрибутов оформления могут не поддерживаться на некоторых платформах. Учитывайте это при создании шаблонов и подготовьте разные варианты для разных платформ. Моменты в Одноклассниках могут использовать только фоновое изображение и вложение. Подробнее о параметрах — в документации события VKWebAppShowStoryBox.

Пример вызова события

JavaScript

bridge.send('VKWebAppShowStoryBox', {
  // Задаёт фон истории
  "background_type": "image", // Тип фона — картинка
  "url": "https://example.com/v850136098/story-1.jpg", // Адрес картинки
  "locked": true, // Блокируем изменение размеров и положения фона 

  // Кнопка внизу истории для перехода в игру
  "attachment": {
    "type": "url",  // Тип объекта — ссылка
    "text": "open", // Константа, которая определяет текст ссылки
                    // "open" — «Открыть»
                    // "game" — «Играть»
    "url": "https://vk.com/app12345" // Адрес игры
  },

  // Дополнительные изобразительные элементы
  "stickers": [
    // Текст в верхней части экрана
    {"sticker_type": "native",
      "sticker": { 
        "action_type": "text", 
        "action": { // Текст и его атрибуты
          "text": "Я нашёл 200 алмазов", 
       "style": "classic",
       "background_style": "none",
       "selection_color": "#FF8080"
     },
     "transform": { // Определяет положение текста
       "gravity": "center_top",
       "translation_y": 0.25
     }}
    },
    // Текст в нижней части экрана
    {"sticker_type": "native",
      "sticker": { 
        "action_type": "text", 
          "action": { // Текст и его атрибуты
         "text": "в игре «Пещера горного короля»!",
         "style": "classic",
         "background_style": "none",
         "selection_color": "#40FFF0"
       },
     "transform": { // Определяет положение текста
       "gravity": "center_bottom",
       "translation_y": -0.25
     }}
    }]
  })
  .then( (data) => {
    // История размещена...
  })
  .catch( (e) => {
    console.log("Ошибка!", e);
  })

Если вы подключили библиотеку VK Bridge в HTML-коде страницы, то в вызове надо использовать имя объекта vkBridge вместо bridge.

Особенности использования

•
История или момент показывается в течение 12 секунд.
•
Если создать несколько историй или моментов, они будут отображаться последовательно друг за другом.
•
История или момент доступны в течение 24 часов с момента публикации и потом автоматически удаляются.
•
Событие VKWebAppShowStoryBox не поддерживается на iPad и в играх для Android в Одноклассниках.

Истории в профиле пользователя

Как реализовать

Пример вызова события

Особенности использования

Рекомендации по содержанию

Материалы по теме

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