很多XFBML Facebook Like按钮很慢？ [英] Lots of XFBML Facebook Like buttons are slow?

问题描述

请参阅 http://running.ph/

它只是挂了一段时间，而所有的按钮加载。我已经阅读使用IFrame避免这一点，但我真的想使用XFBML JS的所有额外的功能，像跟踪喜欢，评论和发送按钮。

我相信我不是唯一一个拥有10+以上按钮的网站。

解决方案

通过查看Techcrunch / AOL的作用找到答案。
您在用户滚动时加载XFBML。

1）不要在FB.init上解析XFBML或者加载JS SDK

  FB.init（{
 appId：APP_ID，
 xfbml：false 
}）; 
  

2。）加载jQuery和jquery.sonar.js - 这包含滚动和浏览自定义事件

 < script src =// ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js >< /脚本> 
< script src =http://artzstudio.com/files/jquery-boston-2010/jquery.sonar/jquery.sonar.js>< / script> 
  

3。）jQuery代码解析XFBML on scrollin事件（从Techcrunch窃取）

$ （$（$）{
var $ shareWidgets = $（'.share-widget'）;
$ shareWidgets.bind（'scrollin'，{distance：500}，function（）{
var $ share = $（this）;
if（！$ share.data（'initFB' ）&& window.FB）{
$ share.data（'initFB'，1）;
$ share.unbind（'scrollin'）;
FB.XFBML.parse（ $ share [0]）;
}
}）;
}）;

4）将XFBML标签包装在名为share-widget的类中

 < span class =share-widget>< fb：like>< / fb：like>< / span> 
  

瞧瞧！没有更多的dang XFBML减慢你的页面。当你的页面上有很多XFBML标签时，这只能帮助你。哪些大多数博客可能有。

谢谢AOL！

使用jQuery查看AOL的SlideShare演示文稿： a href =http://www.slideshare.net/daveartz/jquery-in-the-aol-enterprise =noreferrer> http://www.slideshare.net/daveartz/jquery-in-the- aol-enterprise ，他们谈论他们使用的这个和其他优化。

See http://running.ph/

It just hangs chrome for a while, while all the buttons load. I've read using IFrame avoids this but I really want to use XFBML JS for all the extra functionality you get with it like tracking Likes, comments, and the send button.

Does anyone have a solution to this? I'm sure I'm not the only site with 10+ Like buttons on it.

解决方案

ah I found the answer by checking what Techcrunch / AOL does. You load the XFBML as the user scrolls.

1.) Don't Parse XFBML on FB.init or the loading of the JS SDK

FB.init({
  appId  : APP_ID,
  xfbml  : false
});

2.) Load jQuery and jquery.sonar.js - this contains scroll and scrollout custom events

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://artzstudio.com/files/jquery-boston-2010/jquery.sonar/jquery.sonar.js"></script>

3.) jQuery code to parse XFBML on scrollin event (stolen from Techcrunch)

jQuery(document).ready(function($) {
    var $shareWidgets = $( '.share-widget' );
    $shareWidgets.bind( 'scrollin', { distance: 500 }, function() {
        var $share = $( this );
        if (!$share.data( 'initFB' ) && window.FB) {
            $share.data('initFB', 1);
            $share.unbind( 'scrollin' );
            FB.XFBML.parse( $share[0] );
        }
    });
});

4.) wrap your XFBML tags in a class called 'share-widget'

<span class="share-widget"><fb:like></fb:like></span>

and voila! no more dang XFBML slowing down your pages. Ofcourse this only helps when you have a lot of XFBML tags on your page. Which most blogs may have.

Thank you AOL!

See the SlideShare presentation of AOL using jQuery: http://www.slideshare.net/daveartz/jquery-in-the-aol-enterprise where they talk about this and other optimizations they use.

这篇关于很多XFBML Facebook Like按钮很慢？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！