Add a “Like” widget (Vkontakte) and a Facebook Like Button (Facebook) to your blog. Your text for the “Like” button on VKontakte. Dynamic Content Add Like Button
What do VKontakte likes give? Let's learn how to like VKontakte posts and pictures. We look at the list of all the people who put hearts under a certain entry. We use the “Like Meter” application, which allows you to see which posts on the wall get the most hearts. Let's learn how to get likes on your posts.
"I like" in VK is a way to express agreement with the author of a post, to approve the information contained in it. Thus, every VKontakte user can feel involved in a particular post.
Button " I like"VKontakte is presented in the form of a heart. It has a very aesthetic appearance. Widget " I like" appreciated by millions of users. They regularly click on this button. Button " I like" in VK is located on the right side of the post. It is a light blue heart, and after clicking on it the heart turns blue.
How to like a postHow to put a heart in VKontakte? Very simple.
Now you know how to make hearts. You can like any post you like. There are usually a lot of hearts in public pages and groups, since many users like to give likes. Posts in popular public pages gain hundreds of likes in a couple of minutes. A mesmerizing sight: you walk into " News" and you see how a certain post gradually gains a lot of likes. Users simultaneously like a fresh post, as soon as they see it in their feed.
How to like a pictureLet's also look at how to put hearts next to a picture. That's easy too.
Thus, we let you know that we like the picture.
Why do you need likes?Some people don’t understand why likes are needed on VKontakte. The answer is simple: so that a person can demonstrate that he likes the post, and the author of the post can see that the post caused positive emotions among users. Why does the author need to know how many users liked the post? In order to be aware of user preferences and know what kind of information should be posted in a group or public.
What do VKontakte likes give? People see that the post has received a lot of likes and understand that it deserves attention. People won’t just pass by such a VK post. They will definitely read it and think about the information contained in it.
When did likes appear?Many people are interested in when likes appeared on VKontakte. This happened relatively recently. The button appeared on October 12, 2010. Only a little over three years have passed. And for those who have been registered for a long time, it seems as if this function has been around for a very long time. And it’s not surprising, because now it’s difficult to imagine your activities on a social network without this button.
The post in the public page received the largest number of likes “ Music" There were 1,500,000 of them.
How to see likesIf you want to know how to view VK likes, just hover over the heart. You will immediately see a list of people who liked the post.
You can also click on the window that opens, and then you will see the full list of likers.
Now you know how to see other people's likes. It's very simple. Perhaps, impressed by the huge list, you too will want to click on the heart. We’ve already talked about how to like VKontakte.
"Lykomer"VKontakte has an interesting program that allows the user to see which posts on his wall receive the most likes and who likes the most actively. The program is called " Likemeter" There is no need to download the VKontakte like meter, just launch the application at this address.
If you have a website or blog, why not use these social networks to build up, making the project more and more popular.
The “like” buttons from Vkontakte, Facebook, as well as the Tweet and Google +1 buttons, which will be located at the end of the article, will help us with this.
They work very simply! When a visitor to your site reads an article and likes it, then most likely he will want to express his opinion about it.
But it makes it difficult for many to leave a comment, they need to enter “Name”, “Mail”, “Site” and “Anticaptcha”, and then they see the “I like” button, click on it and the job is done, the link to your post will appear in the visitor’s social feed and all his subscribers and friends will be able to see it.
And these are new free visitors, plus search engines love social signals and can easily rank such a page higher in the TOP search results.
In the last lesson, I talked about icons located vertically or horizontally anywhere on the site - be sure to read the article.
“I like” button from VKontakteIn order to add a “like” button to a site, first go to the vkontakte button registration page and fill out the fields with the name of your site.
Now you need to copy "1 Part of Code" and add it to the file header.php before the closing tag .
| 1 2 3 4 | < script type= "text/javascript" src= "http://userapi.com/js/api/openapi.js?49" > < script type= "text/javascript" >VK. init(( apiId: 2970045, onlyWidgets: true ) ) ; |
VK.init((apiId: 2970045, onlyWidgets: true));
Since I output it after the text of the article, so I pasted the code into the file single.php.
| 1 2 3 4 | < div id= "vk_like" > < script type= "text/javascript" >VK. Widgets. Like("vk_like" , ( type: "button" , height: 18 ) ) ; |
VK.Widgets.Like("vk_like", (type: "button", height: 18));
Reload the page and see the result.
In order to add a “google +1” button to a website or blog, follow this link and you will be taken to a simple constructor page.
Select the button size (small, medium, large). Don't forget to select Russian language.
Then paste “1 Part of Code” in the place where you plan to install the “google +1” button. I output it after the text of the article, so I pasted the code into the file single.php.
| < g: plusone size = "medium"> |
| 1 2 3 4 5 6 7 8 9 | < script type= "text/javascript" >window. ___gcfg = ( lang: "ru" ) ; (function () ( var po = document. createElement("script" ) ; po. type = "text/javascript" ; po. async = true ; po. src = "https://apis.google.com/js/ plusone.js" ; var s = document. getElementsByTagName("script" ) [ 0 ] ; s. parentNode. insertBefore(po, s) ; ) ) () ; |
window.___gcfg = (lang: "ru"); (function() ( var po = document.createElement("script"); po.type = "text/javascript"; po.async = true; po.src = "https://apis.google.com/js/ plusone.js"; var s = document.getElementsByTagName("script"); s.parentNode.insertBefore(po, s); ))();
Reload the page and see the result. If you don’t like the button, you can change its settings in the designer.
Tweet buttonIf you want to install a “tweet” button from the social microblogging network twitter, follow this link and you will be taken to the constructor page.
Choose from the proposed buttons the most suitable one for you. I liked the "Send link" option.
Select the Russian language in the settings and copy the code to the place where you plan to display the “tweet” button. In my version this is the file single.php.
Reload the page and enjoy the result.
In order to add the “I like” button from Facebook, you need to follow this link and make the necessary settings for you.
URL to Like– we do not fill in this field.
Send Button (XFBML Only)— I unchecked the Send Button checkbox so that there would be no additional “Send” button.
Layout Style– button format. I liked botton_count, but you know the taste and color, as it happens with friends.
Show Faces– check the box to see the avatars of those who liked the article.
WIdth– indicates the width. I left everything unchanged.
Verb to display– choose what inscription will be located on the facebook button. There are only two options here: “like” - I like or “recommend” - I recommend.
Color Scheme— choose a color scheme. For a dark (dark) or light (light) site.
Font– you can specify a specific font for the button name ( arial, verdana and others).
The first part of the code is placed before the closing tag in file footer.php.
| 1 2 3 4 5 6 7 8 | < div id= "fb-root" > < script>(function (d, s, id) ( var js, fjs = d. getElementsByTagName(s) [ 0 ] ; if (d. getElementById(id) ) return ; js = d. createElement(s) ; js. id = id ; js. src = "//connect.facebook.net/ru_RU/all.js#xfbml=1" ; fjs. insertBefore(js, fjs) ; ) ; |
(function(d, s, id) ( var js, fjs = d.getElementsByTagName(s); if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js. src = "//connect.facebook.net/ru_RU/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs); )(document, "script", "facebook-jssdk");
We add the second part of the Facebook “like” button code to the place where the button will be displayed. Under my text, it means the file single.php.
| < div data- send= "false" data- layout= "button_count" data- width= "450" data- show- faces= "true" > |
Reboot and see the result.
After some adjustments to the location of the “like” buttons on VKontakte, Facebook, as well as “Tweet” and “Google+”, I got this result.
That's all! I hope my article will help you in setting up and installing social media buttons. Don't miss the next posts, subscribe to blog updates.
If something doesn’t work or you have questions about the topic, write to support or leave a comment, I will definitely help!
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 on a special documentation page for the “I 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.
In general, there are a large number of plugins for Likes, for example the excellent Pluso plugin (it’s more for share than for like, but the plugin is excellent), but if you still need to install standard likes, then I’ll provide a short instruction (primarily for myself;)) .
“I Like” widget – VKontakte Likes for the siteTo create VKontakte likes, go to this page http://vk.com/dev/Like, then customize the appearance of the button itself, enter the Name, Address, Main Domain and Subject, or select the desired site from the drop-down list. We select the button option, when selected, an example of the future button will be shown below, select the height of the button and its name. 
Click save and get a code for posting on a site like this: 
Then code that looks something like this:
VK.init((apiId: 4505264, onlyWidgets: true));
insert it into the code of your site before the closing tag; for sites using the WordPress CMS, this code must be added to the header.php file.
Important! If you have previously added VKontakte comments or some other VKontakte widgets to the site, then this code will already be posted on the site; you do not need to add it twice.
The second part of the code, which looks something like this:
VK.Widgets.Like("vk_like", (type: "button"));
insert it into the code of your site in the place where the “Like” button should be displayed; for sites using the WordPress CMS, this code is most often added to the single.php file.
Like Button for FacebookClick “Get Code” – and in a pop-up window we receive the code for posting on the site: 
The first part of the code, which looks something like this:
(function(d, s, id) ( var js, fjs = d.getElementsByTagName(s); if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js. src = "//connect.facebook.net/ru_RU/sdk.js#xfbml=1&appId=492073974146494&version=v2.0"; fjs.parentNode.insertBefore(js, fjs )(document, "script", "facebook- jssdk"));
We place it in the code of your site after the opening tag.
Important! If you have already placed a Facebook comment widget or other Facebook widgets on your site before, then this code is already posted on your site and you do not need to install it twice.
The second part of the code, which looks something like this:
copy it to your website in the place where the Like button will be displayed.
Important point! When copying code into files of any CMS, you need to replace the data-href parameter in the second block (site address):
to the code for the permanent links of your site, for CMS WordPress this is , and we get the following code for the second block, which needs to be inserted into the place where the Like button is displayed:
