Step-by-step instructions on how to make widgets in a VK group. Personal widget and posters

Telegram channel Programmer and business. Every day there are interesting stories about how a programmer builds a business.

The social network VKontakte is used by millions of people, especially for the Russian-speaking population of the CIS countries. There are many different groups of various subjects appearing here every day. Regardless of whether it is a large or small community, most of them use VK widgets. Today you cannot do without them, especially if the public is of a commercial nature, selling goods and services. Today we will tell you how to create, configure, add, and delete programs. You will also learn about their types.

What is a widget in VK

Many people are interested in the question, what is a Widget? It can be called a small application that performs a useful function. They are different. For example, they can show weather conditions on the phone screen or the clock on a PC. Such utilities in VK link your resource with a specific group or page on VKontakte. Thanks to them, users can subscribe to group news without leaving the page, learn about promotions, and receive personal messages.

This small program can display photos of friends and other public members. They are easy to install and edit. Group administrators and owners of commercial pages cannot do without them.

How to install VKontakte comment widget on Joomla and WordPress sites

1. Obtaining and setting up a comment widget

You can get the comments widget at https://vk.com/dev/Comments.

The “Connecting comments” section looks like this:

Select your resource in the drop-down list in the “Site/Application” field. If you couldn’t find it, select “Connect a new site.”

In the process of connecting your web site, you will have to enter information in several fields: Site name, Site address, Main site domain, Site subject. We complete the data entry by clicking the “Save” button.

You determine the number of comments displayed on the page yourself.

An active checkbox in the “Media” field gives users the opportunity to accompany the comment text with a photo, video, graffiti or audio recording.

The “Width” field is intended to indicate the corresponding widget parameter in pixels. In order for the comment form to adapt well to different types of user devices, it is better to leave it empty.

The figure shows that VKontakte provides a code, after installing which a widget will appear on the page of your resource. Let's figure out how to do this for sites based on Joomla and WordPress.

2. Adding a VKontakte comment widget to a WordPress site

There are two installation methods:

• The first option involves using a plugin for WordPress – “vkontakte api”, which can be found on the official website. The functions of this plugin include an email notification to the admin and the comment author about the appearance of a VK comment.
• The second option is to install the widget manually. The first two paragraphs of code are placed before the closing tag in the header.php file.

We insert the last paragraph into the single.php file before the line:

Everything is ready, the widget is installed.

3. Adding a VKontakte comment widget to the Joomla website

This problem can also be solved in two ways.

The first is using a plugin for Joomla. Third-party software manufacturers offer ready-made options for customizing the display of VKontakte comments, for example, there is the JL VKcomments plugin.

Widgets for the site: what they are and how to use them

Interaction with users

More details

This option has certain disadvantages:

• Third-party plugins accompany the VK widget with a link to their own website. There is little good in this.
• The load on the site's database will inevitably increase after installing an additional plugin.

The second way is to add a widget to Joomla manually. The installation code consists of three paragraphs. Place the first two paragraphs before the closing tag in the index.php file, which is located in the folder with the template used on your site.

Typically, the path to this file looks like this:

\templates\template in use\index.php

The last paragraph of code that starts with the line

place it where the widget with comments will be visible.

Ideally, it should appear under every article. Manual installation in this case is labor-intensive, especially if the amount of materials is in the hundreds.

We offer a simpler option. Open the file for editing:

\templates\template_folder \html\com_content\article\default.php

If this file is not in the folder with your template, use another path:

\components\com_content\views\article\tmpl\default.php

We find the line in the file:

She is responsible for outputting the full version of the material.

Place the third paragraph of code immediately after it and save the file.

Why do you need a widget?

The main task performed by a small program is the connection between the site and the VK group. No matter what the focus of the resource and community, they need synchronization. You don't need to understand programming; just follow the simple instructions to install the program. Applications provide two-way communication between the site and the group. For example, a user, by clicking on the “Like” button, will put a mark from his profile on the resource. The utility helps to distinguish a public page from many competitors and attract visitors.

Pros and cons of the VKontakte widget for the site

1. What are the benefits of installing comments on the VKontakte site?

There are several of them:

• No load on the resource database. The VKontakte widget does not use it to store comments; they remain on the servers of the social network. For dynamic sites based on Joomla or WordPress, this is very important because it avoids excessive load on the database.
• Installation of the widget is possible on any website, no matter what engine is used.
• Installing and configuring the widget is simple.
• Additional promotion on social networks is another important advantage that can be realized using comments. A small modification will ensure that they are displayed both on your website page and on the VKontakte user page. In addition, the same comment containing a link to your resource will appear in the news feed of this user's friends. Considering that many people have hundreds of friends, the opportunities for advancement without having to pay for them are exciting.
• Identifying the commentator is easy. If necessary, you can view his profile and send a personal message through the social network.
• Thanks to the widget, you will be spared spam comments and toxic users.

Top 6 useful articles for managers:

1. How to brainstorm among employees
2. Stages of the sales funnel
3. Pareto's Law in business and life
4. What is traffic and how to calculate it
5. Sales Conversion: 19 Reasons for Low Conversion
6. Call back on the website

2. Disadvantages of the comment widget

• Only registered users of the social network have the opportunity to leave comments. True, every year the relevance of this disadvantage decreases: finding a person who does not have an account in VK is becoming more and more difficult.
• You cannot receive email notifications about new comments. You can eliminate this drawback using a plugin for WordPress.
• Not all users will want data from their VK profile to be displayed on your website, and therefore will not comment on the materials. Unfortunately, there are no solutions to this problem; anonymous messages are not provided.

Widget setup

