Add to share 4 more. Social share buttons – we write it ourselves

Here the phrase “Who wants to buy software with an 8% discount on the promotion?” written by the user himself, and below is how the link to the site looks on the social network. Not very beautiful, right?

then the link on the social network will look like this:

Here “Today is the birthday of allsoft.ru - 8 years :)” is the text written by the user, the rest is information from meta tags. You can read more about these meta tags on the Facebook page developers.facebook.com/docs/share, other social networks also understand them quite well.

How does this mechanism generally work:
1. When the user clicks the button, the widget transmits a link to the page to the social network server.
2. Social server The network itself accesses this link and reads information about the page - title, description, picture.
3. Social server network caches page information on its side and displays it on social network pages

How to send different descriptions for one page.
For example, when creating a promotional page on allsoft.ru with a comic test, it was necessary to send different descriptions to social networks for the different number of points scored by the user in the test. Since the social network receives a description of a page by clicking on a link, different links are needed for different descriptions. Additionally, Twitter only allows 140 characters, so it needs a separate, shorter description.

New Ya.share(( element: "ya_share_normal", elementStyle: ( "type": "none", "quickServices": ["facebook","twitter","odnoklassniki","vkontakte","moimir"] ), link: "http://allsoft.ru/promo/allsoft8let/?share=normal", serviceSpecific: ( twitter: ( title: "Test result: The Dragon is almost your strong point! You can’t teach Dragonology yet, but on the right way!" ) ) ));
1. Here ya_share_normal is the id of the element on the page (), in which the block with social buttons will appear, link is the link, plus in serviceSpecific for Twitter we indicate the title, which differs from what is in the og:title meta tag.

Thus, for the task “3 different test results plus a common link to a page outside the test” we will have 4 tags:

and 4 blocks of JavaScript code as above.

How to change the title and description cached by the social network.
1. There is the best way for Facebook: go to their debugger

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 articles on your site attract, under a successful set of circumstances and the high quality of the article itself, a large number of visitors from social networks and services.

Social signals are also taken into account by search engines when ranking your site. A large number of shares to high-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 do 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 the directions for expanding menus with additional social network buttons, 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 left menu of my blog, made in Java script, did not load for a long time. 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 a block with regular-sized icons, 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 at the top of 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 social media buttons need to be displayed. 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 its asynchronous loading of the script:

