Create a dynamic VK cover

Recently, various interactive ways to attract the audience and attract more attention are gaining popularity. There are bots for social networks and instant messengers, and other solutions that add “uniqueness”. Among them are dynamic covers for communities, which VKontakte officially launched in March .

Why did I decide to write this short article? Although the excitement around this topic has subsided, it still remains quite popular, there are both “customers” who are ready to pay a lot of money, and those who want to learn how to do it themselves. I worked with one “studio”, which takes six-figure sums for this work, while throwing its developers and small clients. So, so that there is no monopoly in this area, and everyone sees how easy it is, I decided to write an article.


_{For example, my empty sandbox community}

Introduction

I will describe how to make a dynamic cover that displays the current time and the last subscriber. Any other functionality is made no harder - a little more lines of code and access to the API of other services.

What do we need? Just a prepared background for the cover and access_token for the group with access rights to photos. I give an example in Java, but you can do this in any other way.

The article is intended for more or less experienced readers - I won’t write how to send a GET request or log in to the VK through the API.

Getting down

For starters, we’re broadcasting new subscribers to the cover. The logic is approximately the following: we receive a request from the Callback API, take the user id from there, take the name and avatar from it, put it on the existing background and load it into the VK. Nowhere is easier. Go.

Processing request from Callback API

This query will look something like this:

{
  "type": "group_join",
  "object": {
    "user_id": XXXXXXXX,
    "join_type": "join"
  },
  "group_id": XXXXXXXX
}

Parsing JSON, I think everyone knows how. From here we only need the user id, and from it we already get the name, surname and link to the photo.

It is enough to make such a GET request:

https://api.vk.com/method/users.get?user_ids=XXXXXXXX&fields=photo_max_orig&v=5.65

In response, we will receive:

{
  "response": [
    {
      "id": XXXXXXXX,
      "first_name": "имя",
      "last_name": "фамилия",
      "photo_max_orig": "https:\/\/pp.userapi.com\/\/..."
    }
  ]
}

That's all, we have all the necessary information, it remains to add it to the cover and download it.

Image processing

Suppose that you have found an image for the background in advance and know what coordinates you want to add to the cover. We omit all these small details and move on to the code:

// Фоновое изображение и аватар пользователя
BufferedImage bg = ImageIO.read(new File("/some/folder/bg.png")),
              userAvatar = ImageIO.read(new URL("https://..."));
// Результат - отдельное изображение
BufferedImage result = new BufferedImage(background_image.getWidth(), bg.getHeight(), BufferedImage.TYPE_INT_ARGB);
// В качестве "холста" берём наше новое изображение
Graphics2D g = (Graphics2D) result.getGraphics();
// Рисуем фон
g.drawImage(bg, 0, 0, null);
// Рисуем аватар подписчика
g.drawImage(userAvatar, xForAvatar, yForAvatar, width, height, null);
// Подписываем имя подписчика
g.drawString(userName, xForUserName, yForUserName);
// Записываем результат на диск
ImageIO.write(result, "PNG", new File("/some/folder/result.png"));

I want to note that it is better to use the reduced image immediately, otherwise, if you just specify the width and height of the result, as indicated in the code example above, then instead of the user’s avatar, you can see three pixels.

I did not cite the sheets of code that help in Java to normally reduce the image and make CircleCrop in the center, it is easy to write with my own hand or calmly google. Also, I also omitted the font settings and other minor points.

Basically, that’s all - we got the finished cover, it remains only to download it. Simple, right?

Download cover

Everything is done very simply and is described in detail in the documentation for the API.

We get the server to download the cover by sending a GET request:

https://api.vk.com/method/photos.getOwnerCoverPhotoUploadServer?group_id=XXXXXXXX&crop_x=0&crop_y=0&crop_x2=1590&crop_y2=400&access_token=ACCESS_TOKEN&v=5.64

Where ACCESS_TOKEN is a token with access rights to group photos.

From the answer we take upload_url :

{
    "response": {
        "upload_url": "https://..."
    }
}

Now we send a POST request with the photo field in multipart / form-data format to our upload_url , just like with any documents. I have already covered this issue in another article . In response, we get the following:

{"hash":"402784f0ec814632ac","photo":"eyJvaWQiOi0zNzI3MzTUsMjAwIiwwLCIxNjgwLDEwNTAiLCI3OTUsNDk3Il0sImJ3YWN0Ijoib3duZXJfY292ZXIiLCJzZXJ2ZXIiOjYzODYyOSwibWlkIjoyMzE0ODUyLCc4MSwiZGF0YSI6WyJ4QUFtLXBRQUFBQUFtRUxmY0FBS3A2VEh4bU5WYmJKOG5ZQUFLcDZ2VkMtWjRVMXdmbk9BQUtwNnnMXVvUGdxYkNBQUtwN21nSGJwQlJJdnMxRhpdWM5bldkRktwQUFBS3A3R1NhdFptbFJWNlNCQUFLcDdVamJEFBS3A3NUktQnJTSHotS0hFQUFLcDhLVVRTbzA4VURpTSIsIjAsMCw3OJfc2lnIjoiNjNkNmQ5NmY1ZmI0NWFiYzdjYjZjMjliOGM5NWNhNWMifQ"}

_{example from VKontakte}

Everything, it remains to make one GET request and the cover will shine in the community:

https://api.vk.com/method/photos.saveOwnerCoverPhoto?hash=HASH&photo=PHOTO&access_token=ACCESS_TOKEN&v=5.65

Where HASH and PHOTO are obtained from the previous paragraph, and the token is still the same.

Done, dynamic cover is working.

To add any other information, the update of which will be initiated by us, and not by requests from another server, you need to do even less work.

Previously, we knowingly saved the processing result in a separate file. Now we can make a “multi-layer” cover without losing previous information.

For example, this is how you can broadcast the current time on the cover:

while (true) {
    // Спим минуту
    Thread.sleep(1000*60);
    // Берём текущее время в формате "20:25"
    String now = new SimpleDateFormat("H:m").format(new Date());
    // Рисуем!
    BufferedImage result = ImageIO.read(new File("/some/folder/result.png"));
    Graphics2D g = (Graphics2D) result.getGraphics();
    g.drawString(now, xForTime, yForTime);
    // Можно перезаписать изображение, или сразу его загружать
    // Или делать что душе угодно 
    ImageIO.write(result, "PNG", new File("/some/folder/result.png");
}

This is the most primitive way to achieve the desired result. Any functionality can be done in the same way, the benefit of the Callback API provides quite extensive capabilities: it is possible to calculate the users who made the most reposts, left the most comments, and so on. True, likes will have to be confused, but this is also not a problem. Exchange rates, weather, traffic jams and other pleasures can be freely obtained through the public API.

To create even the most complex cover, changing depending on the seasons, weather, current time, displaying the exchange rate and generally anything, you need to spend only half an hour of work and a couple of hundred lines of code.

I would be glad if the article is not useless. Nevertheless, I saw a lot of questions on this subject, and there are also enough willing.

True, it is a pity that Facebook does not have a similar ability to update the cover.