Social button BFFs

September 27th, 2011. Tagged: facebook, JavaScript, performance

TL;DR: Loading JavaScript asynchronously is critical for the performance of your web app. Below is an idea how to do it for the most common social buttons out there so you can make sure these don't interfere with the loading of the rest of your content. After all people need to see your content first, then decide if it's share-worthy.

Japanese translation by Koji Ishimoto is here

Facebook now offers a new asynchronous snippet to load the JavaScript SDK, which lets you load social plugins (e.g. Like button) among doing other more powerful things.

It has always been possible to load the JS SDK asynchronously but since recently it's the default. The code looks pretty damn nice (I know, right!), here's how it looks like (taken from here):

(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) {return;}
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

Some nice steal-me JS patterns here:

  • immediate (self-invoking) function so not to bleed vars into global namespace
  • pass oft-used objects (document) and strings ("script", "facebook-jssdk") to the immediate function. Sort of rudimentary manual minification, while keeping the code readable
  • append script node by using the first available script element. That's 99.99% guaranteed to work unless all your code is in body onload="..." or img onload or something similar (insanity, I know, but let's allow generous 0.01% for it)
  • assign an ID to the node you append so you don't append it twice by mistake (e.g. like button in the header, footer and article)

All buttons' JS files

Other buttons exist, most notably the Twitter and Google+1 buttons. Both of these can be loaded with async JavaScript whether or not this is the default in their respective configurators.

So why not make them all get along and shelter them under the same facebook immediate function? We'll save some bytes and extra script tags in the HTML. For G+/T buttons all we need is a new script node. Google+'s snippet has some additional attribs such as type and async, but these are not really needed. Because type is always text/javascript and async is always true. Plus we kinda take care of the async part anyways.

The end result:

  <div id="fb-root"></div>
  <script>(function(d, s, id) {
    // fb + common
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) {return;}
    js = d.createElement(s); js.id = id;
    js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
    fjs.parentNode.insertBefore(js, fjs);
    // +1
    js = d.createElement(s); 
    js.src = 'https://apis.google.com/js/plusone.js';
    fjs.parentNode.insertBefore(js, fjs);
    // tweet
    js = d.createElement(s); 
    js.src = '//platform.twitter.com/widgets.js';
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));</script>

So this thing loads all three JS files required by the three buttons/plugins.

Additionally we can wrap the node creation/appending part into a function. So all the code is tighter. Here's the final snippet:

<div id="fb-root"></div><!-- fb needs this -->
<script>(function(d, s) {
  var js, fjs = d.getElementsByTagName(s)[0], load = function(url, id) {
    if (d.getElementById(id)) {return;}
    js = d.createElement(s); js.src = url; js.id = id;
    fjs.parentNode.insertBefore(js, fjs);
  };
  load('//connect.facebook.net/en_US/all.js#xfbml=1', 'fbjssdk');
  load('https://apis.google.com/js/plusone.js', 'gplus1js');
  load('//platform.twitter.com/widgets.js', 'tweetjs');
}(document, 'script'));</script>

All buttons' markup

Next is actually advising the scripts where the widgets should be rendered. Facebook offers XFBML syntax, with tags such as <fb:like>, but it also offers pure HTML(5) with data-* attributes. Luckily, so do all others.

Here's an example:

<!-- facebook like -->
<div class="fb-like" data-send="false" data-width="280"></div>
<!-- twitter -->
<a class="twitter-share-button" data-count="horizontal">Tweet</a>
<!-- g+ -->
<div class="g-plusone" data-size="medium"></div>

G+ requires a div element (with g-plusone class name), Twitter requires an a (with a twitter-share-button class name). Facebook will take any element you like with a fb-like class name (or fb-comments or fb-recommendations or any other social plugin you may need)

Also very important to note that you can (and should) load the JS files once and then render as many different buttons as you need. In Facebook's case these can be any type of plugin, not just like buttons. Economy of scale - on JS file, many plugins.

All together now

So here's the overall strategy for loading all those buttons.

  1. Copy the JS above at the bottom of the page right before /body just to be safe (G+ failed to load when the markup is after the JS). This will also help you make sure there should be only one place to load the JS files, although the snippet takes cares of dedupe-ing.
  2. sprinkle plugins and buttons any way you like anywhere on your pages using the appropriate configurator to help you deal with the data-* attributes (FB, G+, Tw)
  3. Enjoy all the social traffic you deserve!

