2017-06-11 в 15:33, admin , рубрики: java, Вконтакте, Вконтакте API, обработка изображений, Программирование
В последнее время всё большую популярность обретают различные интерактивные способы завлечь аудиторию и привлечь к себе больше внимания. Тут и боты для социальных сетей и мессенджеров, и другие решения, придающие «уникальности».
Среди них можно выделить и динамические обложки для сообществ, официально поддерживать которые ВКонтакте начали в марте.
Почему я решил написать эту небольшую статью? Хотя ажиотаж вокруг этой темы и спал, всё равно она остаётся довольно популярной, находятся как «клиенты», готовые платить очень большие деньги, так и желающие научиться это делать самому.
Я работал с одной «студией», которая берет шестизначные суммы за эту работу, при этом кидая своих разработчиков и мелких клиентов.
Так вот, чтобы в этой сфере не было монополии, и все увидели, насколько легко это делается, я и решил написать статью.
Как сделать живую видео обложку для группы вк. Кайфовый дизайн.
На примере моего пустого сообщества-песочницы
Вступление
Я опишу, как сделать динамическую обложку, отображающую текущее время и последнего подписчика. Любой другой функционал делается не сложнее — чуть больше строк кода и доступ к API других сервисов.
Что нам понадобится? Всего лишь подготовленный фон для обложки и access_token для группы с правами доступа к фотографиям. Привожу пример на Java, но сделать это можно и любым другим способом.
Статья рассчитана на более-менее опытных читателей — расписывать, как отправить GET запрос или авторизоваться в ВК через API я не стану.
Приступаем
Для начала реализуем транслирование новых подписчиков на обложку.
Логика примерно следующая: получаем запрос от Callback API, берём оттуда id пользователя, по нему берём имя и аватар, накладываем на имеющийся фон и загружаем в ВК. Проще некуда.
Поехали.
Обрабатываем запрос от Callback API
Выглядеть этот запрос будет примерно так:
< «type»: «group_join», «object»: < «user_id»: XXXXXXXX, «join_type»: «join» >, «group_id»: XXXXXXXX >
Парсить JSON, я думаю, все умеют. Отсюда нам нужен только id пользователя, и по нему мы уже получаем имя, фамилию и ссылку на фотографию.
Достаточно сделать такой GET запрос:
https://api.vk.com/method/users.get?user_ids=XXXXXXXXv=5.65
В ответ мы получим:
Всё, у нас есть вся необходимая информация, осталось добавить это на обложку и загрузить её.
Обрабатываем изображение
Предположим, что вы заранее нашли изображение для фона и знаете, по каким координатам должно располагаться то, что вы хотите добавить на обложку. Все эти мелкие подробности опустим и перейдём к коду:
🔥 Динамическая обложка вконтакте. Что это такое и про способы реализации
// Фоновое изображение и аватар пользователя BufferedImage background_image = ImageIO.read(new File(«/some/folder/bg.png»)), user_avatar = ImageIO.read(new URL(«https://. «)); // Результат — отдельное изображение BufferedImage result = new BufferedImage(background_image.getWidth(), background_image.getHeight(), BufferedImage.TYPE_INT_ARGB); // В качестве «холста» берём наше новое изображение Graphics2D g = (Graphics2D) result.getGraphics(); // Рисуем фон g.drawImage(background_image, 0, 0, null); // Рисуем аватар подписчика g.drawImage(user_avatar, x_avatar, y_avatar, width, height, null); // Подписываем имя подписчика g.drawString(user_name, x_name, y_name); // Записываем результат на диск ImageIO.write(result, «PNG», new File(«some/folder/result.png»));
Хочу заметить, что лучше использовать сразу уменьшенное изображение, иначе, если просто указать ширину и высоту результата, как указано в примере кода выше, то вместо аватара пользователя вы можете увидеть три пикселя.
Я не стал приводить простыни кода, помогающие на Java нормально уменьшать изображение и делать CircleCrop по центру, это легко пишется собственноручно либо спокойно гуглится. Также, настройку шрифтов и прочие мелкие моменты я тоже опустил.
В принципе, всё — мы получили готовую обложку, осталось только загрузить её. Просто, не правда ли?
Загружаем обложку
Всё делается очень просто и подробно описано в документации к API.
Получаем сервер для загрузки обложки, отправив GET-запрос:
https://api.vk.com/method/photos.getOwnerCoverPhotoUploadServer?group_id=XXXXXXXXcrop_y=0crop_y2=400v=5.64
Где ACCESS_TOKEN — токен с правами доступа к фотографиям группы.
Из ответа берём upload_url:
Теперь отправляем на наш upload_url отправляем POST-запрос с полем photo в формате multipart/form-data, точно также, как и с любыми документами. Я уже освещал этот вопрос в другой статье.
В ответ мы получим следующее:
Всё, осталось сделать один GET-запрос и обложка засияет в сообществе:
https://api.vk.com/method/photos.saveOwnerCoverPhoto?hash=HASHaccess_token=ACCESS_TOKEN // Спим минуту Thread.sleep(1000*60); // Берём текущее время в формате «20:25» String current_tine = new SimpleDateFormat(«H:m»).format(new Date()); // Рисуем! BufferedImage result = ImageIO.read(new File(«some/folder/result.png»)); Graphics2D g = (Graphics2D) result.getGraphics(); g.drawString(current_tine, x_time, y_time); // Можно перезаписать изображение, или сразу его загружать // Или делать что душе угодно ImageIO.write(result, «PNG», new File(«some/folder/result.png»); >
Это самый примитивный способ добиться нужного результата.
Аналогично можно сделать любой функционал, благо Callback API предоставляет довольно обширные возможности: можно вычислять пользователей, которые сделали больше всех репостов, оставили больше всех комментариев, и так далее. Правда, с лайками придётся заморочиться, но это тоже не проблема. Курс валют, погода, пробки и прочие радости можно свободно получить через общедоступные API.
Чтобы создать даже самую сложную обложку, меняющуюся в зависимости от времен года, погоды, текущего времени, с отображением курса валют и вообще чего угодно, нужно потратить всего полчаса работы и пару сотен строк кода.
Буду рад, если статья не окажется бесполезной. Всё же, видел немало вопросов на эту тему, и желающих тоже достаточно.
Правда, жаль, что у Facebook нет аналогичной возможности обновлять обложку.
Источник: www.pvsm.ru
Динамическая обложка ВКонтакте
Динамические обложки ВКонтакте позволяют выводить различную информацию (которая меняется каждую минуту), например, может показывать активных участников, количество подписчиков, может показывать показывать погоду, курсы валют и многое другое.
Примеры динамических обложек
Динамическую обложку для группы ВКонтакте, можно сделать на сервисе DyCover. На этом сервисе есть Бесплатный тариф.
Виджетов очень много, но на бесплатном тарифе есть некоторые ограничения. Посмотрите, какие виджеты есть на бесплатном тарифе:
- Последний подписчик
- Последний комментатор
- Виджет «Пользователь»
- Виджет «Дата и Время»
- Виджет «Фигура»
- Виджет «Погода»
- Виджет «Картинка»
- Виджет «Донаты»
Но как вы понимаете, прежде чем мы займемся созданием Динамической обложки, нужно нарисовать ее, например, в Photoshop или любом другом редакторе (можно онлайн редакторе).
Я даю вам шаблон для создания обложек ВКонтакте, с его помощью вы можете нарисовать «основу» для динамической обложки (фон).
Когда будите рисовать обложку, не выходите за направляющие, показанные стрелками. В мобильной версии не будет видно, все, что находится за этими направляющими. И если там будет находится какая-то нужная информация, она будет «обрезана».
Скачать Шаблон в формате PSD, вы можете по ССЫЛКЕ.
DyCover – первое знакомство с сервисом
Переходим по ССЫЛКЕ на сервис. Регистрация на сервисе происходит через ВКонтакте.
Чтобы зарегистрироваться нажмите Попробовать бесплатно или Войти. Вы должны заходить с того аккаунта, где вы являетесь администратором группы.
В следующем окне вы увидите список ваших групп где вы являетесь администратором.
Здесь имеется 3 пункта (слева).
Первый пункт – Тарифы. Можете посмотреть свой тариф, можете поменять тариф.
Второй пункт – Реферальная программа. Здесь находится ваша реферальная ссылка, по ней вы можете приглашать друзей. Реферальные отчисления небольшие, всего 5%. Ниже, Статистика рефералов.
Третий пункт – Уведомления. Можно настроить уведомления, которые вы будите получать.
Конструктор обложек
Теперь, в верхнем меню выберите Открыть конструктор и вы попадете в окно, с которого мы начали. Кликните по группе и вы попадете в Панель управления.
Панель управления
Первое окно, это окно, где нужно подключить обложку к сервису, нажмите зеленую кнопку Подключить (1) . В следующем окне жмите Хорошо и разрешаем доступ. Дальше создать ее (2) .
Создание обложки
И так, мы попадаем в сам конструктор динамических обложек. Мы будем создавать простую обложку (имею ввиду не сложную).
Порядок создания обложки такой, сначала загружаем фон (Загрузка фона), потом добавляем нужные виджеты, Добавить виджеты (левое меню).
И так, загружаем фон.
В левом меню нажмите Добавить виджет. Выберите нужные виджеты, но помните, что в бесплатной версии их количество ограничено.
Если подвести курсор, например, к виджету Подписчики, то вы увидите выпадающее меню с виджетами из группы Подписчики. С другими виджетами «та же история».
Как вставит и отредактировать виджет
Обратимся к моей обложке. Покажу какие виджеты стоят на обложке.
(1) – Виджет дата и время (в бесплатной нельзя вставить время)
(2) – Три виджета Пользователь
(3) – Виджет Последний подписчик
(4) – Виджет Текст
Сейчас вставим виджет Пользователь. Для этого, нажмите Добавить виджет (левое меню), в открывшемся окне подведите курсор к виджету Подписчики и из меню выберете Пользователь (в самом низу).
На обложке появится виджет (1) , с помощью маркеров его можно растянуть. Можно растянуть отдельно фото, отдельно текст (Иван Иванов). У каждого виджета имеются свои настройки (2) .
Панель настроек
Отображение
(1) – перемещать виджет можно с помощью ползунков (по осям X и Y) или просто ввести с клавиатуры нужное значение
(2) – ширину и высоту также можно изменять с помощью ползунков
(3) – виджет можно повернуть на нужный угол
Раздел Виджет уже рассмотрели (см. выше)
Изображение
(1) – Размер изображения, можно изменить размер
(2) – Округление изображения, можно сделать изображение круглым, это очень красиво смотрится (ползунок до конца вправо или значение 50)
(3) – Рамка, стандартные настройки рамки (стиль, толщена, цвет)
Разделы Имя и Фамилия, рассмотрите сами, там ничего интересного, можете оставить, как есть.
В каждом виджете, где есть текстовое поле, есть Настройка текста, настройки стандартные, как например, в редакторе Word.
Есть еще 2 нужные кнопки, Корзина (1) удаляет ненужный виджет и Копировать (2) , если нужно сделать несколько одинаковых виджетов с одинаковыми настройками. Так я делал виджеты Пользователь (3) .
Есть еще пункты меню, о которых необходимо упомянуть.
Сетка для мобильных
Очень полезная функция. Выше я вам говорил о шаблоне и о направляющих, за которые не стоит заступать. Включим ее и посмотрим, что получилось.
Как видите появились направляющие. Чтобы отключить эту функцию, просто кликните по Сетка для мобильных, еще раз.
Готовые шаблоны
Здесь вы найдете готовые шаблоны, «разложенные» по категориям. Можно выбрать понравившейся шаблон и отредактировать его под себя.
После всех настроек нажмите Предпросмотр и вы увидите как будет выглядеть ваша обложка на компьютере и главное на мобильных устройствах.
После этого закройте окно предпросмотра и нажмите Сохранить обложку и далее Назад в панель управления.
Теперь перейдите в свою группу, перезагрузите браузер и посмотрите, что у вас получилось.
С уважением, Сергей Бурдин
Источник: myobzors.ru
Как использовать динамическую обложку ВКонтакте: советы от МегаФона
Это материал не о динамических обложках. И даже не о создании контента в социальных медиа, увеличивающего количество переходов на сайт в 14 раз. Цель статьи – показать, как работает современный SMM: куда мы пришли за 7 лет эволюции социальных медиа, как устроен SMM МегаФон и есть ли смысл в дальнейшем существовании классических SMM-менеджеров.
SMM – относительное молодое направление в маркетинге
В 2017 году многие рекламодатели делают первые шаги в социальных медиа: размышляют, что лучше – Facebook или ВКонтакте, разрабатывают контентные планы и пытаются общаться с потребителями. Они идут по пути классического SMM в России – четких рубрик, утвержденных гайдлайнов и сложных согласований. Словом, махровой бюрократии, мешающей SMM быть гибким. SMM будущего – agile-подход, где контент создается на лету, встраивается в информационные поводы… 1 картинка вместо тысячи слов.
Площадки против SMM-команды
Ключевая задача современной SMM-команды – не засиживаться на одном месте, а постоянно меняться. Ведь если не вы – это сделают конкуренты. Согласитесь, слишком дорогостоящее удовольствие, когда за внимание потребителя вы конкурируете с многочисленными сайтами, мобильными приложениями, сериалами, музыкой.
Даже родственники, школа, университет и работа «отвлекают» потребителя от усвоения рекламных сообщений. В вашем распоряжении считаные минуты – будет глупо рассчитывать, что ваша тысячная цитата Эйнштейна побьет влог от Кати Клэп. Предложите потребителю что-то поинтереснее! Даже если у вашего бренда нет качественного брендированного контента, а гайдлайны запрещают встраиваться в информационные поводы.
Вдохновляйтесь функционалом социальных медиа. Делайте свою коммуникацию более разнообразной. Социальные сети постоянно совершенствуют функционал. «Дуров, верни стену» – пережиток вчерашнего дня. Лайвы, магазины, динамические обложки меняют инструментарий и характер SMM. Так в начале эры SMM мы перешли от текста к графике, затем от графики к видео.
Будущее социальных сетей будет интерактивным.
Наконец-то, динамическая обложка!
Не так давно ВКонтакте представил новый функционал – динамические обложки. Крупные бренды довольно долго перегруппировывались к использованию этого инструмента. Первопроходцами стали паблики, а не бренды. Их разнообразные примеры стали полноценными кейсами, как нужно и не нужно делать динамические обложки.
Зачем вообще брендам динамические обложки (интерактивный верхний блок сообщества):
1. Привлечение внимания аудитории (вспоминаем задачу: выделиться в ленте).
2. Вовлечение потребителей в коммуникацию.
3. Вовлечение пассивной части аудитории (которая читает, но не взаимодействует).
4. Донесение имиджа современной прогрессивной компании.
5. Прямая реклама (да-да, своего рода медийное размещение).
Сюрприз! Нет идеи – нет эффективного использования динамичной обложки. По сути, это просто прямоугольная область, где можно разместить любой креатив. Одна идея принесет лайки и славу, другая будет полностью проигнорирована аудиторией. Расскажу, как МегаФон удачно использует динамическую обложку и замеряет ее эффективность.
МегаФон ТВ – это онлайн сериалы, более 150 ТВ-каналов, новые популярные фильмы и мультфильмы, доступные в смартфоне потребителя. Одна из тактических задач социальных медиа МегаФон по данной услуге – повышение узнаваемости, распространение ключевых новостей и ответы на важные вопросы потребителей.
2-миллионный зритель – сильный информационный повод для МегаФон ТВ. Мы решили поддержать его в социальных медиа, объединив базу данных абонентов МегаФон ТВ с динамической обложкой «ВКонтакте».
Механика: каждый новый абонент услуги появлялся на обложке сообщества в режиме реального времени.
Главными героями коммуникации стали Дмитрий Хрусталев (“Вечерний Ургант”) и Екатерина Скулкина (“Comedy Woman”, “Дружба народов”) – лица рекламы МегаФон ТВ. Таким образом визуально динамическая обложка не отличалась от билбордов, рекламных роликов и баннеров мобильного оператора.
Динамическая версия обложки
Статичная версия обложки по завершению активности
Обратите внимание: динамическая обложка играет роль тактической краткосрочной активации. Не центра большого промо, лидогенерации и перфоманс-маркетинга. Хочу сказать, что точечная креативная коммуникация не менее важна, нежели большие идеи. Ведь именно подобные кампании – основа долгосрочного диалога с потребителями.
Например, динамическую обложку можно регулярно обновлять без существенного влияния на SMM-бюджет. В этом смысле у вас простор для создания нового креатива сегодня, завтра и послезавтра.
В случае МегаФона использование динамической обложки – имиджевая коммуникация. Она направлена на повышение узнаваемости и поднятия лояльности к конкретной услуге. Тем не менее конверсия переходов по ссылке в анонсирующем посте была в 14 раз выше в сравнении с «обычным постом»! Каковы причины успеха активации:1. Пользователи «изголодались» по контенту в новых форматах.
2. Чем проще механика, тем больше участников активации.
3. Наши люди хотят выделяться среди массы.
Напутствие SMM-щикам
Большинство клиентов ждут от исполнителей проактивности. Они видят в них генераторов идей, которые днем и ночью живут брендом, изучают функционал социальных сетей и успешные кейсы. Потом просыпаются и забрасывают корпоративные почты креативом.
Реальность такова, что в перенасыщенном информационном потоке крайне сложно на постоянном конвейере выдавать высокопродуктивные SMM-решения. Их роль может исполнить функционал социальных сетей. Добавили новую кнопку на Facebook? Подумайте, как она может улучшить пользовательский опыт в вашем сообществе. Включили Stories в Instagram?
Быть может, вы достучитесь до потребителя, когда начнете с ним общаться в новом формате. Каждая новость социальных сетей – потенциал для расширения арсенала SMM. Здесь и сейчас менеджеры находятся в абсолютно равных условиях: кто-то станет первопроходцем, а кто-то – останется на обочине истории SMM «сделано в России». В какой команде будете – решать вам.
Источник: www.likeni.ru