How to install a VKontakte group widget for a WordPress site

March 16, 2021 Social network VKontakte

Since I am a practicing administrator of groups on social networks, when I go to any site from a search engine, I always look into their VKontakte group.

How do I do this? Thanks to the widget, of course!

Why am I doing this? Because I’m interested in how this or that project is presented on social networks, how the group is run, how active it is, etc.

Why do you need a VKontakte widget?

The most important task that the widget performs is that it connects your website and your VKontakte community. A huge plus is that the site visitor sees on the widget, first of all, his friends who are in the group. This always increases confidence.

Remember yourself. Surely you were very willing to join groups where your friends were already members.

Moreover, a site visitor can literally subscribe to your group’s news in one click. And that's great! Well, people don’t like to make unnecessary movements and there’s nothing you can do about it. Mother laziness...)

Remember that every extra mouse click is another barrier that not all of your visitors and subscribers pass through.

VKontakte is the most visited network on the Runet and a huge number of people (to be more precise, about 60 million people) access this social network every day. And your business will clearly benefit from the fact that people will receive news from you on the very resource where they are used to spending their free time.

Inserting a post from social networks

The principle of integrating social content into a website is simple. It is almost identical to the placement of widgets for the same social network buttons (detailed overview of where and what to get). Actually, it is these JavaScript libraries that allow you to add posts from social networks.

The general principle of inserting a post from a social network into website content:

  1. The JavaScript library
    is the same as for inserting social media buttons, so you only need to insert it into the site page once and it will work for buttons and posts.
  2. The note ID HTML element
    is essentially a DIV or BLOCKQUOTE tag (I prefer the latter) with the note's URL. It is noteworthy that often in the tag itself you can write any content that will be replaced with content from the social network. This should not be abused!
  3. Processing elements using a CSS class
    - performed by a JavaScript script when the page is loaded. This generates a regular IFRAME element.

How to create a VKontakte widget for a website

In order to create a VKontakte widget, open your page on this social network. Then go down to the very bottom of the screen and on the left, under targeted ads, look for the “Developers” button. A couple of times, novice administrators turned to me for help and wrote that they could not find this very button at the bottom of the page.

If you are also tired of turning the mouse wheel, then go to the very top of your page, click on the triangle next to your name and find the “Help” button

A page will open in front of you, at the bottom of which you can easily find the “Developers” button

You will be taken to the application development page. Click on the “Connecting sites and widgets” button

Find the “Website Widgets” section and click on the “Communities” button.

How to insert a VK group widget?

Creating and promoting a VKontakte group does not seem to be a difficult task, even for beginners. Thanks to the intuitive interface of the social network, all you need is time. And in order for the site’s audience to know about your social page, you need to tell about it in any way available to you. And many webmasters prefer the widget format, which is easily integrated into web design. VKontakte, like other social networks, provides a set of web tools, of which the “Community Widget” can be distinguished.

To start inserting code onto the site pages, first log in to the VKontakte website and follow the “Developers” link at the end of the page:

  1. Find the item “Authorization and widgets for the site”;
  2. Click “Community” - 3rd item from the top and configure the display;
  3. Provide a link to your group or public, as it is displayed in the address bar;
  4. Select the display format: Participants, news, title only (we recommend the “Participants” option, as it is more common among blogs and most large sites);
  5. Next, adjust the dimensions of the widget (width and height in pixels), and if necessary, change the color scheme to fit into the site template.

Next, as soon as the setup is completed, we copy the resulting code, which will be placed on the site.

The first part of the code is inserted after the opening tag

, which is located in the “footer.php” file of WordPress themes. We copy the second part to the “Sidebar” in the “Appearance” - “Widgets” section, placing it in a standard text block. After clicking the “Save” button, you can check the display of the “Community Widget” on the site.

Note! The copied code is divided into two parts to optimize the loading of the main content on the site pages. If you have minimal use of third-party scripts, then when you insert the code into the “Text” widget completely, the time difference will not be noticeable.

How to insert a VK widget via iframe

Sometimes there may be a problem with the correct display of the widget on the site pages, which has negative consequences in the process of active promotion. As it turns out, the culprit is the widget script, which is not always processed correctly by Internet browsers.

To avoid such problems, you can use another method of displaying the “Community Widget”, using the code built on display via: In the code, replace the numeric value in the URL with the ID number of your VKontakte group, it can be found in the address of the community wall (even if an arbitrary name is set) .

Setting up a VKontakte widget

The “Widget for Communities” page will open in front of you, where you can make all the necessary settings for your VKontakte widget. All fields will already be filled in - don’t be alarmed! Fields filled in for example

Rating
( 1 rating, average 5 out of 5 )
Did you like the article? Share with friends:
Для любых предложений по сайту: [email protected]