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

 

3 Responses to Asynchronously social buttons for your web site

  1. blackhat seo says:

    I think this is among the most significant information for me. And i am glad reading your article. But want to remark on few general things, The web site style is ideal, the articles is really excellent : D. Good job, cheers

  2. ugg boots says:

    Really like may be the single rational and then acceptable solution concerning our continuation.

  3. Neo says:

    Just wish to say your own post is really as srrsuiping. The actual clearness in your publish is just nice that i can imagine you are educated in this topic. Good along with your agreement let me to be able to clutch your own Rss to maintain updated together with arriving around close to publish. Many thanks one million and also please proceed the actual satisfying perform.

Leave a Reply

Your email address will not be published. Required fields are marked *



spy app for