I like the Vk button. Add the “Like” widget (VKontakte) and Facebook Like Button (Facebook) to your blog
I noted the importance of SMO (Social Media Optimization) in website promotion. Now let's talk directly about how to do social optimization on your website, or more precisely, how to add social buttons of popular networks to your website.
First, I’ll show you how it actually should look on the site. On many blogs and news sites, at the bottom of any article you can see something like this:
These are the social buttons, thanks to which SMO is achieved, and then social activity. This article is devoted to the question of where to get the code for these social networks. buttons and how to correctly install them on your website. Let's first consider installing Google+.
1. Add a Google+ button to the site
Let's start by getting the Facebook button code. To do this, visit this page: https://developers.facebook.com/docs/plugins/like-button. You should see the following picture:
At the top right you can see what the button will look like on your website. Let's look at the parameters that can be set:
1. URL to Like
This is an optional parameter. If you leave the field blank, each page will have its own individual like counter. If you enter a specific URL there, the counter will be single (likes are summed up from all pages of this site).
2. Send Button
Add or remove a button for sending messages. I recommend removing this button, because... Our goal is simply to put a “like” button, although perhaps you have completely different goals.
3.Layout Style
Button display style. Personally, I like standard best.
4. Width
The width of the button in pixels. I usually set no more than 100 pixels.
5. Verb to display
What will be displayed on the button: “I like” or “I recommend”. I usually choose the first option (the default) because it is more effective way motivate the user to like.
6.Color Scheme
Color range: either white or black.
7.Font
Just setting the font for the inscription "I like".
After setting the settings, click on the “get code” button and place it on the site. Common button code for facebook:
(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") ); 2.2. I like from VKontakteNow let’s look at how to get the “like” button code from VKontakte. To do this, go to the following page: https://vk.com/dev. You should see the following page:
First you will need to add a new site. To do this, select the option to connect a new site from the “site/application” drop-down menu:
After adding a new site, save it. Now select the desired site from the drop-down menu. This is followed by a small number of parameters: “button option”, “height”, “button name” - this is all customizable to your taste. At the end there will be code for the button:
VK.init ((apiId: 2872188, onlyWidgets: true )); VK.Widgets.Like ("vk_like", (type: "button") ); 3. Add a tweet button to the siteAs in previous cases, first go to the location where you received and configured the button.
Hi all! Today we will talk about such features as the “I like” button from VKontakte and Facebook. I’ll tell you how to install a “I like” button on your website. I like how to set up a button from VKontakte.
Visitors read articles on your blog or website, you wrote great material, “well done,” your readers say, but they’re too lazy to comment... Well, you either need to log in or fill out the form fields: your name, write a comment, and also enter a captcha, where the symbols are not always legible... This is where the button I like will be useful! A person will click on it and that’s it!
And after a while, when you go to your article, hover your mouse over the “I like” button - a window will appear where all the people who really liked your article with their avatars will be shown, by clicking on which you can go to the person’s profile on the vkontakte website or facebook. And, if you want, you can get to know him, and maybe even collaborate in the future!
Let's move on to installing the I like button from vkontakte.ru
How to install a “like” button on a website or blog?
Go to the page "I like" widget here's the this link. You will see a form for setting up the button I like from vkontakte.
Here I think everything is simple - fill out the form fields, name, site address, main domain for the site, select the button option I like from VKontakte. Select the height of the button (this option appeared recently). Pay attention to the embed code; insert the first part of the code before the words between the tags of your site. If your blog is made on the WordPress CMS, then the tags are in the header.php file. Paste the second part of this code into Right place of your site, where you would like to see the button I like it from vkontakte. Again, if your blog is made on WordPress, then paste the code into the single.php file of your theme.
Setting up the button I like from VKontakte.
The “like” button on vkontakte has several more interesting settings options, in addition to those explicitly indicated in the form itself. Let's look at them:
Width- I like the width of the button
pageTitle- page title (displayed on the VKontakte wall)
pageDescription- short description(displayed on the wall)
pageImage- address of the miniature picture (displayed on the wall)
text- your text will appear on the VKontakte wall (no more than 140 characters).
These parameters are set in the line VK.Widgets.Like("vk_like", (type: "full")); separated by commas after the attribute type:"full". It will look like this:
VK.Widgets.Like("vk_like", (type: "full", width: 100, height: 20, pageTitle: "I like the button", pageDescription: "How to install the I like button on your website", text: "Interesting , useful article!"));
I'll finish with the button I like from VKontakte. A few more words about the facebook button, everything is much simpler here! Below is the button code, download it at the end of this article, and paste it onto your page, where you want to see this button.
You don't need to change anything in the code.
That's all for today! Now you know how to install the “I like” button from vkontakte and facebook on your website or blog. I like how to set up a button from VKontakte. I hope you found this article helpful. I advise you to receive new articles by e-mail, there is a lot of new interesting information, free video courses, scripts and competitions on my website ahead.
Hello, dear readers of the blog site. Today I want to talk about the rather interesting topic of adding and installing buttons on your website from social networks, and (“I like” or in other words “like button”), as well as adding a new button “Google +1”.
I think that many people already have likes from VKontakte and Facebook, but at the end of this publication I will say a few words about them. But mainly today I would like to talk about the relevance of adding a “Google+1” counter to the site (google plus one) and the impact of its readings on this search engine.
Should you add a Google +1 button to your website?By the way, not so long ago, a study was conducted on the popular bourgeois resource Seomoz on the impact of adding article announcements on Facebook to website promotion. Based on the results of this study, the use of the like and retweet button is justified.
In general, it’s not at all difficult to add these buttons to your website if you have at least basic knowledge of Html and CSS (). Moreover, you don’t have to worry about their cross-browser compatibility, because in all of them everything will look like chicks and pussies.
And if you are completely unwilling to get into the site code, you can use the appropriate or . But the problem is just different.
All these extra buttons, as a rule, are a script that is loaded from the VKontakte, Facebook or Google servers. Those. in any case, they will reduce your site, and this criterion has been taken into account for quite a long time in search results, at least by Google. Well, if the server from which the script is loaded is temporarily unavailable, then this can significantly slow down the work of your resource.
It follows from this that their addition must be justified by their expediency. If we can say about “Like” that most likely it will be useful (personally, I prefer to use not a separate script for the “Like” buttons from Vkontakte and Facebook, but a single script), then about “Google +1” it is still not entirely clear and transparent.
Firstly, its use has just begun and there is no objective data yet on the impact of its addition to the site, and secondly, in Google search results it is only available for the global search Google.com and only if you log in as an authorized user:
That is, if we now take into account only the Google.com results, then users have the opportunity to recommend the resource they like by simply clicking on the “Google +1” button (by clicking again, you can take back your vote).
But to do this, the user must go to the page of the site he likes in the search results, rate the publication and return back to the results to vote and add his “plus one”. What a conscious, responsible and loyal user this turns out to be. Probably, there are such people, but mostly in the bourgeoisie.
Well, for the RuNet the probability of such loyalty will not be very high. That’s why Google is encouraging all webmasters to add their “+1” button to their resources. Indeed, in this case, the user will not need to return back to the search results (which by this time may already be closed in his browser or buried under a heap of open pages or tabs), because he will be able to cast his vote directly on the site page with the publication he liked .
Why does a global search engine need this? The answer is obvious - to increase the relevance of their results (they will have a bunch of free website quality evaluators) and in this way to attract as many more users (due to high-quality search results) and, accordingly, to increase their earnings from contextual advertising as a result.
By the way, Google suggested that I install the “+1” button in my account:
The question, as always, is selfish, which means you should take seriously the influence of the “Google +1” button on the promotion of your site - it may turn out to be a really working tool. But let's see how it actually turns out. If clicks on it really are one of the ranking factors in the regional results of this search, then we will definitely put “Google plus”, but if not, then we will put it as an experiment to make sure of this.
How to insert a Google+1 button into a WordPress blog?Adding it to your site, as I already said, is not at all difficult. First, you have to go to and check the boxes in the desired position, thereby selecting the language of the signature for it and its size:
By clicking on the “Advanced settings” inscription, you will also have access to the ability to disable the counter for the number of people clicked on “Google plus one” by simply unchecking the first item:
I'm not sure about the purpose of the remaining settings of the future button. Actually, now all that remains is, following the recommendations of the developers, copy two fragments of the “Google +1” code and paste them into the required places in any of your website engine template files (cms).
Those. we need to insert the script calling code either into the head of the web pages between the Head tags, or at the very end of the visible part HTML code just before the closing Body tag:
(lang: "ru")
And the second piece of code needs to be inserted directly into the place in the site template (read about, and also about how they are structured) where you want to see a nice “Google plus one” button.
It goes without saying that with using CSS properties, you can clearly position it relative to other elements. In general, this will be very easy to do for WordPress, and I’ll tell you about it now.
For those webmasters who have not yet become familiar with , as well as CSS, I’ll tell you how to insert a “Google +1” button (and at the same time “Like” from VKontakte and Facebook) in WordPress using plugins specially designed for this, and in Joomla - using the universal MultiAds plugin, designed to insert the elements you need at the beginning or end of all site pages.
So, if you are not afraid to get into the code of your WordPress blog theme (after doing it first), then let's get started. I inserted the first part of the code into the footer.php file, which you can find in the following path by connecting to the hosting via FTP using the FileZilla program, which you can read about:
/wp-content/themes/folder with your theme
At the very bottom of the footer.php file you can find the closing Body tag and immediately before it insert the script calling code:
Save the changes made and now open for editing in simplest HTML And PHP editor Notepad++ (described) single.php file from the same folder with the theme you are using. It’s a little more complicated here, but through experimentation you can find the right place to insert the “Google+1” button, having previously enclosed it in a container of HTML tags Div.
In the Div container, I registered the class class="google", for which I added in the file with cascading style sheets of my theme (/wp-content/themes/folder with your theme/style.css):
Google (float: right; margin: 10px 10px 0 0;)
If you need to insert a button quickly, without writing CSS properties in style.css, you can use:
Although, of course, everything will be better CSS styles take it out of the code into separate file. The “float: right” property sets the text to float to the right and wrap around your Google+1 button, and the second one sets the padding to the left and top of it.
If you want to add the “+1” counter to the main page WordPress page, then the Div container described just above must also be inserted into the index.php file from the folder with the theme you are using. I think you can find a suitable place for it without me, at least at random.
Why am I talking for so long about inserting a button yourself in WordPress, instead of starting the conversation right away with the plugin? After all, there’s nothing special to explain there. It’s just that if you have the opportunity to do without a plugin, then be sure to do it - your hoster’s server will thank you for it, and search engines will probably respond positively to it good speed loading your blog.
But if all this doesn’t quite suit you, then you can use the plugin of the same name for WordPress “Google +1”. passes in the usual way. Its settings will be located in the “Options” menu - “Button +1”.
As you can see, the settings in Russian are not only very simple, but also understandable. I repeat that any additional plugin in WordPress is evil and needs to be dealt with. Read about how to insert Google+1 into Joomla at the end of the article. Actually, using the plugin described there, you can insert absolutely any thing into articles, for example, blocks or Adsense.
“Like” buttons from VKontakte and Facebook for the siteIn principle, when self-installation“Like” buttons from the social networks VKontakte and Facebook on WordPress, without using plugins designed for this, everything will be similar to the process described just above, except that you may choose a different place for them.
The Facebook “like” code can be generated on this page. If you paste the address of your home page, then you will like exactly this page, and if this field is left blank, then you will like the page on which the Facebook button is installed. Oh how!
The rest of the settings are up to your taste, and you can see what happens in this case in the right top corner. To get the code, click on “Get code”. There you will be offered two code options. You can use the one that will work better.
You should insert the code for the “Like” button in WordPress exactly in the place where you want it to be displayed, and to position it, enclose the code in a Div container and write in it CSS properties directly (via Style attribute) or through (by analogy with the “Google +1” described just above)
Now let's move on to Vkontakte and its “Laika” variant. You can get the code on this page. You can choose appearance and the label on the button, and then copy its code.
In complete analogy with the “Google+1” described just above, the “Like” code from Vkontakte also consists of two parts, which must be inserted in exactly the same way as Google’s masterpiece. I think you'll figure it out.
And if all this is complete nonsense for you, then you can use any plugin. I liked the Social Share Buttons plugin, which was completely customized for RuNet social networks. There, in addition to “Like” from VKontakte and Facebook, you can add other social networks that are popular with us to your blog.
MultiAds - how to add Google+1 and Like buttons in JoomlaWell, there are quite a lot of options for inserting social buttons on Joomla pages. You can, for example, use a standard module and insert it into a position in your template, which is located immediately above or immediately after the article. But it may not turn out very well, so I suggest you try using the MultiAds plugin for this purpose.
Download this plugin and install it just like any other Joomla extension. Then select “Extensions” - “Plugin Manager” in the top menu of the admin panel and click on the name “Content - MultiAds”. Actually, the plugin doesn’t have very many settings.
On the left side you will need to activate this plugin, and on the right you will be asked to paste any code into one of four fields:
This way you can add any social media buttons to your website, including those that we discussed in this article “Google +1” and “Like” from VKontakte and Facebook. You can customize the alignment for them by selecting the desired option from the drop-down list, as well as set the desired indents.
The top two fields will allow you to insert buttons into top part articles, and the two lower ones, respectively, to the bottom. You can only tell which option to use by trying it. In addition to the social networks described above, I also advise you to pay attention to those that are seriously gaining popularity. Follow the link to find ways to install their buttons on your website.
Good luck to you! See you soon on the pages of the blog site
You might be interested
I think everyone knows what the “Like” widget does. For the ignorant, I’ll explain - the widget adds to HTML page the button of the same name, when pressed, the counter increases. The user can also talk about the page on his VKontakte wall. Many people use this widget, but there is not a single mention on the free Internet about a serious underwater boulder. The fact is that after the first use, the widget parameters are forever cached on VKontakte servers and there is no way to change them without resetting the counter.
To demonstrate the problem, let's take a standard widget script with official page for VKontakte developers:
VK.init((apiId: YOUR_APP_ID, onlyWidgets: true)); VK.Widgets.Like("vk_like", (type: "full", pageTitle: "TEST_TITLE", pageDescription: "TEST_DESC"));
You need to insert this code into a page that will be in the VK application domain. For example, the base domain example.com is selected for the application, then the page must be placed in this domain or one of its subdomains: example.com/vktest.html, local.example.com/vktest.html, etc.
After clicking on the button, logging in and clicking on “Tell friends”, a corresponding entry will appear on your VKontakte wall. Now let’s return to our page and click on “Like” again - the counter will reset to zero and the post on the wall will disappear. Is the problem resolved? You can check by changing the widget parameters to others.
VK.Widgets.Like("vk_like", (type: "full", pageTitle: "REAL_TITLE", pageDescription: "REAL_DESC"));
Refresh the page, again click on “Like” and “Tell friends”. In all my tests I saw the old TEST_TITLE and TEST_DESC.
This example is, of course, not very accurate. It may be enough to wait a while and the cache for a widget with zero uses will reset itself. However, this is a great demonstration of the problem. If you have configured a widget with test data and the counter is greater than zero, you will no longer be able to change the widget parameters. Widget parameters include title, description, image.
The only way to update these parameters is to reset the counter. I was informed about this by tech. VK support:
You can reset the counter either by specifying page_id as the third parameter, or by changing Page URL. Obviously, this is not suitable for a page that already has more than 500 likes.
I was developing integrations for several social networks. I must say, this is the first time I have encountered such a problem. Yes, I don’t even remember the last time I saw that it was impossible to reset the cache in the system. Moreover, not a word is said about this feature in the VKontakte documentation.
Advice for integration developers: test the widget on fake URLs, for example example.com/fake.html. Or change page_id before releasing the page.
Widget documentation
In general, for Likes there is a large number of plugins, 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:
