如何让 facebook 之类的按钮更快？

发布于 2024-11-02 06:44:15 字数 598 浏览 0 评论 0原文

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

这些类似的按钮使我的页面使用起来有点麻烦。总页面时间变成几秒钟，并且在加载时出现滞后/跳跃（即使所有内容都已加载）。除了不在索引上显示“喜欢”按钮之外，还有其他方法可以解决此问题吗？（页面上的单个“赞”按钮产生的延迟可以忽略不计）

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

事后思考：现在（近两年后）我决定放弃 Facebook。即使使用异步代码，它仍然会导致页面渲染时间明显延迟。它还使用了一些奇怪的 JavaScript，搞乱了我的布局。当放入 Twitter 按钮时，我的布局立即看起来应该是这样的（Facebook 所做的具有对齐和浮动功能的东西。我永远无法使用边距或任何东西来让 Facebook 按照我想要的方式排列）

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

记忆里有你的影子 2024-11-09 06:44:15

Facebook Developers 提供了用于创建异步点赞按钮的 JavaScript

：异步加载 SDK

此处：

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

更新：

尝试一下这部分（并且在 URL 末尾添加 #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 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

回复收藏 0 原文

~没有更多了~