The problem may arise in finding among the many files of your site’s engine the one that is responsible for generating the very bottom part of the 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 in the 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 script calling code you will need to open the file footer.php for editing (you will find the closing Body tag or header.php (you will find the Head tags there) 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 a layout that is adaptive for mobile devices, so 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 will 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 might be interested

We create buttons for adding to social networks and bookmarks for a WordPress blog (without plugins and scripts) Likely - stand-alone social buttons for the site
Buttons for mobile sites from Uptolike + the ability to share links in messengers UpToLike - a social button builder for your site with extended functionality
Uptolike Share Buttons - Free Plugin for Adding Social Media Buttons to WordPress
uSocial - review of a new social buttons service for your website
Attracting traffic from visitors to your website using SMO methods (forums, social networks, Subscribe groups) How to add to your website a block with buttons leading to your pages or groups on social networks, as well as to an RSS feed
Google+1 and I like from Vkontakte and Facebook - how to add like buttons to your website

Links in Stories began to appear quite a long time ago, but only official accounts could use them. In May, it became possible to add links in advertising with placement in History, but these were all paid mechanisms. Today, people started sending me screenshots of how Instagram has gradually started allowing regular users to add active links to websites in their Stories.

How to add a link to your Instagram Story?

This feature is not available to all Instagram accounts! Today links in Stories are only available:

For verified Instagram accounts

For profiles with more than 10,000 subscribers.

Moreover, the link may not appear immediately after you have received 10,000 subscribers. Boosting bots up to 10k subscribers does not always work. Plus, it’s difficult to trick bots so that they don’t unsubscribe today, and if the number of account subscribers drops to 9,999 or less, the ability to attach a link will disappear.

To follow an active link from History, the user must swipe up. Since people are not yet accustomed to such opportunities, I would recommend additionally focusing attention on the link with various links and calls to action. Well, you are grown-up guys, you understand what I’m talking about, who am I teaching here anyway.

I already wrote about the appearance of active links in Direct, but I did not post the information on the blog. Like any other update, it is only available to a select and random portion of users.

The latest updates make Instagram even more interesting for ecommerce and small businesses, the battle for subscribers will become even hotter. I only hope that Instagram will actively combat link spam in Direct.

Before delving into coding, let's take a look around and pay attention to the resources that the global web already provides us with. By the way, there are a lot of them, but we will look at the two most popular ones.

Another service worthy of our attention is the same simple constructor, only there are many more buttons with services and networks, some of which, I must admit, I saw for the first time. The main difference from Yandex.Technologies is that we receive a fully generated script that will be processed not in the cloud, but directly on our server.

It would seem that with such wonderful solutions, no one would even think of “reinventing the wheel”? But no, a script written by someone is only as good as we are too lazy to bother with it ourselves. Of course, it will work properly and perform its functions, but it is a universal solution written for the general mass of sites, i.e. it does not take into account our personal little needs and conventions.

Firstly: the design of the buttons is practically iron. Yes, it is recognizable and provided by social networks themselves, but it just doesn’t meet our needs. Well, the button has rounded edges, and the design of our site requires the button to be square, what should we do? – Take the sprite and redraw it! Anyone who has tried it knows that it is a thankless task: replacing one button is fraught with five or six attempts to “correctly” place it on the sprite. And this is only replacing one/several buttons, but what if the site is in a Gothic style and all the buttons need to be dark?

Secondly: there is no doubt about the reliability of Yandex, but the buttons, unlike the metric counter, for some reason are difficult to load, and often there is a visible lag from the main content of the page. This is especially noticeable with a good high-speed connection, when the page crashes almost instantly, and you have several blocks with buttons.

Thirdly: for the test, generate a script on share24 - it is large. Are all of the provided lines of code really necessary for us? - Don't think.

Now let's move on to writing the script itself; it will be divided into three parts: HTML, CSS and, in fact, the code itself, written in JavaScript. Additionally, I will use the jQuery library for convenience.

We include all the necessary files:

Now we add the script to the share.js file, it will look like this:

Var share = ( twitter: function($this)( var data = share.data($this); if(data)( var url = "http://twitter.com/share?"; url += "text= " + encodeURIComponent(data.text); url += "&url=" + encodeURIComponent(data.url); url += "&hashtags=" + ""; url += "&counturl=" + encodeURIComponent(data.url); share.popup(url); return false; ), vk: function($this)( var data = share.data($this); if(data)( var url = "http://vkontakte.ru/ share.php?"; url += "url=" + encodeURIComponent(data.url); url += "&title=" + encodeURIComponent(data.title); url +="&description=" + encodeURIComponent(data.text); url += "&image=" + encodeURIComponent(data.img); url += "&noparse=true"; share.popup(url); }; return false; }, facebook: function($this){ var data = share.data($this); if(data){ var url = "http://www.facebook.com/sharer.php?s=100"; url += "&p=" + encodeURIComponent(data.title); url += "&p=" + encodeURIComponent(data.text); url += "&p=" + encodeURIComponent(data.url); url += "&p=" + encodeURIComponent(data.img); share.popup(url); }; return false; }, data: function($this){ if($this){ return $.parseJSON($this.parent("div").attr("data-share-data")); }; return false; }, popup: function(url){ window.open(url, "", "toolbar=0, status=0, width=626, height=436"); return false; } }; !}

Add markup to the page:

The structure is quite simple, namely a wrapper with the share class, followed by a div with the data-share-data attribute, which was mentioned above. The line is formed from four parameters with their own values.

url – the address we are sharing;
img – image, if it is not needed, specify an empty line;
title – page title;
text – the description we need.

Inside the div are the buttons themselves with an onclick event attached to them. When clicked, one of the methods described above will be called.

All that remains is to give the buttons a human look and add CSS:

Share( background-color: #ececec; display: inline-block; padding: 7px 5px; ) .share div:after( content: ""; display: block; clear: both; height: 0; ) .share div:first -child( margin-left: 0; ) .share .twitter, .share .vk, .share .facebook( background-image: url(share.png); margin-left: 7px; border-radius: 3px; height: 24px; width: 24px; float: left; cursor: pointer; .share .twitter( background-color: #00aced; background-position: 0 -61px; ) ) .share .vk( background-color: #48729e; background-position: 0 -32px; ) .share .vk:hover( background-color: #3a5b7e; ) .share .facebook( background-color: #3c5a98; background -position: 0 0; ) .share .facebook:hover( background-color: #30487a; )

As a result, after adding the CSS button, the result will look like:

This completes the writing of the script, in the example I used only three social networks, if you need to connect others, it will not be difficult. To do this, you will need to add a new method to the share object, not forgetting to also add additional HTML and CSS. Links for reposting on social networks can be obtained in two ways:

Use the social network API, which does not always help;
Pick it up from a similar service using firebug or another web developer tool.

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

2. Add a “Like” button from VKontakte and Facebook to the site 2.1. I like it from FaceBook

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 a more effective way to motivate the user to like.

6.Color Scheme
Color range: either white or black.

7.Font
Just setting the font for the “I like” inscription.

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 VKontakte Now 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:

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 site