Javascript ChannelUrl何时实际使用?
有人知道传递到FB.init的ChannelUrl参数何时被FB js sdk实际使用吗?我可以看到它在我们的nginx日志文件中被点击,它似乎来自IE8用户,但我似乎无法手动重新创建它。我有一个Fan Page iframe应用程序,带有like按钮和评论插件。你可以看到这篇文章。这是很好的解释 此帖子链接将来可能会更新。因此,我复制粘贴了FB开发者博客上的全部文章,并将其全部归功于作者Javascript ChannelUrl何时实际使用?,javascript,facebook,Javascript,Facebook,有人知道传递到FB.init的ChannelUrl参数何时被FB js sdk实际使用吗?我可以看到它在我们的nginx日志文件中被点击,它似乎来自IE8用户,但我似乎无法手动重新创建它。我有一个Fan Page iframe应用程序,带有like按钮和评论插件。你可以看到这篇文章。这是很好的解释 此帖子链接将来可能会更新。因此,我复制粘贴了FB开发者博客上的全部文章,并将其全部归功于作者 如何:优化社交插件性能 作者:Ankur Pansari 2011年8月3日上午12:00 数百万网站
如何:优化社交插件性能 作者: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>
FB.init({
appId:'您的应用程序ID',
状态:true,//检查登录状态
cookie:true,//启用cookie以允许服务器访问会话,
xfbml:true,//启用xfbml和社交插件
oauth:true,//启用oauth 2.0
频道URL:'http://www.yourdomain.com/channel.html'//自定义通道
});
channelUrl指向您添加到本地目录的文件,该文件有助于提高某些旧浏览器中的通信速度。如果没有channelUrl,我们不得不使用变通方法,例如在隐藏的iframe中加载网页的第二个副本,以正确加载社交插件。这些解决方法增加了加载时间,并增加了Facebook的推荐流量
要创建channel.html文件,请将以下行添加到文件(位于):
如果您能够运行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,例如
在我们的测试中,添加自定义channelUrl可以提高Internet Explorer的性能,因此建议所有开发人员都使用它。当包含该参数时,Internet Explorer在统计上显著提高了性能,其中包含5个XFBML插件的测试网站的加载时间从1.10秒提高到0.43秒
异步加载是另一种简单的策略,它允许页面快速加载,而不会阻止页面其他元素的加载。成功加载JS SDK后,我们调用window.fbAsyninit函数。所有依赖Facebook API调用的前端函数都应该分开,并通过window.fbAsyninit调用。这确保了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>
/*所有Facebook功能都应该包括在内
在这个函数中,或者至少从这里开始*/
window.fbAsyninit=函数(){
FB.init({appId:'你的appId',
状态:正确,
曲奇:是的,
xfbml:true});
FB.api('/me',函数(响应){
console.log(response.name);
});
};
(功能(){
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);
}());
我们已经更新了文档以反映这些选项的重要性,并更改了默认示例代码以包含channelUrl。我们将继续更新我们的文档,作为Operation Developer Love的一部分,并通过“How to”博客帖子分享更多的最佳实践 当我在页面加载期间检查网络流量时,我看到它也被FF和Chrome加载。至于什么时候加载,我不知道。最好在这里提供更多的背景信息,因为链接可能会随着时间的推移而消失。嗯。。。我只是有点懒!:)。。。。谢谢你的建议。下次我会记住这个问题,现在链接已经失效了。可惜你有点懒-p该链接被移动到。总之,Facebook在识别出旧浏览器正在访问SDK时会加载该URL。它可以使用这个URL来加速它的一些功能。如果没有频道文件,它不得不求助于黑客的解决方法,比如在不可见的iframe中加载页面副本。感谢更新链接!我试图用PhoneGap构建一个Facebook移动应用程序,但由于某些原因,我在ChannelUrl方面遇到了一些问题。(记不清他们现在是什么样子了。)在花了很多时间解决这个问题后,发现这个页面只被一个死链接阻塞了,真是令人沮丧!
<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>