Insert the “Like” button from VKontakte. Your text for the “Like” button on VKontakte

Hello everyone, friends! A few weeks ago I wrote, and . Today we will continue to use social networks to promote the site. In this post I will write how the I like VKontakte button and the I like Facebook button are installed on the site.

How to install the “Like” button on VKontakte

In order for you to see a beautiful VKontakte button on your website, you need to take only three steps:

Add website to social media VKontakte network;

Tune appearance buttons;

Copy the code and paste it onto your website.

As you can see, the I like button is installed on the site very quickly. Now let's talk about everything in order.

1. Go first right here and connect your site if it is not there. To do this, fill in several fields. Here's how I did it:

2. Now you need to customize the appearance of the button. Below you can always see what you got. For example, I chose a button with a miniature counter. The name of the “like” button. And I left the height at 22 px.

3. After you have customized the appearance of the button, you need to copy the code and paste it into your website. First, copy the first part of the code

and insert it into header.php before the /head tag (if the site is powered by Wordpress). After that copy the second part of the code

After inserting the second part of the code, you should see a “I like” button from VKontakte on your website. If you have any problems, write in the comments, I will try to help: smile:.

How to Install the Facebook Like Button

To get started, go here. If you are not logged in, please do so. Now on this page we need to fill in some fields first. Although they are on English, but it’s okay, we’ll figure it out: smile:.

URL to Like – . We leave this field empty because we want to install the button on all pages;
Height – height. You don’t have to set anything, by default the button height is normal;
Layout – here we need to specify the appearance of the button. I chose the last option button_count, in my opinion it is the best. You can try another option and see how it looks. If you like box_count or standard better, then please put the one you like.
Show Friends" Faces – show. I unchecked it because I don’t want to show avatars.
Width – width. I didn’t set anything, if the width of the button doesn’t suit you, you can specify it.
Color Scheme – color scheme. I left it at the default light.
Action Type. If you select like, then the inscription on the button will be “like”. And if recommend, then “I recommend.” I chose the first option like.
Include Send Button - Include the “Send” button. I don't need it, so I unchecked it.

After filling in all the fields, I got it like this:

Now click on the “Get code” button to receive the code.

You need to place the first part of the code in the footer.php file before the /body tag. And the second part is in the place where you want to see the “Like” button from Facebook on your website. You can place the “Like” button from VKontakte after the code in the single.php file.
That's all for me. How do you like the article? 😉

It took me a few days to fully understand all the bells and whistles of the “I like” buttons on VKontakte and Facebook. What about dynamic content? How to change the text of a post on a wall?
I’ll write in detail about Facebook in another article, the principles there are different. For now I want to focus on the popular “Like” button from VKontakte.

Now it is already very different from the first prototypes, which were simply links to contact handler pages, and from those that already had counters.

Currently, the “I like” button is part of the Vkontakte API, it is simply connected with the “only widgets” mark, if I’m not mistaken, and is a widget that uses the main Vkontakte API.

This means that we can safely use all the capabilities of this API, often removing the “widgets only” restriction when connecting. Interestingly, until recently, there was no information on the capabilities of the VK.Widgets.Like() function, so I had to suffer myself. But now everything is explained to us in special page documentation for the “like” button widget.

So, to connect the “I like” button, you need to go to the VK “developers” website -> “Widgets and third-party sites” -> “I like””. If necessary, connect the site and select button parameters.

VK.init((apiId: 2887573, onlyWidgets: true));

We connected API scripts and application initialization to work with the VKontakte API itself and specifically with this particular case - the “I like” widget.
In the right place on the page we insert the widget button code:

Then, at the right moment, for example when document is ready, we display the button:

VK.Widgets.Like("profprogru_vk_like", (type: "button"));

That's it, now we have a button with a counter. But that’s not enough for us, right?

How to make a “like” button on VKontakte for a site with dynamic content, where does the page url change?, or just a few buttons with different links? There is only one principle, let’s modify the code:

