Jac*_*son 10 javascript facebook
有没有人知道传递给FB.init的ChannelUrl参数何时被fb js sdk实际使用？我可以看到它在我们的nginx日志文件中被击中,它似乎来自IE8用户,但我似乎无法手动重新创建它.我有一个粉丝页面iframe应用程序,有类似的按钮和评论插件.
Abd*_*had 19
你可以看到这篇文章.很好地解释了.
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的一部分,并通过"操作方法"博客文章分享更多最佳实践.
| 归档时间： |
|
| 查看次数： |
13822 次 |
| 最近记录： |