The translation was generated automatically and may contain mistakes
Communities
A community widget will link your site closely to the relevant group or official VKontakte page.. The widget allows you to subscribe to community news without leaving the page.
The widget can display photos of the user’s friends and other community members. The “Signature” link provides demographic statistics for participants.
Instead of photos, community news can also be displayed. In this case, at the bottom of the widget will be located a small block with a photo of the closest friend of the user from among the signatories and a list of other friends in the community. When scrolling down a block, older entries are automatically loaded.
Widget connection
To add a community VKontakte widget to your site, follow these steps:
Step 1. In the tag <head> Add a link to the website openapi.js :
<script src="https://vk.com/js/api/openapi.js?169" type="text/javascript"></script>Step 2. Add code to the body of the site page to initialize Open API:
<script type="text/javascript">
VK.init({
apiId: ?1?’АШ_API_ID,
onlyWidgets: true
});
</script>Read more about initialization of transport .
Add an element to the body of the page <div> , which will display comments, give it a unique id, and add a widget initialization code to it. For example:
<div id="vk_groups"></div>
<script type="text/javascript">
VK.Widgets.Group("vk_groups", {mode: 0, width: "220", height: "400"}, 1);
</script>This code adds a community block of the standard kind: 12 users are initially displayed. The number of users will be selected automatically based on the parameters width ?1? height .
If your website is already in use Open API , adding a widget is even easier. Simply add widget initialization.
Additional settings
Method VK.Widgets.Group It takes parameters:
- •
element_id(string), a mandatory parameter —idthe element that will be the container for the community block. Our default constructor uses a valuevk_groups. - •
options(object) — block options with widget. An object that can contain fields:- •
widthThe width of the block in pixels. Minimum value:120. With meaningautoadjusts to the width of the parent block. - •
heightThe height of the block in pixels. Minimum value:200. Maximum value:1200. Please note, formode = 1or3the parameter is not available, the height is determined automatically depending on the size of the parent unit. - •
mode- Display mode. Possible values:
1- display only the name of the community;
3Showing community members;
4Building a community wall. - •
no_coverDisplay the community cover.1not showing,0- display (by default). - •
wideExtended mode. Possible values:0- off,1- on. Ifmode = 2This mode adds a “Like” button and a community photo. - •
color1- Widget background color in formatRRGGBB. - •
color2Color of text in formatRRGGBB. - •
color3Color of buttons in formatRRGGBB.
- •
- •
group_idCommunity ID. indicated without a sign-(minus).
Events
Clicking the button Sign up Widget transmits the event widgets.groups.joined . If a member leaves the community with a widget, an event is passed widgets.groups.leaved . You can process these events using Open API .
Example of use
<div id="vk_groups"></div>
<script type="text/javascript">
VK.Widgets.Group("vk_groups", {mode: 0, width: "400", height: "400"}, 1);
</script>Код виджета
To add a widget to your site, simply copy the code to paste to the page you want to place the widget on.
