Block of social buttons. Social media buttons

Review of domestic designers and scripts of social network buttons for websites, as well as foreign analogues. Brief, clear and visual.

Designers of social network buttons for a website

2. The easy way get links to the site - QIP.RU
Place a button on the site and give visitors the opportunity to add their favorite site materials to bookmarks, blogs and social networks. Three steps: where to place the button (website, Blogger or WordPress), button style ( ready-made options) and get a button.

3. Buttons for adding content to social networks - Pluso
Place buttons and give visitors the opportunity to share their favorite pages on social networks, as well as print, send email and add bookmarks.

4. Service social activity— UpToLike
Custom social media buttons with the ability to set color, shape, size and special effects. Additional features are the PicShare image sharing widget, the “Quote” function and the customized Following function.

5. One button! — for all bookmarking and social networking services
Select a view button. Where the button will be installed: website, Blogger or WordPress. Add a button.

Scripts for social network buttons for the website

1. Beautiful social buttons for the site - goodshare.js
Display buttons on almost any device. Clean code. Brief documentation. SEO friendly.

2. Button script social bookmarking and networks – Share42
Select the size and mark the icons of the services you want to use on the site. Select the options you want. See how it will look and/or download the finished script. Install the script on a WordPress, Drupal, etc. site.

3. Beautiful buttons"likes" on social networks from using jQuery— Social Likes
Script for “like” buttons with counters in uniform style for social networks: Facebook, Twitter, VKontakte, Odnoklassniki, My World, Google+ and Pinterest.

Foreign analogues of social networking buttons for a website

1. Share Buttons - AddThis
Sharing buttons will help you increase your site’s audience by attracting visitors from other resources and social networks through distributed content.

4. Social Sharing - Po.st
Get more benefits from sharing on social networks. The service will make it easier for visitors to share on social networks, which will increase organic traffic to the site.

5. Share Buttons for Any Website - AddToAny
Get the code for social media buttons for any website. Select the type and style of buttons, specify the email and other options, or choose one of the platforms: WordPress, Drupal, Tumblr, Joomla, Elgg, WordPress.com, Blogger, TypePad or FeedFlare. Get the button code.

at 8:00

Edit message

6 comments

Pros:

Pluso XExperimental version of the constructor social buttons Share Pluso. It has improved icon design, pop-up window with full list available social networks, and the annoying orange button with the “+” sign has also been changed; in its place is now the same plus sign, but in a more pleasant design.
According to the developers, the new social buttons are designed for Retina monitors. Everything else, at first glance, remains the same. Unfortunately, in the constructor among available options I did not find buttons with a counter, although the standard Pluso edition has them.
I don’t know if they will replace the old one with a new designer, but this moment, both work simultaneously via different links.

Add ThisAdd This is a service that provides high-quality, stylish and flexible social buttons. This resource is the leader in the west. It’s less popular here, but I often come across Russian-language sites with the Add This widget.
There are paid and free widgets. IN free account only the most available simple options. There are many more design concepts available in the paid version, such as: adaptive buttons, buttons with various counters and much more.
I think this option is not suitable for our people, since you will have to pay for the bells and whistles, but domestic market you can find all the same things, but for free.
The Add This constructor has a huge list of available social networks, including Vkontakte, Moi Mir and Odnoklassniki.

There is a plugin for . Good Share Lightweight and beautiful share buttons for your website with a small embed code, which is very attractive. Unfortunately, there is only one design option with several color schemes . There are all the popular ones in RuNet
social media
According to the developers, their brainchild is optimized and search engines will love your site. I don't know how much truth there is here.

If you don't need any bells and whistles, this option is for you.
Shareaholic A very interesting Western service for creating social buttons, which I discovered quite recently. marketing tool), but, unfortunately, the inscription is in English, so it is not suitable for our people. Among the available social networks is VKontakte.

There are probably no sites left on the Internet that do not contain posting buttons materials on social networks. The latter have long and firmly taken a place in our lives. We communicate there, get to know each other, promote business, read news, and so on. A full range of. It is not surprising that webmasters strive to expand the presence of their sites on social networks by any means. available methods. After all, there are tons of potential traffic that absolutely everyone needs. The flow of visitors means money, reputation, growth. Everything is built around him. A tasty morsel.

