How to customize a block of links in a group on VKontakte

Content is king though, but in order to attract an audience to your publics, it’s not enough. Good design of groups, suitable high-quality images, tailored to the specifics of the social network - play an equally important role in promoting your accounts.
On the example of our group in Vkontakte, I want to show how you can beautifully draw a block of links.

Usually it contains important resources for the group, such as personal sites or accounts in other social networks. By these links you can get to other resources of the company directly from the group.



Add a link is very simple, you need to have the necessary rights in the group, go into edit mode, and then click on the "Add link" button.
')


In the window that appears, enter the desired address, the system will make a request and tighten the data, title and image that are listed in the added resource. The title can be changed, but the default picture can not be changed.



Therefore, sometimes it turns out that a link with a picture that does not look good on the page may appear in the block. For example, as here.

There is always a way out

At home, after work, I spent half an hour researching requests to the server, trying to figure out how and what can be changed in requests so that the social network adds a specific resource with the desired picture. Now I want to share this information so that everyone can beautifully arrange their groups. Perhaps in the future, the creators of the social network will add such an option, but for now catch this life hack.

Training

For convenient work, we need a special program Postman , which allows you to make requests to the server and transfer the necessary parameters.

Chrome browser, you can any other, but this is where there is a handy built-in development tool. Click the right mouse button and in the context menu choose “Inspect” (or “Explore” in the Russian version).

Alternative method: More Tools (More Tools)> Tools (Tools)> Developer Tools.

Step 1

In the group, go to the link block editing page and call the Developer Tools, go to the Networks tab and select the All tab

Step 2

Without closing the developer panel, add a new link (it’s not worthwhile to pay attention to the picture and text, you still delete it, and add real links later). This is necessary in order to catch the necessary requests to the server.

Step 3

After you added the link and it appeared in your list, you need to get the data from the heap of requests that were made. To do this, in the developer tool, in the Filter field write share.php . This request is responsible for uploading the image to the server, we will use it to upload the image we need.



As a result, you will see something similar to this screen. If you get a similar picture, then all is well and you can go further.

Step 4

In the Postman program, you need to enter the necessary data received from the request: this is the header with the session, which is stored in the cookie, and the Body itself is the request with the data. This is done very simply. From step 3 you need to copy: Request URL, Cookie, Body



and paste them into postman.



To make it easier to work, Postman has a Bulk mode in which you can add data by simply copying from the browser.



We set up a request to the API to download the image, now replacing the address of the image we need, we can upload it to the server. After we changed the address of the picture, you need to click on the Send button, make a request to the server and get an answer, as in the following screenshot:



In the resulting result, photo_id is the identifier of our uploaded image, which we can now use when adding a link.

Step 5

Having obtained the necessary identifier, we must now form an API request to add a new link to the group. To do this, in the browser in developer mode, instead of share.php, you need to write groupsedit.php and perform similar actions as in step 4. Copy the Request URL, Method POST, Cookie, Body, create a new tab in Postman and paste the data.



After adding to Postman in Bulk mode



Only instead of photo_id from the browser, you need to insert our received photo_id of the image loaded in the previous step to replace the standard image. Also here you can change the link - the added link and str - the text that will be displayed to users.

As a result, we received two tabs with API requests that we can use to add new links and images. Now you can find suitable pictures on the Internet or upload your own and indicate their addresses.

For example, I made thematic logos for Facebook, hh.ru and Instagram, uploaded them to Google Drive, opened access by reference and added them for each resource.



Good luck to you in customization!

Update : Information for December 24, 2018 is no longer relevant, vk has updated the image loading algorithm. Later, as time will be, I will sort out and update the article.