Multiple "Like Button"s on a page

I have a pag开发者_如何学Goe with 20 articles, and for each article, I have a Facebook Like Button, implemented using the tag.

Because of this, my site is greatly slowed down as Firefox makes a query in the background for each of the like button.

Is there anything I can do to reduce this load?

In my experience, all the extra IFRAMES are actually faster than using the JavaScript SDK, even though the Like icons are supposed to load asynchonously. I have a page with about 18 like buttons on it, and at least the IFRAME approach doesn't result in a perceived slowdown for users like the JS version does - the only downside is that the Like buttons "pop" into the page a little late in IFRAMES.

I assume you're using iframe to display your like buttons. Performance is the downside of using iframes. If you've got 20 iframes, then it's equivalent to loading 20 web pages (with 20 independent http requests). As browsers have connection limits per domain, it can take a while for this many iframes to load. This is especially true in older browsers, where connection limit is only 2 per domain, which means that only 2 iframes can load at a time. iframe can also have the negative side effect of blocking other downloads, which makes the problem even worse. You can read all about iframe performance problems here:

http://www.stevesouders.com/blog/2009/06/03/using-iframes-sparingly/

If possible, you may want to consider using xfbml like button instead of iframe. Unfortunately, this means that you'll need to load Facebook's JavaScript SDK, but with 20 like buttons, you should see an overall performance boost.

As an alternative, if you're not keen on the idea of xfbml, you could try a service like OpenLike: http://openlike.org/

From their docs:

A widget is created by first loading the OpenLike javascript and then calling OPENLIKE.Widget(). Multiple widgets can be embedded in the same page, each with different options.

I ended up going with something similar to this solution Lots of XFBML Facebook Like buttons are slow? with JQuery Sonar. It seems to do the trick for me. I'd prefer a single call that loads all the buttons but it's outside of my control.

If I had more time what I'd do is use the facebook API to get the count and make my own buttons (perhaps load the real button on hover if i wanted their functionality but iirc you can just call the "share" function directly). I don't currently have time to massage facebook that much so this is a sorta makeshift hack that I don't think has too many downsides and it seems to be used by a number of different sites.