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 the extra functionality you get with it like tracking Likes, comments, and the send button.

Does anyone have a solution to this? I'm sure I'm not the only site with 10+ Like buttons on it.

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

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