Social buttons are necessary, that's obvious. The question is different - which ones to choose? We tested it for you TOP 5 various services to add button code to websites. The goal is to identify the optimal one and show it in detail. Let's start with the qualifying stage.

Choice best service social buttons

The choice of candidates for comparison turned out to be trivial - we took the most popular services , about which any person who is at all familiar with the topic of website creation has heard. No rare ones that are gaining popularity, only experienced oldies.

The composition of the certified team is as follows:

As a result of testing the selected social services - uSocial was the leader. Now you want to receive a rationale for our choice. Of course, we will not remain unfounded.

Features of uSocial buttons

Let's give some facts, who convinced us that the decision was correct.

Step-2

We are putting together a set of social buttons. Can choose displayed social networking services, shape and style of buttons.

Here you can activate the "Up" button, enable support for mobile devices, connect the services Viber, WhatsApp, Telegram, SMS.

Step-4

After installing the social bar from your uSocial personal account, you can view statistics of likes and reposts for the selected period, both for all social networks at once, and for selected ones. Data is displayed in clear graphs or charts.

If social meta tags are filled out correctly, posts will be perceived correctly social services, because they indicate the type of material, the relevant title, a link to the desired picture. All this increases the efficiency of reposting: your material will be correctly indexed by social services.

Examples markup code for popular social networks (the code must be written before the tag):

1. Facebook And In contact with use Open Graph protocol:

3. For Twitter the code looks like this:

4. For Google+ So:

- link to the author’s profile on Google+
- Name of the site
- snippet text (up to 40 characters)
- description of the site
- path to the image file

Tools for working with micro markup.

Hello, dear readers of the blog site. As you probably already guessed from the title, we will talk about the so-called social buttons, which can very seriously help attract articles to your website, with a successful combination of circumstances and high quality the article itself, a large number of visitors from social networks and services.

Social signals are also taken into account search engines when ranking your site. A large number of shares to quality accounts on Twitter, Google+, Facebook (it is possible that VKontakte and other networks are also taken into account) can allow you to rise a certain number of steps higher and, perhaps, enter the Top and stay there if behavioral factors will not let you down.

In general, there are a lot of services that provide scripts (buttons) for sharing content on social networks on the Internet, but not all of them should be trusted (they can easily use you or in some other way for bad reasons). And they are capable of simply “hanging a site” if their code is not very well placed and the computing capabilities of their servers are not very powerful. Although there are decent options that are free from these shortcomings, and I have listed them at the end of this publication.

It is also possible to display on the buttons the number of shares to a particular social network. Moreover, all posts are taken into account, and not just those made using this block (data is loaded via API). True, not all social networks are supported (only facebook, Google+, Moi Mir, Odnoklassniki.ru, VKontakte), but most of the main ones. It's sad that Twitter was recently removed from this list because... it stopped providing this data via the API.

For example, here you can shorten titles for sharing on Twitter, because there is a limit on their length (read how to do this below), configure whether or not to display sharing counters, set menu opening directions with additional buttons social networks and much more. In general, dig around and take a look.

In general, in comparison with native sharing buttons, which offer to install social networks on the site (read about this below), the Yandex block wins in loading speed, compactness and ease of installation and configuration. For example, in the past my official Twitter button often did not load due to problems with their server, so the script made in Java did not load for a long time left menu my blog. It is possible that this problem has now been solved, but many scripts will always be worse than one in terms of optimizing site loading speed.

I think Yandex is unlikely to have problems with accessibility, since it is a well-earning commercial organization that is quite sensitive to its image. In addition, if you have, then you can track the statistics of clicks on these buttons, which can be useful.

In addition to the block with icons regular size you can make a block with counters, and Yandex also suggests adding a drop-down menu with additional social networks, which will be hidden under a spoiler located after displaying the required number of buttons for the main social networks (such as VKontakte, MoiMir, ):