VK.Widgets.Like("profprogru_vk_like", (type: "button", pageTitle: "Free text", pageDescription: "Pop-up text", pageUrl: "here is a link to the page"),666);

Now let me explain, we are updating the button. In curly brackets are the parameters of the “I like” widget, type: button with a counter, VKontakte post text, pop-up window text, page link and 666 is a unique link identifier for counting likes. Those. we can install several “I like” buttons with different identifiers and one link, or even several completely different “I like” buttons with different links and display.

I hope the information was not useless.

Hello! Today I will tell you how to quickly create an application and insert a "Like" button from social network without unnecessary plugins.

Maybe you noticed that the other day I finally added this button to myself after posting. “Finally” I wrote not for nothing, since there were problems connecting this button to the VKontakte API, as a result of which I received the message “Open API security breach” and an endlessly running progress bar. As it turned out, the whole point was in the banal writing of the site address in the “Open API” settings in VKontakte itself (I’ll write about this below).

So let's add a "Like" button.

First, let's go through our VK profile (necessarily through our own, since we will need to create an application). Next, go to the widget creation page and see a similar form:

The first field is “Site/application” - here we can immediately create an application without unnecessary movements, but you know, I clicked like that and it is created somehow in a crooked way.

Creating and configuring an application

So it’s better to do the extra work and go to the application creation page, enter any name in the appropriate field, then select the type: “Website”, and fill out the description field, but this is not necessary. Next, click “Proceed to download the application” and enter the captcha.

All! The application has been created and we have a form with its settings:

The first tab is “Information”, it is now active for you, you can load an icon for the application, enter data, select a group.

The next tab is “Settings”, it is the most important! Please note that at the very top the ID number of your application is highlighted in bold (it will connect your button), then there is a “Protected key”, do not touch it.

Site address: http://yoursite.com/ (the address to which you connect the Open API. If you use this application on another site or on a localhost, it will not work. The application is completely tied to the site address specified here.)

An extra slash in the address settings and your button will not connect legitimately and will display the error “Open API security breach”.

That’s it, save the changes, you don’t have to configure the remaining tabs.

Setting up and inserting a button

We return to the button creation form and here your application should appear in the “Site/application” field in the drop-down list, select it.

The next item is “Button options” - choose which one suits your design best; below the form you will immediately see a clear example of a button. On at the moment There are 4 types of button:

Button with text counter
Miniature counter button
Miniature button
Miniature button, counter on top

The button type has been selected, now the item “Button name”, so far there are 2 options (choose any one you like):

I like
This is interesting

Well, finally, we come to the “Embed code” field. When you select your application in the first field, its ID is automatically inserted into the code. This code needs to be inserted in two places on your site, the developers specifically commented on it, but I’ll also explain it just in case.

First piece of code:

VK.init((apiId: YOUR_APP_ID, onlyWidgets: true));

you need to insert inside the tag:

And the second piece:

VK.Widgets.Like("vk_like", (type: "button"));

you need to insert it in the place on the site where the button should be displayed.

Do not paste my code, I gave it as an example, especially since I have the wrong button settings and the ID is not specified.

And that’s it, your button is ready!

Button Wrap

As you noticed, the button is placed in a div with the ID "vk_like", where the style of its display is specified. And in this style, the developers introduced the rule:

Clear: both;

As we know, this rule cancels the flow of the element from the right and left edges, i.e., if you want your button to be in line with the others social buttons. networks, you can’t even dream of it, it will proudly stand on new line. To avoid this and still return the button to the row, replace:

So we cancel the cancellation (:-D) of the element's wrapping, and "!important" increases the priority of your style, i.e., your rule will be the main one in the eyes of the browser.

Well, it seems like I said everything I wanted)))) I hope that you understood everything and were able to insert the button!

And if you still have a long time before inserting a button, since you don’t have your own website yet, then maybe Cheboksary website creation will help you with this.

How to add a Contact “Like” button to your blog

So, to install this button on your blog: