Главная » Хабрахабр » Как кастомизировать блок ссылок в группе в VKontakte

Как кастомизировать блок ссылок в группе в VKontakte

image

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

image

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

image

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

image

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

image

Выход есть всегда

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

Подготовка

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

Кликаете правой кнопкой мыши и в контекстном меню выбираете «Inspect» ( или «Исследовать» в русской версии). Браузер Chrome, можно и любой другой, но именно тут есть удобный встроенный инструмент для разработки.

Альтернативный способ: Больше инструментов (More Tools) > Инструменты (Tools) > Инструменты разработчика (Developer Tools).

Шаг 1

Зайдите в группе на страницу редактирования блока ссылок и вызовите Инструменты разработчика, перейдите во вкладку Networks и выберите под вкладку All

image

Шаг 2

Не закрывая панель разработчика добавьте новую ссылку (не стоит пока обращать внимание на картинку и текст, вы все равно это удалите, а реальные ссылки добавите позже). Это нужно для того, чтобы отловить нужные запросы к серверу.

Шаг 3

После того как добавили ссылку и она появилась у вас в списке, нужно получить данные из кучи запросов, которые были сделаны. Для этого в инструменте разработчика, в поле Filter напишите share.php. Данный запрос отвечает за загрузку изображения на сервер, мы будем использовать его для того, чтобы загрузить нужное нам изображение.

image

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

Шаг 4

В программе Postman нужно ввести необходимые данные, полученные из запроса: это заголовок с сессией, который храниться в cookie, и сам Body запрос с данными. Делается это очень просто. Из шага 3 нужно скопировать: Request URL, Cookie, Body

image

и вставить их в Postman.

image

Чтобы проще было работать, в Postman есть Bulk режим, в котором можно добавлять данные, просто копируя из браузера.

image

После того, как мы поменяли адрес картинки, нужно нажать на кнопку Send, сделать запрос к серверу и получить ответ, как на следующем скрине: Мы настроили запрос к API для загрузки картинки, теперь подменяя адрес нужной нам картинке, мы можем загружать ее на сервер.

image

В полученном результате photo_id — это идентификатор нашей загруженной картинки, который мы можем теперь использовать при добавлении ссылки.

Шаг 5

Получив нужный идентификатор, мы должны теперь сформировать API запрос для добавления новой ссылки в группу. Для этого в браузере в режиме разработчика вместо share.php нужно написать groupsedit.php и произвести похожие действия как в шаге 4. Копируем Request URL, Method POST, Cookie, Body, создаем новую вкладку в Postman и вставляем данные.

image

После добавления в Postman в режиме Bulk

image

Также тут можно изменить link – добавляемую ссылку и str – текст который будет отображаться пользователям. Только вместо photo_id из браузера нужно вставить наш полученный photo_id картинки, загруженной на предыдущем шаге, чтобы подменить стандартное изображение.

Теперь можете находить подходящие картинки в интернете или заливать свои и указывать их адреса. В результате, мы получили две вкладки с API запросами, которые можем использовать для добавления новых ссылок и изображений.

Например, я для Facebook, hh.ru и Instagram сделал тематические логотипы, залил их на Google Drive, открыл доступ по ссылке и добавил для каждого ресурса.

image

Удачи вам в кастомизации!


Оставить комментарий

Ваш email нигде не будет показан
Обязательные для заполнения поля помечены *

*

x

Ещё Hi-Tech Интересное!

«ПК», но не «персональный компьютер»: интервью с программным комитетом Joker

Кнопочки на сайте видны всем — но при взгляде со стороны можно никогда не задуматься о бэкенде, без которого эти кнопочки не работали бы. Любому Java-разработчику понятно, сколько важного остаётся незаметным для конечного пользователя. «Фронтендом» можно считать спикеров: они видны ...

Мастер осанки: остаться в живых

Удивительно, но из всех известных и популярных корректоров осанки до сегодняшнего дня дожил лишь этот: простой, не всегда удобный, не слишком-то гибко настраиваемый… Правильно еще раз посвятить ему несколько слов. Тем не менее, достойно выдержал и натиск конкурентов, и испытание ...