How can I make facebook like buttons faster?

问题

in my website, for each blog entry I have a facebook like button. So on the index, there is multiple(more than 10 at the moment) like buttons.

These like buttons make my page a bit cumbersome to use. The total page time becomes several seconds and it's laggy/jumpy while loading(even though all the content is loaded) while it's loading. Is there anyway to fix this other than not showing the like button on the index? (a single like button on a page produces negligible lag)

For reference, my website is at http://lastyearswishes.com In firebug, you can see that the page load time is 20 seconds, of which about 200 milliseconds is tied back to my actual website. Each facebook like button appears to do three separate non-cacheable, unique requests.

Afterthought: Now (nearly 2 years later) I decided to give up on facebook. Even with asynchronous code it still enduced a noticable delay in page rendering time. It also uses some stange javascript that screws up my layout. When dropping in twitter buttons, my layout looked immediately the way it should (something with alignment and float that facebook did. I could never use margin or anything to get facebook to line up like I wanted)

回答1:

Facebook Developers provides the javascript to create an asynchronous Like button

found here: Loading the SDK Asynchronously

c/p'd here:

<div id="fb-root"></div>
<script>
  window.fbAsyncInit = function() {
    FB.init({appId: 'your app id', status: true, cookie: true,
             xfbml: true});
  };
  (function() {
    var e = document.createElement('script'); e.async = true;
    e.src = document.location.protocol +
      '//connect.facebook.net/en_US/all.js';
    document.getElementById('fb-root').appendChild(e);
  }());
</script>

Updated:

Try just this portion (and add #xfbml=1 at the end of the URL, should be the same result on your site but async loading):

<div id="fb-root"></div>
<script>
  (function() {
    var e = document.createElement('script'); e.async = true;
    e.src = document.location.protocol +
      '//connect.facebook.net/en_US/all.js#xfbml=1';
    document.getElementById('fb-root').appendChild(e);
  }());
</script>

Put this script at the bottom of your page

来源：https://stackoverflow.com/questions/5724994/how-can-i-make-facebook-like-buttons-faster

标签

facebook

facebook-like