To see it all in action - go to my abandoned phonydev.com blog. Yep, those buttons play nice in mobile too.

Tell your friends about this post: Facebook, Twitter, Google+

57 Responses

  1. Good catch how did you find out about this change?

  2. Great info! I’ll test it in one of my sites. I had noticed loading times increasing after adding G+ button to my site. I also wonder how you discovered this.

    Thanks!

  3. Nice article, thanks!

    Are data-* attributes OK for maximum compatibility with browsers, including IE6?

    I’ev seen Lanyrd uses classes for it’s badges: http://lanyrd.com/services/badges/docs/

  4. Nice overview!

    I wrote about optimizing the asynchronous Google Analytics snippet (and by extension, any similar snippet) a while ago, and it’s good to see the same tricks are applied here :)

    If you want to be even more efficient, you could append all these scripts to a document fragment so you can insert them into the DOM all at once. Nicolas Gallagher wrote a script that does this: https://gist.github.com/1025811

  5. OK, still awaiting moderation… I found the answer elsewhere, you can remove both comments: http://stackoverflow.com/questions/2412947/do-html5-custom-data-attributes-work-in-ie-6

  6. very helpful – thanks :)

  7. @Mathias, your analytics snippet analysis was (still is :) ) awesome, thanks! And good point about the fragment

    @NIcholas, I’ll leave your comments if you don’t mind, so those coming after you see the answer :)

  8. Thanks for the tip, I wish there was a way to load a translated G+ button this way, but specifying the language seems to be trickier with G+ than Facebook.

  9. Nice Stoyan. Good to see a new blog post. Keep ‘em coming.

    I used the snippet on my new site, http://www.cdnplanet.com

  10. [...] Social button BFFs Good post from Stoyan Stefanov on how to make your social buttons load asynchronously. [...]

  11. [...] was then further fueled by a Post from Stoyan Stefanov, where he showed a way to go async for actually all of the most prominent [...]

  12. That is super information! Thanks for sharing! I’m going to Tweet about your blog.

  13. Perfect Stoyan!.

    But I think that the var js must be declared inside load function.

  14. [...] Wie man Social Button performance orientiert in seiner Website einbindet erklärt Stoyan Stefanov in seinem Blog [...]

  15. [...] JavaScript の著者である Stoyan Stefanov は、2011年9月にブログ記事 「Social button BFFs」 で類似のスクリプトを発表しました。おもしろいことに彼は、Google [...]

  16. I used something very similar but ran into an issue with buttons added later to the page (primarily modals). FB and Twitter seem to have reparsing methods but I couldnt find one for Digg or G+. I ended up reloading those scripts in that event. Don’t suppose you have come across a better way to do that, have ya?

  17. [...] for an asynch version, but there was none to be found. Then we tried to hack a workaround, using this tutorial from Stoyan Stefanov, but no dice (not a criticism of Stoyan’s tips, just the nature of this [...]

  18. Thanks Stoyan, this is great.
    Aaron Peters just wrote article (also great) in which he uses your approach but takes the additional step of making the scripts not just async, but also defers to post-onload. Check it out:
    http://www.aaronpeters.nl/blog/why-loading-third-party-scripts-async-is-not-good-enough

    Keep up the great work!
    /Chris

  19. This is great.

    How do yuo go about tracking clicks from FaceBook and Twitter though?
    Using something like ‘twitterWidgets.onload = _ga.trackTwitter;’

    Any help appreciated.

  20. [...] should use. If the widgets you use don’t offer an async version you can try Stoyan’s Social button BFFs async [...]

  21. This is fantastic. Implementing it on our site now, thanks for posting!

  22. I could really use some help integrating support for Flattr.com and Pinterest.com button into this, I tried adding there JS file to the load() portion but it does not load them for some reason, they have a similar button to all the others, could someone integrate those into this possibly?

  23. This is the code for a Flattr button

    (function() {
    var s = document.createElement(‘script’), t = document.getElementsByTagName(‘script’)[0];
    s.type = ‘text/javascript’;
    s.async = true;
    s.src = ‘http://api.flattr.com/js/0.6/load.js?mode=auto’;
    t.parentNode.insertBefore(s, t);
    })();

    title

  24. Wow. What an information! Thanks a lot for the help!

  25. Cheers for that, as a non-coder type have been able to get this up and running on a site where it was causing loads of hangs. Works a treat!

  26. I can’t believe I never thought of this. I wish I could tell you how many social buttons I have added to websites.

  27. [...] Radar should use. If the widgets you use don’t offer an async version you can try Stoyan’s Social button BFFs async [...]

  28. I’d like to say thanks very much for the info and much more efficient script for calling these social buttons and they can be very very slow to load. Using on my site now ! Cheers

  29. How would you include social apps like addthis that if using your technique, won’t register a vote?
    Example: If I click on the g+1 it will give me the ! saying there was a server error.
    Any updates on how to fix this?

  30. [...] code was inspired by Stoyan Stefanov’s Social Button BFFs blog post. Tweet Vote on [...]

  31. I’m wondering if yo know how to integrate LinkeIN button on your code

  32. [...] Use the JavaScript snippets that load the JS files asynchronously in order to speed up the user experience. Most providers offer you an asynchronous version of the script you're including on your page. If they don't, let them know and meanwhile do it yourself [...]

  33. thanks a lot this tutorial was really helpful..i had been searching for ways to load all my social media buttons asynchronously..you have provided a very neat method! :D

  34. Actually there’s socialitejs.com too, that do exactly that! :)

  35. Tighter code? :)

    if (!d.getElementById(id)) {
    js = d.createElement(s); js.src = url; js.id = id;
    fjs.parentNode.insertBefore(js, fjs);
    }

    Would love to see a post based on your High Performance Social talk — great new ideas!

  36. Great code.
    Dave Artz, thanks for the updated code!!!

  37. Cheryll Hufstetler

    I always give facebook likes to pages that i like. -

    My very own web site
    http://www.caramoantourpackage.com/

  38. Always looking for ways to optimize site performance – thanks so much for the post and valuable commentary!

  39. Very interesting! Thank you very much for sharing.

  40. Thanks after playing around with it we are now using this on our website. Great code! Plus +1 for this post.

  41. Great thoughts on this. Thanks!
    Can you also show how to implement the LinkedIn buttons this way?
    http://developer.linkedin.com/plugins/share-plugin-generator

  42. Nice, thanks for sharing!

  43. [...] their high performing code won’t be able to help you at all. The rule of thumb is to include those scripts asynchronously. That way you make sure that your content won’t be blocked from rendering in [...]

  44. [...] their high performing code won’t be able to help you at all. The rule of thumb is to include those scripts asynchronously. That way you make sure that your content won’t be blocked from rendering in [...]

  45. I’m no longer certain the place you are getting your information, but great topic. I needs to spend some time studying much more or figuring out more. Thanks for magnificent info I used to be on the lookout for this information for my mission.

  46. [...] Social button BFFs [...]

  47. Any way to enable Google Analytics tracking for such social sharing buttons (using social-tracking.js)? The tutorials on the web use different methods for inserting the buttons than the one here. Thanks!

  48. Wonderful blog! I found it while searching on Yahoo News.
    Do you have any tips onn howw to get listed in Yahooo News? I’ve been trying
    for a while but I never seem to get there! Appreciate it

  49. Very nice approach, I´ve been looking for a way to do this without affecting load time too much. I´ll give it a try, thanks!

  50. Excellent article! We will be linking to this great article on our
    site. Keep up the great writing.

  51. Hellpo there! This post couldn’t be written any better!
    Going through this post reminds me of my previous roommate!
    He continually kept preaching about this. I am
    going to send this article to him. Pretty
    sure he will have a very good read. Many thanks for sharing!

  52. Sweet blog! I found it while surfing around on Yahoo News.
    Do you have any tips on how to get listed in Yahoo
    News? I’ve been trying for a while but I never seem to get there!
    Many thanks

  53. Could some one please help me add Pinterest to the plugin ? I really need Pinterest for my blog.

    thanks

  54. My spouse and I stumbled over here coming from a different web address and thought I should check things out.
    I like what I see so now i’m following you. Look forward to going over your web
    page yet again.

  55. Hello to all, how is the whole thing, I think every one is getting more
    from this site, and your views are good for new users.

  56. Undeniably believe that which you said. Your favorite justification appeared to be on the web the
    simplest thing to be aware of. I say to you, I certainly get irked while people consider
    worries that they plainly don’t know about.

    You managed to hit the nail upon the top and also defined out the whole thing
    without having side effect , people could take a signal. Will likely be
    back to get more. Thanks

  57. Awesome Post . Really nice . the Facebook and Twitter Js always take time to load . nice this is nice solution for it

Leave a Reply