Lots of XFBML Facebook Like buttons are slow?

Question

See http://running.ph/

It just hangs chrome for a while, while all the buttons load. I\'ve read using IFrame avoids this but I really want to use XFBML JS for all th

Answer 1

ah I found the answer by checking what Techcrunch / AOL does. You load the XFBML as the user scrolls.

1.) Don't Parse XFBML on FB.init or the loading of the JS SDK

FB.init({
  appId  : APP_ID,
  xfbml  : false
});

2.) Load jQuery and jquery.sonar.js - this contains scroll and scrollout custom events

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://artzstudio.com/files/jquery-boston-2010/jquery.sonar/jquery.sonar.js"></script>

3.) jQuery code to parse XFBML on scrollin event (stolen from Techcrunch)

jQuery(document).ready(function($) {
    var $shareWidgets = $( '.share-widget' );
    $shareWidgets.bind( 'scrollin', { distance: 500 }, function() {
        var $share = $( this );
        if (!$share.data( 'initFB' ) && window.FB) {
            $share.data('initFB', 1);
            $share.unbind( 'scrollin' );
            FB.XFBML.parse( $share[0] );
        }
    });
});

4.) wrap your XFBML tags in a class called 'share-widget'

<span class="share-widget"><fb:like></fb:like></span>

and voila! no more dang XFBML slowing down your pages. Ofcourse this only helps when you have a lot of XFBML tags on your page. Which most blogs may have.

Thank you AOL!

See the SlideShare presentation of AOL using jQuery: http://www.slideshare.net/daveartz/jquery-in-the-aol-enterprise where they talk about this and other optimizations they use.

Answer 2

Here a quick pure javascript snippet to aid with throttling of multiple like buttons:

https://stackoverflow.com/a/11002386/223002

Answer 3

I had problems with this, too.

It's Social network's API fault. If you look in Chrome to the NET tab, you'll see that there are 252 requests per page! (Facebook, g+, Twitter, your resources)

This is part of problem

loadScriptAsync('//connect.facebook.net/en_US/all.js');

it loads all scripts possible, maybe multiple times without caching. I think there's no chance to avoid this from your side

OT: Why do you require offline&SMS access when logging on your site? I think nobody wise would like to give you him/her phone number and/or offline access

Answer 4

Sharrre loads your sharing buttons only when needed, you can use all like button features and it has built-in Google Analytics tracking.