/* | |
* 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')); |
This comment has been minimized.
This comment has been minimized.
Thanks! I've updated the Gist to include your changes |
This comment has been minimized.
This comment has been minimized.
So, this means that can we replace the script that's in html5boilerplate for this one now?
|
This comment has been minimized.
This comment has been minimized.
eddie adapted this to only load social scripts on non-mobile http://jsfiddle.net/eddiemachado/MH5qe/2/ |
This comment has been minimized.
This comment has been minimized.
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. |
This comment has been minimized.
This comment has been minimized.
@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 |
This comment has been minimized.
This comment has been minimized.
sigh ...Facebook |
This comment has been minimized.
This comment has been minimized.
Sneaky! I like it. |
This comment has been minimized.
This comment has been minimized.
@necolas |
This comment has been minimized.
This comment has been minimized.
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). |
This comment has been minimized.
This comment has been minimized.
@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. |
This comment has been minimized.
This comment has been minimized.
If you add
Btw, maybe it's risky, but to make adaptive language, I'm using
|
This comment has been minimized.
This comment has been minimized.
You could also add the LinkedIn SDK.
|
This comment has been minimized.
This comment has been minimized.
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/
(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'
])); |
This comment has been minimized.
This comment has been minimized.
@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. |
This comment has been minimized.
This comment has been minimized.
How can I add jQuery? |
This comment has been minimized.
This comment has been minimized.
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:
|
This comment has been minimized.
Nice!
Some quick feedback:
.cloneNode(true)
though? It seems.cloneNode(false)
would be good enough in this case.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.z
outside the while loop instead oft
.