Question

有没有人知道传递给FB.init的ChannelUrl参数何时被fb js sdk实际使用？我可以看到它在我们的nginx日志文件中被击中，它似乎来自IE8用户，但我似乎无法手动重新创建它。我有一个粉丝页面iframe应用程序，带有类似按钮和评论插件。

Answer 1

你可以看到这篇文章。很好地解释了。

https://developers.facebook.com/blog/post/2011/08/02/how-to--optimize-social-plugin-performance/

此帖子链接可能会在将来更新。所以我将这篇文章从FB开发者博客上复制粘贴，给予作者充分的信任。

操作方法：优化社交插件性能 Ankur Pansari - 2011年8月3日上午12:00

数百万个网站使用XFBML呈现社交插件。我们希望分享一些可以改善网站性能的最佳做法。具体来说，我们提供自定义channelUrl和异步加载，这些加载在使用时将缩短加载时间并减少其他问题，例如重复计算来自Facebook的引荐流量。

自定义通道URL是名为channelUrl的FB.init函数中的可选参数。初始化JavaScript库时，在FB.init函数中添加channelUrl参数：

<div id="fb-root"></div>
 <script src="//connect.facebook.net/en_US/all.js"></script>
 <script>
   FB.init({
     appId  : 'YOUR APP ID',
     status: true, // check login status
     cookie: true, // enable cookies to allow server to access session,
     xfbml: true, // enable XFBML and social plugins
     oauth: true, // enable OAuth 2.0
     channelUrl: 'http://www.yourdomain.com/channel.html' //custom channel
   });
 </script>

channelUrl指向您添加到本地目录的文件，这有助于提高某些旧版浏览器的通信速度。如果没有channelUrl，我们将被迫使用变通方法，例如在隐藏的iframe中加载网页的第二个副本以正确加载社交插件。这些变通办法增加了加载时间，并增加了Facebook的推荐流量。

要创建channel.html文件，请将以下行添加到文件（位于http://www.yourdomain.com/channel.html）：

<script src="//connect.facebook.net/en_US/all.js"></script>

如果您能够运行PHP，我们强烈建议为channelUrl文件设置长缓存以确保最佳性能。以下是完成此操作的示例PHP脚本：

<?php
  $cache_expire = 60*60*24*365;
  header("Pragma: public");
  header("Cache-Control: maxage=".$cache_expire);
  header('Expires: '.gmdate('D, d M Y H:i:s', time()+$cache_expire).' GMT');
?>

<script src="//connect.facebook.net/en_US/all.js"></script>

在这种情况下，您还应将channelUrl文件设置为完全限定的URL，例如http://www.yourdomain.com/channel.php。

在我们的测试中，添加自定义channelUrl可以提高Internet Explorer的性能，因此建议所有开发人员都使用它。包含参数时，Internet Explorer会产生统计上显着的性能提升，其中带有5个XFBML插件的测试网站的加载时间从1.10秒提高到0.43秒。

异步加载是另一种简单的策略，它允许您的页面快速加载而不会阻止加载页面的其他元素。成功加载JS SDK后，我们调用window.fbAsyncInit函数。所有依赖于Facebook API调用的前端函数都应该通过window.fbAsyncInit分离和调用。这确保了Facebook功能以非阻塞方式加载，并将加速其呈现，这具有积极的SEO优势。在设计社交功能时，您应该以这种心态接近它。

例如：

<html xmlns:fb="https://www.facebook.com/2008/fbml">
<body>
<div id="fb-root"></div>
<script>
  /* All Facebook functions should be included 
     in this function, or at least initiated from here */
  window.fbAsyncInit = function() {
    FB.init({appId: 'your app id', 
             status: true, 
             cookie: true,
         xfbml: true});

    FB.api('/me', function(response) {
      console.log(response.name);
    });
  };
  (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>
</body>
<html>

我们更新了文档以反映这些选项的重要性，并更改了默认示例代码以包含channelUrl。我们将继续更新我们的文档，作为Operation Developer Love的一部分，并通过“操作方法”博客文章分享更多最佳实践。

ChannelUrl何时实际使用？

1 个答案: