javascript – 什么时候实际使用ChannelUrl?

有人知道传递给FB.init的ChannelUrl参数是否实际上由fb js sdk使用?我可以看到它在我们的nginx日志文件中受到打击,它似乎来自IE8用户,但我似乎无法手动重新创建它.我有一个粉丝页面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的引用流量.

自定义渠道网址是名为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',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.我们正在继续更新我们的文档,作为“操作开发者爱”的一部分,并通过“How-To”博客文章分享更多最佳实践.

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


kindeditor4.x代码高亮功能默认使用的是prettify插件,prettify是Google提供的一款源代码语法高亮着色器,它提供一种简单的形式来着色HTML页面上的程序代码,实现方式如下: 首先在编辑器里面插入javascript代码: 确定后会在编辑器插入这样的代码: <pre
这一篇我将介绍如何让kindeditor4.x整合SyntaxHighlighter代码高亮,因为SyntaxHighlighter的应用非常广泛,所以将kindeditor默认的prettify替换为SyntaxHighlighter代码高亮插件 上一篇“让kindeditor显示高亮代码”中已经
js如何实现弹出form提交表单?(图文+视频)
js怎么获取复选框选中的值
js如何实现倒计时跳转页面
如何用js控制图片放大缩小
JS怎么获取当前时间戳
JS如何判断对象是否为数组
JS怎么获取图片当前宽高
JS对象如何转为json格式字符串
JS怎么获取图片原始宽高
怎么在click事件中调用多个js函数
js如何往数组中添加新元素
js如何拆分字符串
JS怎么对数组内元素进行求和
JS如何判断屏幕大小
js怎么解析json数据
js如何实时获取浏览器窗口大小
原生JS实现别踩白块小游戏(五)
原生JS实现别踩白块小游戏(一)