Now you will see five blocks of different directions, as in the screenshot. Let's look at them in detail, according to numbering:

No. 1. In the first column you need to indicate the address of your own group.

No. 2. Here you can select one of the options you are interested in:

• “Participants” – the application will show the avatars of everyone who participates in the group.
• “News” – shows the latest news content from the community.
• “Name only” – only the name of the public will be shown on the resource.

No. 3. Here you can configure the size of the application - width and height.

No. 4. In this block, the color of the background, keys and text changes.

No. 5. Here is the embed code for the resource.

Change the settings as you wish, it's all up to you. Then they need to be saved.

Instructions on how to add a VKontakte widget to your website

Each social network has a “Developers” section; for VK it is located at https://vk.com/dev.

It contains useful information about creating applications on VKontakte’s own platform, thanks to which the site or smartphone application acquires some of the capabilities of the social network:

• Mobile applications
  . Access to API methods and simplified authorization using SDK for mobile platforms: iOS, Android, Windows Phone.
• Websites and widgets
  . External web services or widgets installed on websites. Sites use OAuth server authentication or Open API client authorization for authorization and calling methods. Most API methods are available.
• Applications for other platforms
  . Client applications for various platforms. Requires authorization using the OAuth protocol.
• Gaming platform
  . For applications created using the Javascript SDK or Flash SDK, a game catalog and an API for accepting payments are available. For mobile applications using the Mobile Platform SDK, a mobile gaming platform is available.

[expert]
This platform allows you to launch a common authorization system for the site and the social network VKontakte. This is described in detail in the section https://vk.com/dev/main.

But since we are now interested in how to install a VKontakte widget on a website, let’s go to the https://vk.com/dev/sites section. Owners of web sites are offered the following options:

• Comments.
• "The writing is on the wall."
• Communities.
• "I like".
• Recommendations.
• Polls.
• Authorization.
• Publishing links.
• Subscribe to the author.

To make a VKontakte widget for a website, you first need to determine which option from those offered by the social network is right for you. Having selected it from the list, go to a page with a field in which we enter a link to the community or VK group.

The next step is to specify the type and size of the widget.

Background, text and button colors are saved in HEX format.

Finally, we get the HTML code for insertion, copy it, and paste it into the resource page or template. As a rule, special places are provided for placing widgets on the site.

Removing a widget

To remove an application from a community you need to:

• Click on the “Management” tab.
• Select the application to be deleted and click “Change”.
• Next, click “Delete application”.

The removal procedure is simple and any user can handle it.

What other plugins might be useful?

The VKontakte plugin for a WordPress site is an irreplaceable thing. It is with their help that we create a socially interesting project. And since among your readers there are many users of VK and other social networks, the following developments may be useful to you:

• Meks Easy Social Share (social share buttons),
• VK-photos (gallery on the site from VKontakte photos),
• VK Poster Group.

Meks Easy Social Share

Adds social media “Share” buttons to posts and pages. Supports Facebook, Twitter, Reddit, Pinterest, email, Google+, LinkedIn, StumbleUpon, WhatsApp and VKontakte. All these buttons will appear on your WordPress site after activating and configuring the plugin.

Interface in English. But all the settings are clear.

Several styles are built-in, which allows you to design buttons in accordance with the site template. You can set a custom color. Choose one of two options: buttons with a background or with a border on white.

You can insert buttons anywhere on the blog, not just before and after the post. You can add a subtitle by entering it in the appropriate field.

Meks Easy Social Share is not the only such plugin for WordPress. VKontakte share buttons – there are many analogues with such words in the name. For example, the VK Share Button plugin.

VK-photos

The plugin allows you to add to your website a gallery of photos posted on the VKontakte social network. What distinguishes this WordPress plugin (“a gallery like VKontakte,” users say) is the presence of three built-in styles. One of them really looks a lot like a VKontakte photo album.

In the main settings you need to add either a group or user account. There can be up to 10 pieces. Customize the design: gallery dimensions, number of photos, “Show more” button, etc. In the “Templates” section, select one of three. And add the album to the site using the shortcode. All tips on using the plugin are in the “Help” section.

Unfortunately, the last update to this plugin was 2 years ago. It is not a fact that it will work adequately on new versions of WP.

VK Poster Group

VK Poster Group is a WordPress VKontakte plugin for auto-posting posts. This is the simplest tool for quickly posting WordPress posts to the VK social network group. There are no unnecessary settings. Free, but with developer support. Woocommerce support.

How to setup? Go to settings after installing and activating the plugin. We press the red button - step 1. We are transferred to VKontakte, to the developers section. Here you need to create an application. Then go to “Settings” and copy the application ID. Then return to the plugin settings and paste the ID into the appropriate field.

Immediately after this, step No. 2 will be available. Click on the second red button that appears. Will transfer it to the social network. You need to agree to the offer (give access so that the plugin can publish posts on your behalf). Paste the resulting token (access key) into the appropriate field in the settings of the VK Poster Group plugin. Next, let's add the ID of the group in which we need site records. And let's make the rest of the settings. Let's save the result. And we will enjoy auto-posting.

“Allow community to write” widget

Who we recommend:

businesses that engage in content marketing, blog authors.

What gives:

increase in conversions to join the group; increasing touch points with the business.

Another widget that can become a point of contact on an external site is “Allow the community to write.” Using it, you can deliver your news directly to the subscriber's personal messages. As a result, users who subscribe to news in private messages will always be in your information field. Potentially, the tool can compete with traditional mailing lists.

Just like the ethical newsletter, it is easy to unsubscribe from the “personal” newsletter.

Finally, the advantages of widgets from the point of view of site owners and visitors: