有人知道fb js sdk实际使用了传递给FB.init的ChannelUrl参数吗?我可以在我们的nginx日志文件中看到它受到攻击,它似乎来自IE8用户,但是我似乎无法手动重新创建它。我有一个Fan Page iframe应用程序,带有类似的按钮和注释插件。

最佳答案

您可以看到这篇文章。这是很好的解释。

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的引荐流量进行重复计算。

自定义 channel URL是FB.init函数中称为channelUrl的可选参数。初始化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,我们将不得不使用变通办法,例如在 Conceal 的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>

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

关于javascript - 何时实际使用ChannelUrl?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/8980012/

10-10 07:56