javascript 什么时候实际使用 ChannelUrl?
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/8980012/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
When is ChannelUrl actually used?
提问by Hymanson
Does anyone know when the ChannelUrl parameter, passed to FB.init, is actually used by the fb js sdk? I can see it getting hit in our nginx log files and it appears to be from IE8 users, but I cant seem to manually recreate it. I have a Fan Page iframe app, with like buttons and the comment plugins.
有谁知道传递给 FB.init 的 ChannelUrl 参数何时被 fb js sdk 实际使用?我可以看到它在我们的 nginx 日志文件中被击中,它似乎来自 IE8 用户,但我似乎无法手动重新创建它。我有一个粉丝页面 iframe 应用程序,带有喜欢的按钮和评论插件。
回答by Abdul Ahad
you can see this post. it is well explained.
你可以看到这个帖子。这是很好的解释。
https://developers.facebook.com/blog/post/2011/08/02/how-to--optimize-social-plugin-performance/
https://developers.facebook.com/blog/post/2011/08/02/how-to--optimize-social-plugin-performance/
this post link may update in future. so I'm copy-paste-ing the whole post from the FB developer blog with giving the full credit to the author.
此帖子链接将来可能会更新。所以我复制粘贴了 FB 开发者博客中的整篇文章,并完全归功于作者。
How-To: Optimize Social Plugin Performanceby Ankur Pansari- August 3, 2011 at 12:00am
操作方法:优化社交插件性能by Ankur Pansari- 2011 年 8 月 3 日上午 12:00
Millions of websites use XFBML to render social plugins. We wanted to share some best practices that can improve the performance of these on your websites. Specifically, we offer custom channelUrl and asynchronous loading which, when used, will improve load times and reduce other issues such as double-counting of referral traffic from Facebook.
数以百万计的网站使用 XFBML 来呈现社交插件。我们想分享一些可以提高这些在您的网站上的性能的最佳实践。具体而言,我们提供自定义 channelUrl 和异步加载,使用时将缩短加载时间并减少其他问题,例如重复计算来自 Facebook 的推荐流量。
The custom channel URL is an optional parameter in the FB.init function called channelUrl. When you initialize the JavaScript library, add the channelUrl parameter in the FB.init function:
自定义频道 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>
The channelUrl points to a file that you add to your local directory which helps improve communication speed in some older browsers. Without the channelUrl, we are forced to use workarounds such as loading a second copy of the webpage in a hidden iframe to properly load social plugins. The workarounds increase load times and inflate referral traffic from Facebook.
channelUrl 指向您添加到本地目录的文件,这有助于提高某些旧浏览器的通信速度。如果没有 channelUrl,我们将被迫使用变通方法,例如在隐藏的 iframe 中加载网页的第二个副本以正确加载社交插件。变通方法会增加加载时间并增加来自 Facebook 的推荐流量。
To create a channel.html file, add the following line to the file (located at http://www.yourdomain.com/channel.html):
要创建 channel.html 文件,请将以下行添加到文件(位于http://www.yourdomain.com/channel.html):
<script src="//connect.facebook.net/en_US/all.js"></script>
If you have the ability to run PHP, we strongly advise setting a long cache for the channelUrl file to ensure optimal performance. Here is a sample PHP script that accomplishes this:
如果您有能力运行 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>
In this case, you should also set the channelUrl file to the fully qualified URL such as http://www.yourdomain.com/channel.php.
在这种情况下,您还应该将 channelUrl 文件设置为完全限定的 URL,例如http://www.yourdomain.com/channel.php。
In our testing, adding a custom channelUrl improves the performance in Internet Explorer and therefore its inclusion is advised for all of our developers. Internet Explorer yields statistically significant performance gains when including the parameter, where the load time of a test website with 5 XFBML plugins improves from 1.10 seconds to 0.43 seconds.
在我们的测试中,添加自定义 channelUrl 可以提高 Internet Explorer 的性能,因此建议我们所有的开发人员都使用它。当包含该参数时,Internet Explorer 会产生统计上显着的性能提升,其中带有 5 个 XFBML 插件的测试网站的加载时间从 1.10 秒提高到 0.43 秒。
Asynchronous loading is another simple tactic that allows your page to load quickly without blocking the loading of other elements of your page. Upon successful loading of the JS SDK, we call the window.fbAsyncInit function. All front-end functions that depend on Facebook API calls should be separated and called via window.fbAsyncInit. This ensures that the Facebook features are loaded in a non-blocking fashion and will speed up its rendering, which has positive SEO benefits. When designing your social features, you should approach it with this mentality to start.
异步加载是另一种简单的策略,它允许您的页面快速加载而不会阻止页面其他元素的加载。JS SDK 成功加载后,我们调用 window.fbAsyncInit 函数。所有依赖 Facebook API 调用的前端函数都应该分开,并通过 window.fbAsyncInit 调用。这可确保 Facebook 功能以非阻塞方式加载,并将加快其呈现速度,这具有积极的 SEO 优势。在设计您的社交功能时,您应该以这种心态开始。
For example:
例如:
<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>
We've updated our documentation to reflect the importance of these options and changed the default sample code to include a channelUrl. We are continuing to update our docs as part of Operation Developer Love as well as share more best practices via “How-To” blog posts.
我们更新了文档以反映这些选项的重要性,并更改了默认示例代码以包含 channelUrl。作为 Operation Developer Love 的一部分,我们将继续更新我们的文档,并通过“操作方法”博客文章分享更多最佳实践。