如何让Facebook更像按钮更快？

Question

在我的网站上,对于每个博客条目,我都有一个像facebook一样的按钮.所以在索引上,有多个(目前超过10个)像按钮一样.

这些按钮使我的页面使用起来有点麻烦.总页面时间变为几秒钟,并且在加载时加载时(即使加载了所有内容)它都是滞后/跳跃.除了没有在索引上显示类似按钮之外,还有其他解决方法吗？(页面上的单个按钮产生的延迟可忽略不计)

作为参考,我的网站位于http://lastyearswishes.com.在firebug中,您可以看到页面加载时间是20秒,其中大约200毫秒与我的实际网站相关联.每个facebook like按钮似乎都会执行三个单独的不可缓存的唯一请求.

事后的想法:现在(差不多2年后)我决定放弃facebook.即使使用异步代码,它仍然会导致页面渲染时间显着延迟.它还使用一些stange javascript来搞砸我的布局.当放入推特按钮时,我的布局立即看起来应该是这样的(具有对齐和浮动的东西,Facebook做了.我永远不会使用保证金或任何东西让Facebook按照我想要的排队)

Answer 1

Facebook Developers提供了javascript来创建异步Like按钮

在此处找到:异步加载SDK

c/p'd在这里:

<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>

更新:

尝试这一部分(并#xfbml=1在URL的末尾添加,在您的网站上应该是相同的结果,但异步加载):

<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>

将此脚本放在页面底部