If you want to add counters to the buttons in this block (with a drop-down menu), then simply insert one more attribute into its code on the site (between the Div tags): data-counter="“ and that’s it. As I said, it couldn’t be simpler. You can use counters will also be added to the small buttons, which are discussed below:

Data-services="vkontakte,odnoklassniki,facebook,gplus,twitter,moimir,blogger,digg,reddit,linkedin,lj"

You can also replace all the icons with their smaller button thumbnails, which I personally found useful when inserting a block into top part all articles on this blog:

In the first part, the opening and closing SCRIPT tags contain the path to the script, which will be loaded from the Yandex server, and the second part contains the insertion code itself, which will need to be placed in the place in your template where this block will be displayed.

How to insert social buttons from Yandex on a website

Therefore, I insert the script calling code along with the Div block in the place where it is necessary to display social media buttons. Well, so that its loading does not affect the loading speed of the main page, I, following the advice given in the Yandex documentation, added the async="async" attribute to it, thereby initiating it asynchronous loading script:

The problem may arise in finding among the many files of the engine of your site the one that is responsible for the formation of the very bottom part HTML code with the closing tag /BODY or the one that forms the Head. And also find a place in the theme files where you need to insert a piece of code into Div tags(to place the buttons themselves).

In principle, both in WordPress and in Joomla, this is done in one of the files of the theme used. Because This blog runs on WordPress, so I’ll speak for it.

If you work with WordPress, then to insert the code for calling the script you will need to open the footer.php file for editing (you will find the closing Body tag or header.php (you will find it there) Head tags) from the folder:

/wp-content/themes/name of the folder_with_theme_used/footer.php

Now all that remains is to insert the second part of the Yandex social buttons code, which is responsible for the location of the block with buttons on the site pages, into the right place in your website template or directly into the article:

By the way, I’ll make a reservation once again: if you want to remove any button from this block, you don’t have to go to the constructor on the Yandex website again. You can simply remove its entry from this list (along with the comma coming after it, for example, “vkontakte,”). Well, you understand...

Well, you can also change the positioning of buttons inside the block using CSS.

Li.ya-share2__item (background:none!important;padding:0 7px 0 7px!important;)

Because I use adaptive under mobile devices layout, then for devices with low screen resolution I added a similar line, where I set slightly smaller indents, but these are details:

Li.ya-share2__item (padding:0 3px 0 3px!important;)

In general, something like this is the case when it comes to my WordPress blog. In Joomla, to insert this block, it would probably be easiest to use the Custom Html Code module, placing it in the template position somewhere immediately below the article text.

Official social media buttons

Many social networks themselves provide everyone with the opportunity to download the button code, and often you can even customize its appearance and functionality. For example, you can configure and receive the script code for sharing a post in .

As you can see, there are quite a lot of settings, and in addition to the appearance of the VKontakte button, you can also configure the display of a counter showing the number of shares.

You will be able to get a Facebook button. It is very flexibly customized to suit your needs, and do not be confused by the English inscriptions on it, because when you place its code on your website, the inscriptions will automatically be translated into Russian.

It is better not to insert anything into the URL field, then the page on which this code is located will be shared.

It will look something like this:

And, of course, I can’t help but mention the official Twitter button, which appeared relatively recently. Its constructor is located. Naturally, it provides the ability to count the number of retweets and you will have the opportunity to set its appearance:

I then slightly modernized the resulting code according to the principle described above, so that my long titles would be cut off and would not create additional problems for users when sharing.

Other options for getting social media buttons for your website

As I already said, there are a lot of all kinds of online services where you can take a script for social network buttons for free and put it on your website. They all pursue different goals: “from the heart” (as in the case of the Dimoxa service), to collect data necessary for the operation of other services (as in the case of ApTuLike) or for profit (viruses and other illegal fraud with the traffic you have on your site) . There are also simply paid solutions, for example, like the plugin mentioned below.

It's hard to say what to choose from this variety. I’ll say a few words about what I had a chance to try myself, and what I’ve already written about before.

In general, look, compare and choose for yourself.

Good luck to you! See you soon on the pages of the blog site

You can watch more videos by going to ");">