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'));

Nice!

Some quick feedback:

• Why .cloneNode(true) though? It seems .cloneNode(false) would be good enough in this case.
• Also, you could make it z.async = z.src = u[i]; if you wanted to (although that’s probably less readable). If optimal Firefox 3.6 support is not a concern you could skip setting .async entirely.
• You could get rid of a variable by re-using z outside the while loop instead of t.

(function(d,e){

    var u = [
        ('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js', // Google Analytics
        'https://apis.google.com/js/plusone.js', // Google +1 Button
        '//connect.facebook.net/en_US/all.js' // Facebook JS SDK
    ],
    i = u.length,
    f = d.createDocumentFragment(),
    s = d.createElement(e),
    z;

    while (i--) {
        z = s.cloneNode(false);
        z.async = z.src = u[i];
        f.appendChild(z);
    }

    (z = d.getElementsByTagName(e)[0]).parentNode.insertBefore(f, z);

}(document,'script'));

Nice!

Some quick feedback:

• Why .cloneNode(true) though? It seems .cloneNode(false) would be good enough in this case.
• Also, you could make it z.async = z.src = u[i]; if you wanted to (although that’s probably less readable). If optimal Firefox 3.6 support is not a concern you could skip setting .async entirely.
• You could get rid of a variable by re-using z outside the while loop instead of t.

(function(d,e){

    var u = [
        ('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js', // Google Analytics
        'https://apis.google.com/js/plusone.js', // Google +1 Button
        '//connect.facebook.net/en_US/all.js' // Facebook JS SDK
    ],
    i = u.length,
    f = d.createDocumentFragment(),
    s = d.createElement(e),
    z;

    while (i--) {
        z = s.cloneNode(false);
        z.async = z.src = u[i];
        f.appendChild(z);
    }

    (z = d.getElementsByTagName(e)[0]).parentNode.insertBefore(f, z);

}(document,'script'));

Thanks! I've updated the Gist to include your changes

Thanks! I've updated the Gist to include your changes

So, this means that can we replace the script that's in html5boilerplate for this one now?

window._gaq = [['_setAccount','UA-00000'],['_trackPageview']];
Modernizr.load({
    load: ('https:' == location.protocol ? '//ssl' : '//www') + '.google-analytics.com/ga.js'
});

So, this means that can we replace the script that's in html5boilerplate for this one now?

window._gaq = [['_setAccount','UA-00000'],['_trackPageview']];
Modernizr.load({
    load: ('https:' == location.protocol ? '//ssl' : '//www') + '.google-analytics.com/ga.js'
});

eddie adapted this to only load social scripts on non-mobile http://jsfiddle.net/eddiemachado/MH5qe/2/

eddie adapted this to only load social scripts on non-mobile http://jsfiddle.net/eddiemachado/MH5qe/2/

Neat. Should probably be modified to be on a per-script basis so that you can still load GA or other desired scripts with the function.

I'm sure that wrapper could be handy for most cases, but just to note that the FB and Twitter SDKs are sometimes also used for things like authentication/follow which may still be desired in a mobile context.

Neat. Should probably be modified to be on a per-script basis so that you can still load GA or other desired scripts with the function.

I'm sure that wrapper could be handy for most cases, but just to note that the FB and Twitter SDKs are sometimes also used for things like authentication/follow which may still be desired in a mobile context.

@necolas Good point. I think the follow buttons would revert to a regular text link without the script, so on mobile, it would just take you to the user's profile. Site that use twitter/facebook would def. have to modify it to fit their needs. Very useful function. Thanks!

@necolas Good point. I think the follow buttons would revert to a regular text link without the script, so on mobile, it would just take you to the user's profile. Site that use twitter/facebook would def. have to modify it to fit their needs. Very useful function. Thanks!

@eddiemachado Oh also, if you wanted to provide non-script fallback links for users (like just link to your FB and G+ pages rather than have Like / +1 buttons), then you can just include them within the div's that get turned into buttons by the FB and Google scripts. Like you said, those could be styled too!

@eddiemachado Oh also, if you wanted to provide non-script fallback links for users (like just link to your FB and G+ pages rather than have Like / +1 buttons), then you can just include them within the div's that get turned into buttons by the FB and Google scripts. Like you said, those could be styled too!

@necolas Great Idea! This technique works for the Google +1 button, but not for facebook: http://jsfiddle.net/eddiemachado/MH5qe/5/

@necolas Great Idea! This technique works for the Google +1 button, but not for facebook: http://jsfiddle.net/eddiemachado/MH5qe/5/

sigh ...Facebook

sigh ...Facebook

You can just put another link inside the Google +1 div and it will render on Mobile. That's a do-able workaround: http://jsfiddle.net/eddiemachado/MH5qe/6/

You can just put another link inside the Google +1 div and it will render on Mobile. That's a do-able workaround: http://jsfiddle.net/eddiemachado/MH5qe/6/

Sneaky! I like it.

Sneaky! I like it.

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

@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).

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.

@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.

Good call. I've gotten so used to ignoring IE, that I didn't take that into account.

Perhaps using something like:

if (document.documentElement.clientWidth > 481) 

would work better?

Good call. I've gotten so used to ignoring IE, that I didn't take that into account.

Perhaps using something like:

if (document.documentElement.clientWidth > 481) 

would work better?

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');

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');

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'
]));

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.

@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?

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

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