As almost all developers use to add social buttons at their websites i decided to write a small
text with my experience. The main problem we face usually is that button code loads in a blocking way
and slows down page especially if a social network server is busy or down.
Will write down the snippet for 4 major buttons :

Starting with facebook like button, facebook developers site provides a snippet that loads
the button code asynchronously :

<div id=”fb-root”></div>
<script>
window.fbAsyncInit = function() {
FB.init({
status     : true, // check login status
cookie     : true, // enable cookies to allow the server to access the session
xfbml      : true  // parse XFBML
});

// Additional initialization code here
};

// Load the SDK Asynchronously
(function(d){
var js, id = ‘facebook-jssdk’, ref = d.getElementsByTagName(‘script’)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(‘script’); js.id = id; js.async = true;
js.src = “//connect.facebook.net/en_US/all.js”;
ref.parentNode.insertBefore(js, ref);
}(document));
</script>

Do not forget to add appid variable if using facebook’s connect option

For the next 3 buttons code provided by hosts is this :

<script type=”text/javascript” src=”https://apis.google.com/js/plusone.js”></script>
<script type=”text/javascript” src=”http://platform.twitter.com/widgets.js”></script>
<script type=”text/javascript” src=”http://platform.linkedin.com/in.js”></script>

For most sites this snippet will work fine and all 3 buttons will appear correctly.
In order to load the buttons asynchronously and do not  interrupt the main page loading i
wrote down this snippet that is better to put before you close body tag (usually will be at footer).

<script type=”text/javascript” >
(function() {
var twitterTag = document.createElement(‘script’);
twitterTag.type = ‘text/javascript’;
twitterTag.async = true;
twitterTag.src = ‘http://platform.twitter.com/widgets.js’;
var s = document.getElementsByTagName(‘script’)[0];
s.parentNode.insertBefore(twitterTag, s);
})();
</script>

<script type=”text/javascript” >
(function() {
var googleplusTag = document.createElement(‘script’);
googleplusTag.type = ‘text/javascript’;
googleplusTag.async = true;
googleplusTag.src = ‘https://apis.google.com/js/plusone.js’;
var s = document.getElementsByTagName(‘script’)[0];
s.parentNode.insertBefore(googleplusTag, s);
})();
</script>

<script type=”text/javascript” >
(function() {
var linkedinshareTag = document.createElement(‘script’);
linkedinshareTag.type = ‘text/javascript’;
linkedinshareTag.async = true;
linkedinshareTag.src = ‘http://platform.linkedin.com/in.js’;
var s = document.getElementsByTagName(‘script’)[0];
s.parentNode.insertBefore(linkedinshareTag, s);
})();
</script>

Code is tested in many sites and everything loads smoothly.

Have a good day

 
spy app for