有人知道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/