Question

在我的网站上，对于每个博客条目，我都有一个像facebook一样的按钮。所以在索引上，有多个（目前超过10个）像按钮一样。

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

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

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

Answer 1

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

在此处找到：Loading the SDK Asynchronously

在这里c / p：

<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，在您的网站上应该是相同的结果，但异步加载）：

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

将此脚本放在页面底部

如何让Facebook更像按钮更快？

1 个答案: