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.

Celestyn

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.

Celestyn

Any similar solution for twitter buttons? – Lugworm

Good fix - still takes forever when scrolling though, but better than before. – Cockcroft

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.

Ambassador

Yes I use sharrre now, especially for custom social buttons. – Celestyn

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

Holy

that script just loads the JS at the end of the DOM, it creates the script tags. its the same whether or not i use that or regular JS tags – Celestyn

Answer 4

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

https://mcmap.net/q/1161922/-html-how-to-efficiently-do-multiple-facebook-like-buttons-on-one-page

Deserving