当前位置: 首页 > news >正文

Facebook Like Button在IE上的bug

项目主要是欧美项目,所以大多数网站都要集成Facebook,Twitter和Email三个功能。随着Google大力推广Google+,而且现在图片分享也很火热。估计越来越多的网站会添加Google+和Pinterest功能。

但是从目前开放API来看。Facebook是做的最好一家,文档和示例都很丰富,所以开发者也愿意接入FaceBook,不过可惜国内无法正常访问。网站需要兼容IE7-10,Chrome,Firefox和苹果设备上Safari。

功 能需求界面如下,点击图1的图标,弹出一个如图2的模式对话框。然后就有一些相关的信息,用户就把title和description分享出去。点击 Like Button(这里使用的西班牙语)。用户可以输入评论,然后把内容分享到Facebook Timeline上。

clip_image001

(图1)

clip_image002

(图2)

点击Like Button应该出现的效果如下图:

clip_image003

(图3)

facebook开发者文档地址:http://developers.facebook.com/docs/reference/plugins/like/

在其他浏览器中都是正常的。但是在IE中显示不正常,这个Like Button有时出现,有时不出现。通过Facebook在线代码生成工具,操作步骤如下图:

clip_image004

在第二点中提到,未来适应老版本的IE,需要在html标签中添加xml命名空间,http://ogp.me/ns/fb#. 这个是很多开发者容易忘记的一点。但是我们遇到不是这个问题。因为我们使用的Javascript动态拼接最后一个html代码片段。但是我们只有用户点 击了图1的icon,才出现模式对话框,此时才显示Like Button。就是说一开始这个button根本没有显示出来,当我们打开模式对话框,fb:like标签没有去重新解析,所以显示不了。

解决办法是,需要调用FB.XFBML.parse()方法,让浏览器重新去解析一下fb:like标签。

 

 

 

参考网址:http://developers.facebook.com/docs/reference/javascript/FB.XFBML.parse/

在 我们项目中,还不能简单的在拼接html代码片段之后调用FB.XFBML.parse()方法。因为模式对话框没有打开,解析了也是没有用的。所以我们 需要在打开模式对话框的函数里面,先调用FB.XFBML.parse()方法,然后再显示对话框。这样就可以在IE浏览器中正常的显示Like Button。

相关文章:

  • linux安装VNC服务
  • 使用 Xcode 的 Target 区分开发和生产环境
  • 传球接力
  • 数据库表分割技术浅析
  • number 90分的暴力
  • Hybrid App是如何实现网页语言与程序语言的混合?谁占主体?
  • 推荐一个linux下的web压力测试工具神器webbench
  • Jquery(四)——动态篇
  • 怎么解决numpy和matplotlib无法安装问题
  • node.js入门篇
  • UIBezierPath画圆弧的记录
  • $translatePartialLoader加载失败及解决方式
  • shell与if相关参数
  • Java threadpool机制深入分析
  • GC — 垃圾收集算法
  • 深入了解以太坊
  • docker-consul
  • git 常用命令
  • iOS编译提示和导航提示
  • js
  • JSONP原理
  • Js基础——数据类型之Null和Undefined
  • Netty源码解析1-Buffer
  • PHP面试之三:MySQL数据库
  • Travix是如何部署应用程序到Kubernetes上的
  • Vue小说阅读器(仿追书神器)
  • 浮动相关
  • 关键词挖掘技术哪家强(一)基于node.js技术开发一个关键字查询工具
  • 面试总结JavaScript篇
  • 区块链共识机制优缺点对比都是什么
  • 如何邀请好友注册您的网站(模拟百度网盘)
  • 腾讯视频格式如何转换成mp4 将下载的qlv文件转换成mp4的方法
  • 学习ES6 变量的解构赋值
  • 终端用户监控:真实用户监控还是模拟监控?
  • mysql面试题分组并合并列
  • Spring Batch JSON 支持
  • 京东物流联手山西图灵打造智能供应链,让阅读更有趣 ...
  • 直播平台建设千万不要忘记流媒体服务器的存在 ...
  • #QT(智能家居界面-界面切换)
  • (iPhone/iPad开发)在UIWebView中自定义菜单栏
  • (M)unity2D敌人的创建、人物属性设置,遇敌掉血
  • (详细版)Vary: Scaling up the Vision Vocabulary for Large Vision-Language Models
  • (转)EOS中账户、钱包和密钥的关系
  • .Net Web项目创建比较不错的参考文章
  • .NET/C# 使窗口永不激活(No Activate 永不获得焦点)
  • .Net的C#语言取月份数值对应的MonthName值
  • .NET简谈互操作(五:基础知识之Dynamic平台调用)
  • @serverendpoint注解_SpringBoot 使用WebSocket打造在线聊天室(基于注解)
  • [ 云计算 | AWS 实践 ] Java 如何重命名 Amazon S3 中的文件和文件夹
  • []指针
  • [20171102]视图v$session中process字段含义
  • [51nod1610]路径计数
  • [Android]Android P(9) WIFI学习笔记 - 扫描 (1)
  • [BZOJ]4817: [Sdoi2017]树点涂色
  • [C puzzle book] types