Как сделать интерактивную обложку вконтакте
Как сделать интерактивную обложку вконтакте
ЖИВАЯ ОБЛОЖКА ВК создана специально для мобильных устройств.
На десктопах (компьютере) живая обложка (мобильная) не будет отображаться! На десктопе отображается только обычная статичная обложка.
При появлении живой обложки для мобильной версии теперь не нужно адаптировать статичную обложку по телефон, размещая важные элементы и текст на небольшой площади.
НО, живая обложка просматривается только через мобильное приложение ВКонтакте.
_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _
Живая обложка представлена в виде 5 слайдов или коротких видео, которые автоматически сменяют друг друга.
Для установки живой обложки перейдите в меню сообщества и кликните «Управление», в открывшемся окне выберите «Обложка сообщества: Управление». Загрузите подготовленные изображения или видео.
Также слайдам изображений можно подключить приближение. Для этого в настройках обложки поставьте галку «Показывать фотографии в движении». Но при этом учитывайте расположение элементов, чтобы при увеличении они не уходили за края.
_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _
ЖИВАЯ ОБЛОЖКА ВК РАЗМЕРЫ?
Размер обложки в развернутом виде 1080 ×1920 px.
Видео формат: формат MP4 (кодек h264 aac), 15-60 кадров в секунду, до 30 секунд, размер — до 30 Мб., то есть каждое видео длинной должно быть не более 30 секунд.
_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _
РАЗМЕРЫ ЖИВОЙ ОБЛОЖКИ ВК ДЛЯ МОБИЛЬНОЙ ВЕРСИИ?
Если у вас на обложке расположен текст или изображение, то при просмотре изображение и текст могут быть срезаны сверху/снизу и справа/слева в зависимости от размера мобильного устройства.
Максимально эффективным пространством для всех мобильных устройств является прямоугольник размером 850 на 912 пикселей с одинаковыми отступами по бокам 115 пикселей. В этой области располагайте важные элементы и текст. Но видимой областью в мобильной версии приложения является прямоугольник 1080х1350 пикселей, где в нижней части располагается миниатюра, название сообщества и кнопка действия.
Изображение о размерах размещено ниже.
Скачать файл в формате PSD можно ниже.
_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _
Динамические обложки Вконтакте
Думаю, многие руководители сообществ, да и простые подписчики, не раз обращали внимание на динамические обложки Вконтакте, которые постоянно обновляют информацию в сообществе.
Выглядит динамическая обложка вот так.
Динамические обложки Вконтакте
Динамическая обложка позволит раскрутить группу в ВК и повысить активность подписчиков.
Как сделать динамическую обложку для группы в ВК
Чтобы было проще, я создал пошаговую инструкцию на конкретном примере:
3. Разрешаем доступ к аккаунту Вконтакте.
4. Далее обновляем список групп, и нажимаем на надпись «Сообщество не подключено» там, где хотим сделать динамическую обложку ВК.
5. Разрешаем доступ к группе.
6. Подключаем группу к сервису.
7. Теперь, когда группа подключена, можно создать обложку. Что мы и делаем.
Динамические обложки для групп Вконтакте
На данный момент бесплатно можно создать динамическую обложку только для 1 группы, с ограниченным функционалом.
Создаём динамическую обложку ВКонтакте
В последнее время всё большую популярность обретают различные интерактивные способы завлечь аудиторию и привлечь к себе больше внимания. Тут и боты для социальных сетей и мессенджеров, и другие решения, придающие «уникальности». Среди них можно выделить и динамические обложки для сообществ, официально поддерживать которые ВКонтакте начали в марте.
Почему я решил написать эту небольшую статью? Хотя ажиотаж вокруг этой темы и спал, всё равно она остаётся довольно популярной, находятся как «клиенты», готовые платить очень большие деньги, так и желающие научиться это делать самому. Я работал с одной «студией», которая берет шестизначные суммы за эту работу, при этом кидая своих разработчиков и мелких клиентов. Так вот, чтобы в этой сфере не было монополии, и все увидели, насколько легко это делается, я и решил написать статью.
На примере моего пустого сообщества-песочницы
Вступление
Я опишу, как сделать динамическую обложку, отображающую текущее время и последнего подписчика. Любой другой функционал делается не сложнее — чуть больше строк кода и доступ к API других сервисов.
Что нам понадобится? Всего лишь подготовленный фон для обложки и access_token для группы с правами доступа к фотографиям. Привожу пример на Java, но сделать это можно и любым другим способом.
Статья рассчитана на более-менее опытных читателей — расписывать, как отправить GET запрос или авторизоваться в ВК через API я не стану.
Приступаем
Для начала реализуем транслирование новых подписчиков на обложку. Логика примерно следующая: получаем запрос от Callback API, берём оттуда id пользователя, по нему берём имя и аватар, накладываем на имеющийся фон и загружаем в ВК. Проще некуда. Поехали.
Обрабатываем запрос от Callback API
Выглядеть этот запрос будет примерно так:
Парсить JSON, я думаю, все умеют. Отсюда нам нужен только id пользователя, и по нему мы уже получаем имя, фамилию и ссылку на фотографию.
Достаточно сделать такой GET-запрос:
В ответ мы получим:
Всё, у нас есть вся необходимая информация, осталось добавить это на обложку и загрузить её.
Обрабатываем изображение
Предположим, что вы заранее нашли изображение для фона и знаете, по каким координатам должно располагаться то, что вы хотите добавить на обложку. Все эти мелкие подробности опустим и перейдём к коду:
Хочу заметить, что лучше использовать сразу уменьшенное изображение, иначе, если просто указать ширину и высоту результата, как указано в примере кода выше, то вместо аватара пользователя вы можете увидеть три пикселя.
Я не стал приводить простыни кода, помогающие на Java нормально уменьшать изображение и делать CircleCrop по центру, это легко пишется собственноручно либо спокойно гуглится. Также, настройку шрифтов и прочие мелкие моменты я тоже опустил.
В принципе, всё — мы получили готовую обложку, осталось только загрузить её. Просто, не правда ли?
Загружаем обложку
Всё делается очень просто и подробно описано в документации к API.
Получаем сервер для загрузки обложки, отправив GET-запрос:
Где ACCESS_TOKEN — токен с правами доступа к фотографиям группы.
Из ответа берём upload_url:
Теперь на наш upload_url отправляем POST-запрос с полем photo в формате multipart/form-data, точно также, как и с любыми документами. Я уже освещал этот вопрос в другой статье.
В ответ мы получим следующее:
Всё, осталось сделать один GET-запрос и обложка засияет в сообществе:
Где HASH и PHOTO получены из предыдущего пункта, а токен всё тот же.
Готово, динамическая обложка заработала.
Чтобы добавить любую другую информацию, обновление которой будет инициироваться нами, а не запросами с другого сервера, нужно проделать ещё меньше труда.
Ранее мы не зря сохраняли результат обработки в отдельный файл. Теперь мы сможем делать «многослойную» обложку, не теряя предыдущую информацию.
Например, вот так можно транслировать текущее время на обложку:
Это самый примитивный способ добиться нужного результата. Аналогично можно сделать любой функционал, благо Callback API предоставляет довольно обширные возможности: можно вычислять пользователей, которые сделали больше всех репостов, оставили больше всех комментариев, и так далее. Правда, с лайками придётся заморочиться, но это тоже не проблема. Курс валют, погода, пробки и прочие радости можно свободно получить через общедоступные API.
Чтобы создать даже самую сложную обложку, меняющуюся в зависимости от времен года, погоды, текущего времени, с отображением курса валют и вообще чего угодно, нужно потратить всего полчаса работы и пару сотен строк кода.
Буду рад, если статья не окажется бесполезной. Всё же, видел немало вопросов на эту тему, и желающих тоже достаточно.
Правда, жаль, что у Facebook нет аналогичной возможности обновлять обложку.
Динамические обложки ВКонтакте: повышаем активность аудитории
Оставь свой email, и ты будешь в числе первых получать релизы новых книг Ingate, подборки статей и приглашения на бесплатные вебинары. Действуй!
Автор: Марина Кондратович, специалист по работе с социальными сетями Ingate
Что такое динамическая обложка и зачем она нужна
Динамическая обложка ВКонтакте — это постоянно обновляемая обложка в сообществе, на которой выводится определённая информация. Меняющиеся элементы на обложке называются виджетами. Они могут показывать погоду, курсы валют, последнего подписчика, лучшего комментатора, именинника — вариантов масса. Всё зависит от конструктора, который используется для создания обложки.
Вот примеры динамических обложек ВК:
Если ты запускаешь конкурс на самого активного участника группы, то такая обложка просто необходима. Она позволит не только наглядно продемонстрировать подписчикам, насколько они близки к победе, но и избавит от необходимости вручную считать голоса для подведения итогов.
Для этого нужно выбрать виджет «Самый активный» и установить его на обложку. В группе Pepper.Ninja так и сделали. На их обложке выводятся пять самых активных участников, один из которых является лидером всей недели.
Как сделать динамическую обложку в ВК
Для создания динамических обложек ВК используются различные конструкторы: Dynamic Cover, LetsCover, Boom Cover, VKfiller, Revoc, «Впостер». Мы протестировали три из них, сравнили их функционал и стоимость. Делимся результатами:
А теперь на примере виджета «Самый активный» разберём, как бесплатно сделать динамическую обложку для групп ВК. Делать это будем с помощью конструктора Dynamic Cover. Поехали!
Подключение к сервису и добавление обложки
Чтобы создать динамическую обложку ВК, зарегистрируйся на сайте и подключи к сервису группу, в которой будет установлена обложка.
После добавления группы появится окно, в котором тебе предложат создать обложку.
Для создания динамической обложки ВК нужно подготовить фон, на котором будут располагаться виджеты. Рекомендуемый размер фона — 1590х400 пикселей.
Если в штате нет дизайнера, можно воспользоваться готовыми шаблонами. Для этого нужно перейти в раздел «Готовые шаблоны». Вот такие варианты обложек предлагает сервис динамических обложек ВК Dynamic Cover для конкурса «Самый активный»:
Такой шаблон можно взять за основу и доработать: убрать или добавить виджеты, изменить текст, фон обложки и пр.
Настройка виджета «Самый активный»
Нажми на один из виджетов шаблона, в открывшемся поле перейди в раздел «Конкурсы» и создай новый конкурс.
Теперь переходим к настройкам. В конкурсе участникам будут начисляться баллы за различные активности в группе: лайки под постами, комментарии, предложенные новости и т. д.
Давать баллы за репосты в этом конкурсе мы не рекомендуем, так как это запрещено правилами ВКонтакте. За нарушение этих правил соцсеть может наложить на сообщество штрафные санкции.
В открывшемся поле необходимо прописать, сколько баллов и за что будет начисляться участникам.
В сервисе также есть возможность создать чёрный список. В него можно добавить участников, которые не должны победить в конкурсе. Например, администраторов группы, которые проявляют большую активность, или победителей прошлых конкурсов. Пользоваться этой функцией или нет и насколько это честно, решать тебе.
При настройке конкурсного периода можно выбрать как один из предлагаемых сервисом (месяц, неделя), так и настроить свой — выбрать конкретную дату начала и окончания конкурса. Активность участников будет учитываться именно под теми постами, которые были опубликованы в выбранный период. Затем вернись к настройке обложки и привяжи конкурс к каждому виджету «Самый активный».
Настройка обложки
Вот несколько рекомендаций, которые нужно учитывать при создании динамической обложки:
1. Если нужно строго следовать брендбуку, при выборе сервиса для создания динамической обложки ВК обрати внимание, можно ли в нём добавлять собственные шрифты. Если такой возможности нет, но ты хочешь использовать именно этот сервис, пропиши текст на картинке, а в самом конструкторе добавь только необходимые иконки.
2. При расположении виджетов на обложке учитывай, что они должны хорошо читаться как в десктопной, так и в мобильной версии. Если виджеты слишком мелкие, лучше удалить один из них. Для этого выбери нужный элемент и щёлкни правой кнопкой мыши на панели справа.
3. При настройке обложки также обрати внимание, чтобы в конструкторе была сетка и предпросмотр. Это поможет определить, как расположить элементы, чтобы они не обрезались со смартфонов.
После установки и настройки виджетов необходимо сохранить обложку, а затем добавить её в группу ВКонтакте в панели управления.
Настройка периода обновления
Конструкторы динамических обложек ВК позволяют настроить период обновления для каждого виджета или для всех сразу. Проще говоря, ты можешь прописать, как часто информация на обложке будет меняться. Оптимальный вариант — задать минимальный период, чтобы подписчикам не приходилось долго ждать обновления.
В конструкторе Dynamic Cover период обновления виджета зависит от его типа. Например, виджет «Погода» будет обновляться раз в 10 минут, «Подписчик» — по событию вступления человека в группу, а «Самый активный» — по мере сбора активностей, т. е. примерно один раз в минуту.
Обрати внимание: чаще, чем раз в минуту, динамические обложки для групп ВКонтакте обновляться не могут.
В конструкторах LetsCover и «Впостер» можно настроить период обновления обложки. Но минимальный период обновления также равен одной минуте.
После завершения всех настроек не забудь активировать конкурс. Для этого нужно перейти в меню во вкладку «Конкурсы» и нажать кнопку «Play».
Настройка чат-бота для виджета «Самый активный»
Помимо того, что самые активные участники будут отображаться на обложке в сообществе, можно настроить чат-бота. Он отправляет в личные сообщения подписчику количество заработанных баллов. В зависимости от конструктора можно подробно расписать, за что и сколько баллов получил человек, или просто прислать их суммарное количество.
Бота можно подключить в главном меню конструктора. Для этого задай ключевые слова, на которые он будет реагировать, и выбери пункт «Отправить пользователю его баллы». В появившемся окне выбери конкурс, за который бот будет присылать баллы, и при необходимости пропиши текст сообщения.
Итак, мы разобрали, как сделать динамическую обложку ВКонтакте. В сообществе она будет выглядеть так же, как и на предпросмотре, только вместо пустых иконок подтянутся аватарки подписчиков.
Интерфейсы у всех сервисов по созданию динамических обложек в сообществе ВК интуитивно понятны, и разобраться в них не составит труда. Перед тем, как оплатить сервис и установить обложку в группу, воспользуйся бесплатным тестовым периодом. Это поможет лучше разобраться во всех настройках и выбрать сервис с нужным тебе функционалом и стоимостью.