Some subtleties of installation on the site of buttons "Share" (share) of social networks
Today, in the era of social media, it is customary to give site visitors the opportunity to share with friends. We made a promotional page for the birthday of the Allsoft online store and we needed to set the Share buttons from Facebook, Twitter, Odnoklassniki, Vkontakte and My World.
At first glance it seemed - what could be special here - I put the ready html / js code and ready? But the subtleties were in the details: what if for one social. network need to send one text, and for another - another? How to transfer a picture and description to all networks? And if several different versions of text and pictures on the same page? How to clean the already cached information about the link in the social network? All these questions we had to find answers that you can learn from this article.
The easiest option:
To put the block "Share" on the page of your site, just go to http: //api.yandex.ru/share/ and through the wizard to generate the desired type of widget with buttons - you get the type code
With this code, the user on the site will be able to share a link to it on the network, which will look something like this:
')
Here, the phrase “Who wants to buy software at a discount of 8% per share?” Is written by the user himself, and below is how the link to the site looks on the social network. Not very beautiful, right?
Transfer to the social network images, title and description.
This can be done using meta tags, for example:
then the link in 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. More information about these meta tags can be found on the Facebook page of developers.facebook.com/docs/share , the rest of the social networks also fully understand them.
How does this mechanism work?
1. When a user clicks a button, the widget sends a link to a page to the social network server.
2. Server soc. the network itself accesses this link and reads information about the page - title, description, image.
3. Server soc. Network caches page information on its side and displays it on social network pages.
What problems may arise during the development:
1. If you are developing a website on a server that is not accessible from the outside, closed by http authorization, or locally - social. the network will not be able to receive information about the page, or will not allow sharing the link at all (for example, Odnoklassniki works this way), or display it without a title or description (as in the first, simplest version)
2. After the social network server has already accessed the page once, it has cached information about it - therefore, if you want to change the title and description and change it on the side of your site, then it will not change in the social network - it will be use previously cached information. (How to fix it - see below.)
How to transfer different descriptions for one page.
For example, when creating a promo page on allsoft.ru with a comic test, it was required for different numbers of points scored by the user in the test to transfer different descriptions to the social network. Since the description of the social network page is obtained by following the link, different descriptions need different links. In addition, Twitter allows you to insert only 140 characters, so it needs a separate, shorter description.
For this:
1. For different test results, we need to send different links to the Yandex "Share" block API. In our case, these were: http: //allsoft.ru/promo/allsoft8let/? Share = normal, allsoft.ru/promo/allsoft8let/?share=high , allsoft.ru/promo/allsoft8let/?share=low and http: //allsoft.ru/promo/allsoft8let/ for a block outside the test.
2. Accordingly, depending on the parameters passed to the script of the page in the url, the page should be formed with different meta tags.
3. In order to transmit a separate description for Twitter, you need to use another API format of the "Share" block of Yandex - not tags, but js-code:
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 the serviceSpecific for twitter we specify a title that is different from the one in the og: title meta tag.
Thus, for the task “3 different test results plus a general link to a page outside the test,” we will have 4 tags:
and 4 blocks of code in javascript as above.
How to change the title and description cached by the social network.
1. For Facebook, there is the best way: go to their debugger developers.facebook.com/tools/debug and enter the url of your link - it will display information about the page and at the same time reset the cache, which will affect the Share button.
2. It is also possible, but not recommended to use: 1) adding a parameter to a link, for example? V = 2 2) Using bit.ly and similar services to reduce links. More information about the advantages and disadvantages can be read here (English): umairj.com/146/how-to-clear-facebook-shares-cache
3. Unfortunately, there is no other social network like Facebook. Therefore, they need to use method 2 with changing the link or the API of the Share block from Yandex:
When transmitting through the API, another title and description of the social network update the information cached earlier from the meta tags (except for Facebook - but there is a way for it 1)
Also, you can probably transfer the image to change the picture.
Well, it seems that's all. Welcome to allsoft.ru/promo/allsoft8let and hurry to share this link with friends - today is the last day of the action!
Author: Vladimir Hvorostov - Softline Web Developer
At first glance it seemed - what could be special here - I put the ready html / js code and ready? But the subtleties were in the details: what if for one social. network need to send one text, and for another - another? How to transfer a picture and description to all networks? And if several different versions of text and pictures on the same page? How to clean the already cached information about the link in the social network? All these questions we had to find answers that you can learn from this article.
The easiest option:
To put the block "Share" on the page of your site, just go to http: //api.yandex.ru/share/ and through the wizard to generate the desired type of widget with buttons - you get the type code
<script type="text/javascript" src="//yandex.st/share/share.js" charset="utf-8"></script> <div class="yashare-auto-init" data-yashareL10n="ru" data-yashareType="none" data-yashareQuickServices="yaru,vkontakte,facebook,twitter,odnoklassniki,moimir"></div> With this code, the user on the site will be able to share a link to it on the network, which will look something like this:
')
Here, the phrase “Who wants to buy software at a discount of 8% per share?” Is written by the user himself, and below is how the link to the site looks on the social network. Not very beautiful, right?
Transfer to the social network images, title and description.
This can be done using meta tags, for example:
<meta property="og:image" content="http://allsoft.ru/bitrix/templates/allsoft2011/images/8let/dragon_normal.jpg" /> <meta property="og:title" content=" – !" /> <meta property="og:description" content=" : «»! , !" /> then the link in 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. More information about these meta tags can be found on the Facebook page of developers.facebook.com/docs/share , the rest of the social networks also fully understand them.
How does this mechanism work?
1. When a user clicks a button, the widget sends a link to a page to the social network server.
2. Server soc. the network itself accesses this link and reads information about the page - title, description, image.
3. Server soc. Network caches page information on its side and displays it on social network pages.
What problems may arise during the development:
1. If you are developing a website on a server that is not accessible from the outside, closed by http authorization, or locally - social. the network will not be able to receive information about the page, or will not allow sharing the link at all (for example, Odnoklassniki works this way), or display it without a title or description (as in the first, simplest version)
2. After the social network server has already accessed the page once, it has cached information about it - therefore, if you want to change the title and description and change it on the side of your site, then it will not change in the social network - it will be use previously cached information. (How to fix it - see below.)
How to transfer different descriptions for one page.
For example, when creating a promo page on allsoft.ru with a comic test, it was required for different numbers of points scored by the user in the test to transfer different descriptions to the social network. Since the description of the social network page is obtained by following the link, different descriptions need different links. In addition, Twitter allows you to insert only 140 characters, so it needs a separate, shorter description.
For this:
1. For different test results, we need to send different links to the Yandex "Share" block API. In our case, these were: http: //allsoft.ru/promo/allsoft8let/? Share = normal, allsoft.ru/promo/allsoft8let/?share=high , allsoft.ru/promo/allsoft8let/?share=low and http: //allsoft.ru/promo/allsoft8let/ for a block outside the test.
2. Accordingly, depending on the parameters passed to the script of the page in the url, the page should be formed with different meta tags.
3. In order to transmit a separate description for Twitter, you need to use another API format of the "Share" block of Yandex - not tags, but js-code:
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: ' : «»! , !' } } }); 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 the serviceSpecific for twitter we specify a title that is different from the one in the og: title meta tag.
Thus, for the task “3 different test results plus a general link to a page outside the test,” we will have 4 tags:
<span id="ya_share_normal"></span> <span id="ya_share_high"></span> <span id="ya_share_low"></span> <span id="ya_share"></span> and 4 blocks of code in javascript as above.
How to change the title and description cached by the social network.
1. For Facebook, there is the best way: go to their debugger developers.facebook.com/tools/debug and enter the url of your link - it will display information about the page and at the same time reset the cache, which will affect the Share button.
2. It is also possible, but not recommended to use: 1) adding a parameter to a link, for example? V = 2 2) Using bit.ly and similar services to reduce links. More information about the advantages and disadvantages can be read here (English): umairj.com/146/how-to-clear-facebook-shares-cache
3. Unfortunately, there is no other social network like Facebook. Therefore, they need to use method 2 with changing the link or the API of the Share block from Yandex:
new Ya.share({ element: 'ya_share', elementStyle: { 'type': 'none', 'quickServices': ['facebook','twitter','odnoklassniki','vkontakte','moimir'] }, title: 'Allsoft 8 ! — 11 31 !', description: ' ', link: 'http://allsoft.ru/promo/allsoft8let/', serviceSpecific: { twitter: { title: 'Allsoft 8 ! — 11 31 !' } } }); When transmitting through the API, another title and description of the social network update the information cached earlier from the meta tags (except for Facebook - but there is a way for it 1)
Also, you can probably transfer the image to change the picture.
Well, it seems that's all. Welcome to allsoft.ru/promo/allsoft8let and hurry to share this link with friends - today is the last day of the action!
Author: Vladimir Hvorostov - Softline Web Developer
Source: https://habr.com/ru/post/144946/
All Articles