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

发布时间:2019-05-15 发布网站:脚本之家
脚本之家收集整理的这篇文章主要介绍了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”博客文章分享更多最佳实践.

总结

以上是脚本之家为你收集整理的javascript – 什么时候实际使用ChannelUrl?全部内容,希望文章能够帮你解决javascript – 什么时候实际使用ChannelUrl?所遇到的程序开发问题。

如果觉得脚本之家网站内容还不错,欢迎将脚本之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:76874919,请注明来意。
标签: