Optimised async loading of cross-domain scripts

snippet.js

/*
 * Updated to use the function-based method described in http://www.phpied.com/social-button-bffs/
 * Better handling of scripts without supplied ids.
 *
 * N.B. Be sure to include Google Analytics's _gaq and Facebook's fbAsyncInit prior to this function.
 */

(function(doc, script) {
    var js, 
        fjs = doc.getElementsByTagName(script)[0],
        add = function(url, id) {
            if (doc.getElementById(id)) {return;}
            js = doc.createElement(script);
            js.src = url;
            id && (js.id = id);
            fjs.parentNode.insertBefore(js, fjs);
        };

    // Google Analytics
    add(('https:' == location.protocol ? '//ssl' : '//www') + '.google-analytics.com/ga.js', 'ga');
    // Google+ button
    add('https://apis.google.com/js/plusone.js');
    // Facebook SDK
    add('//connect.facebook.net/en_US/all.js', 'facebook-jssdk');
    // Twitter SDK
    add('//platform.twitter.com/widgets.js', 'twitter-wjs');
}(document, 'script'));

sigh ...Facebook

Sneaky! I like it.

@necolas
I want use 'createDocumentFragment' and load css, but ie fail.
This is my testcase.
https://gist.github.com/1480368

Removed the doc frag from the latest update because previous perf tests failed to produce any significant difference. Also, dropping the doc frag made it simpler to include callback functions (which I needed on a couple of occasions).

@eddiemachado I've also realised (unless I missed something) that your proposed "non-mobile only" wrapper prevents the sharing buttons being loaded in any browser that doesn't support CSS3 Media Queries.

If you add #xfbml=1&appId=null at the end of the facebook url, you does need fbAsyncInit. And it work quite well.

// Facebook SDK
add('//connect.facebook.net/en_US/all.js#xfbml=1&appId=null', 'facebook-jssdk');

Btw, maybe it's risky, but to make adaptive language, I'm using navigator.language

add('//connect.facebook.net/' + navigator.language.replace('-', '_') + '/all.js#xfbml=1&appId=null', 'facebook-jssdk');

You could also add the LinkedIn SDK.

 // LinkedIn SDK 
 add('//platform.linkedin.com/in.js');

Here is an updated version including the updates of @mathiasbynens from his post on the similar topic + some adjustments.

JSFiddle: http://jsfiddle.net/ngryman/cEuxD/
Fork: https://gist.github.com/ngryman/5266324

• using all relative urls: google plus seems to work wo/ https, and gga now works w/ relative urls.
• not using document fragment as I find it a little bit overkill :)
• using the iframe version of the Facebook button (not in the docs anymore I think, but works).

(function(d, u) {
    var s = d.scripts[0],
        i = u.length, g;
    while (i--) {
        g = d.createElement('script');
        g.src = '//' + u[i] + '.js';
        s.parentNode.insertBefore(g, s);
    }
}(document, [
    // Google Analytics
    'google-analytics.com/ga',
    // Google+ button
    'apis.google.com/js/plusone',
    // Facebook SDK
    'connect.facebook.net/en_US/all',
    // Twitter SDK
    'platform.twitter.com/widgets'
]));

@zenopopovici - to set api_key, LinkedIn needs a callback. I forked this GIST a while ago and added callback method, you can preview it here: @3952471 . I know it's outdated, but I hope you'll be able to figure it out.

How can I add jQuery?

I would change the while statement to this

while (i--) {
    var  src = (u[i].lastIndexOf('http', u[i]) === -1) ? '//' + u[i] : u[i];

    g = d.createElement('script');
    g.src += (u[i].indexOf('.js', u[i].length - 3) === -1) ? src + '.js' : src;
    s.parentNode.insertBefore(g, s);
}

This makes the following things possible:

• it's possible to add scripts with ".js" at the end
• it's possible to add files with an absolute URL