Social networking buttons, HTML 5, data attribute and asynchronous javascript download
It has long been planned to install social networking buttons on your website. Finally I found time for this, the problem was aggravated by the fact that I myself am not a user of social networks, although I have nothing against it.
The first thing I began to collect information, it is quite a lot, there is truth and outdated. For example, Twitter has already changed the link, the old twitter.com/share , and the new twitter.com/intent/tweet , Google’s link “ www.google.com/buzz/post ” has not worked for a long time, instead of it plus.google. com / share . Of course, these are well-known facts, but, it seems, all the same, not everyone knows about it and offers to “fumble” on old links.
In general, having familiarized with the topic, I decided to take the buttons in the original source:
Twitter - twitter.com/about/resources/buttons
Facebook - developers.facebook.com/docs/reference/plugins/like
Vkontakte - vk.com/developers.php?o=-1&p=Like
Google+ - developers.google.com/+/plugins/+1button
')
I received the codes of the buttons, and I had to tinker a bit to get the buttons of at least one height, I decided to merge them into a block, and for this, it would be better if they were the same size.
Twitter:
Facebook:
Google+:
Vkontakte:
Here are the codes of buttons. What do we see? Vkontakte is the only code presented that does not use HTML 5. In this case, the use of HTML 5 is indicated by the data- attribute in html tags. Another interesting thing is that Twitter and Facebook have very similar codes, apparently, they are looking at each other. Twitter and Facebook do not specify type = “text / javascript”, which corresponds to HTML5, the type attribute is no longer required. The default is javascript (ECMAScript). And Google continues to specify type = "text / javascript". But Google is the only one who uses asynchronous loading of javascript using the async attribute that conforms to the HTML 5 specification.
About asynchronous loading of scripts it is worth saying a little more. In Google, well done, that use asynchronous loading of the script, while others in vain neglect this possibility. What is this asynchronous download, everything is simple, this is an indication to the browser to download the script as soon as it is possible to download it, and if there is no possibility, the browser will continue to work further.
What is it for? For example, you put the “Tweet” button on your website, and we remember that they do not have the async attribute in the code. And everything would be fine, but many people at work have no access to social networks, and when a user enters your site without access to Twittter, their browser will not be able to download scripts from Twitter, but since Download synchronous browser noticeably "hang" until the attempt to download the script does not stop on timeout.
How does this concern you? Not every user will wait for your site to load, and if it waits later, it may not return, why should he return to the “brake” site. We conclude that in some cases asynchronous loading of scripts is a necessary thing.
Due to the fact that I decided to merge the buttons into one block, it would be logical to combine all the javascript code into one script and add asynchronous loading. In addition, I do not use HTML 5 on my site yet, and in order for the code to be valid, all attributes of HTML 5 need to be set using javascript.
Using javascript, the data attribute is set very simply, for example:
==
As always, there were no nuances. It works in all browsers, except ... As you may have guessed, except IE to ie8, ie9 already works. But we will write differently, that would work in all browsers:
In the end, here's what I got:
1. I changed HTML a bit, mostly I don’t need a direct link to Twitter on the site, and in their code they put such a link:
2. Javascript code for asynchronous loading of scripts for buttons, paste wherever you want, usually either to the head or to the bottom of the page. By the way, Twitter and Facebook in the code have protection against reloading scripts, made in case the code is inserted into the page several times, I don’t think that someone will insert my code several times, but just in case I’ve left the protection against reloading scripts :
The last caveat, you have to register your site vkontakte, in order to get apiId, you can leave my apiId, but it will not work only on your site.
Good luck!
The first thing I began to collect information, it is quite a lot, there is truth and outdated. For example, Twitter has already changed the link, the old twitter.com/share , and the new twitter.com/intent/tweet , Google’s link “ www.google.com/buzz/post ” has not worked for a long time, instead of it plus.google. com / share . Of course, these are well-known facts, but, it seems, all the same, not everyone knows about it and offers to “fumble” on old links.
In general, having familiarized with the topic, I decided to take the buttons in the original source:
Twitter - twitter.com/about/resources/buttons
Facebook - developers.facebook.com/docs/reference/plugins/like
Vkontakte - vk.com/developers.php?o=-1&p=Like
Google+ - developers.google.com/+/plugins/+1button
')
I received the codes of the buttons, and I had to tinker a bit to get the buttons of at least one height, I decided to merge them into a block, and for this, it would be better if they were the same size.
Twitter:
<a href="https://twitter.com/share" class="twitter-share-button" data-lang="ru"></a> <script> !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script> Facebook:
<div id="fb-root"></div> <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.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script> Google+:
<!-- Place this tag where you want the +1 button to render. --> <div class="g-plusone" data-annotation="none"></div> <!-- Place this tag after the last +1 button tag. --> <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); })(); </script> Vkontakte:
<!-- Put this script tag to the <head> of your page --> <script type="text/javascript" src="//vk.com/js/api/openapi.js?75"></script> <script type="text/javascript"> VK.init({apiId: 3363525, onlyWidgets: true}); </script> <!-- Put this div tag to the place, where the Like block will be --> <div id="vk_like"></div> <script type="text/javascript"> VK.Widgets.Like("vk_like", {type: "button"}); </script> Here are the codes of buttons. What do we see? Vkontakte is the only code presented that does not use HTML 5. In this case, the use of HTML 5 is indicated by the data- attribute in html tags. Another interesting thing is that Twitter and Facebook have very similar codes, apparently, they are looking at each other. Twitter and Facebook do not specify type = “text / javascript”, which corresponds to HTML5, the type attribute is no longer required. The default is javascript (ECMAScript). And Google continues to specify type = "text / javascript". But Google is the only one who uses asynchronous loading of javascript using the async attribute that conforms to the HTML 5 specification.
About asynchronous loading of scripts it is worth saying a little more. In Google, well done, that use asynchronous loading of the script, while others in vain neglect this possibility. What is this asynchronous download, everything is simple, this is an indication to the browser to download the script as soon as it is possible to download it, and if there is no possibility, the browser will continue to work further.
What is it for? For example, you put the “Tweet” button on your website, and we remember that they do not have the async attribute in the code. And everything would be fine, but many people at work have no access to social networks, and when a user enters your site without access to Twittter, their browser will not be able to download scripts from Twitter, but since Download synchronous browser noticeably "hang" until the attempt to download the script does not stop on timeout.
How does this concern you? Not every user will wait for your site to load, and if it waits later, it may not return, why should he return to the “brake” site. We conclude that in some cases asynchronous loading of scripts is a necessary thing.
Due to the fact that I decided to merge the buttons into one block, it would be logical to combine all the javascript code into one script and add asynchronous loading. In addition, I do not use HTML 5 on my site yet, and in order for the code to be valid, all attributes of HTML 5 need to be set using javascript.
Using javascript, the data attribute is set very simply, for example:
<div class="g-plusone" data-annotation="none"></div> ==
document.getElementById(id).dataset.annotation = "none" As always, there were no nuances. It works in all browsers, except ... As you may have guessed, except IE to ie8, ie9 already works. But we will write differently, that would work in all browsers:
document.getElementById(id).setAttribute("data-annotation", "none"); In the end, here's what I got:
1. I changed HTML a bit, mostly I don’t need a direct link to Twitter on the site, and in their code they put such a link:
<ul style="height:40px;list-style:none;margin:0;padding:0;"> <li style="float:left;"> <a id="s-twitter" class="twitter-share-button"> </a></li> <li style="float:left;"> <div id="s-facebook" class="fb-like" style="margin-right:40px;"> </div> </li> <li style="float:left;"> <div id="vk_like"> </div> </li> <li style="float:left;margin-right:10px;"> <div id="s-google" class="g-plusone"> </div> </li> </ul> 2. Javascript code for asynchronous loading of scripts for buttons, paste wherever you want, usually either to the head or to the bottom of the page. By the way, Twitter and Facebook in the code have protection against reloading scripts, made in case the code is inserted into the page several times, I don’t think that someone will insert my code several times, but just in case I’ve left the protection against reloading scripts :
<script type="text/javascript"> (function() { function async_load(u,id) { if (!gid(id)) { s="script", d=document, o = d.createElement(s); o.type = 'text/javascript'; o.id = id; o.async = true; o.src = u; // Creating scripts on page x = d.getElementsByTagName(s)[0]; x.parentNode.insertBefore(o,x); } } function gid (id){ return document.getElementById(id); } window.onload = function() { e = gid("s-twitter"); e.setAttribute("data-lang", "ru"); e = gid("s-facebook"); e.setAttribute("data-layout", "button_count"); e.setAttribute("data-send", "false"); e = gid("s-google"); e.setAttribute("data-size", "medium"); async_load("//platform.twitter.com/widgets.js", "id-twitter");//twitter async_load("//connect.facebook.net/ru_RU/all.js#xfbml=1", "id-facebook");//facebook async_load("https://apis.google.com/js/plusone.js", "id-google");//google async_load("//vk.com/js/api/openapi.js", "id-vkontakte");//vkontakte }; // vkontakte window.vkAsyncInit = function(){ VK.init({apiId: 3363525, onlyWidgets: true}); VK.Widgets.Like("vk_like", {type: "button", height: 20}); }; })(); </script> The last caveat, you have to register your site vkontakte, in order to get apiId, you can leave my apiId, but it will not work only on your site.
Good luck!
Source: https://habr.com/ru/post/166831/
All Articles