How can I reduce the loadtime when showing multiple like buttons (about 60 buttons)?

Question

On one of my pages I'm showing about 60 items I would like to be "likeable" via facebook. The problem is that I can not use several pages to show the items since this would reduce the usability of the page. But when loading / showing 60 like buttons is just too much for my browser. The page is not usable anymore because even scrolling takes several seconds because of the impact of showing 60 likte buttons.

Does anybody know of an alternative way of using the like button? Would it be possible to build a custom like button which loads the like count from my local database and somehow triggers the facebook like mechanism when the user clicks on my own like button? This could be done by building a custom like button which on click loads the real like button, hides it and automatically triggers the click on the real like button? Would this even be allowed or is forbidden by the facebook guidelines? If that is the case, is there any other way?

Best regards, Daniel

Answer 1

There are a few things you can do here that may speed up load times:

• Make sure you're only loading the JS SDK once - the latest code from the Like button configurator takes care of this for you.
• Load the JS SDK asynchronously, as described on the JS SDK overview page
• Use the XFBML version of the Like button

Answer 2

You cannot trigger the click of a like button in javascript.

You can however, hide the like button until the user hovers over the like button and create it then.

Something like this might be helpful:

http://www.reddit.com/r/programming/comments/k6kzy/german_publisher_heise_creates_a_privacy/

Answer 3

Use a placeholder image and load them lazily via javascript when the user hovers on it. That's what Techcrunch does.

Answer 4

You should use xFBML version of Like button and load the SDK asynchronously. http://developers.facebook.com/docs/reference/javascript/