Facebook SDK + html5和xfbml的最佳使用方式是什么?

3

我已经按照Facebook JavaScript SDK网站上的说明在我的网站上实现了JavaScript SDK。

<div id="fb-root"></div>
<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId      : 'YOUR_APP_ID', // App ID
      channelUrl : '//WWW.YOUR_DOMAIN.COM/channel.html', // Channel File
      status     : true, // check login status
      cookie     : true, // enable cookies to allow the server to access the session
      xfbml      : true  // parse XFBML
    });

    // Additional initialization code here
  };

  // Load the SDK Asynchronously
  (function(d){
     var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
     if (d.getElementById(id)) {return;}
     js = d.createElement('script'); js.id = id; js.async = true;
     js.src = "//connect.facebook.net/en_US/all.js";
     ref.parentNode.insertBefore(js, ref);
   }(document));
</script>

但是在“like”插件代码部分,它给出了以下代码:
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=YOUR_APP_ID";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

我的第一个问题:哪种代码更好?它们有什么区别吗?

我的第二个问题是关于按钮或评论框的HTML5或XFBML渲染。我运行的是一个不支持HTML5的wordpress博客。

我的第二个问题:使用HTML5还是XFBML最好?其中一个更快,另一个更少被支持吗?

谢谢!


请查看此处:https://dev59.com/pmXWa4cB1Zd3GeqPMmqN#11206747 - borisdiakur
1个回答

5
第一种解决方案异步加载Facebook JavaScript库,如果正确安排,可以为访问者提供更快的页面呈现。将<div id=fb-root">window.fbAsyncInit定义放在<body>标签后面,以便在Facebook JavaScript库加载之前进行定义。
相比之下,function(d)定义应该位于您的页面底部,在</body>标签之前,从而延迟加载Facebook库,直到所有其他页面元素都已在其上加载,确保首先呈现自己的突出页面元素。 function(d,s,id)代码片段看起来较新(带有更多参数),但我认为它不像第一种方法那样异步加载。因此,目前我会使用旧版(第一版),直到Facebook发布新版本的function(d,s,id)代码片段的异步版本。
对于第二个问题,我建议继续使用XFBML代码实现,直到您网站的IE7或IE8用户非常少。一旦他们转向使用IE9+,那么我将切换到HTML5实现,这对搜索引擎、屏幕阅读器和爬虫具有许多语义上的优势。

嗨马克!谢谢你的好答案。我在想,我是否需要用</script>来关闭代码的第一部分,并将最后一部分放在底部的<script>中,还是需要保持原样? - user1466794
如果您正在拆分第一个异步解决方案,则需要在每个拆分部分周围放置<script></script>。请确保将Facebook库加载函数function(d)定位在影响页面呈现的任何JavaScript之后,因为您希望首先对这些元素执行操作,但在不影响页面呈现的任何异步库(例如Google Analytics)加载之前。 - Mark Mehl

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接