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上。
(图1)
(图2)
点击Like Button应该出现的效果如下图:
(图3)
facebook开发者文档地址:http://developers.facebook.com/docs/reference/plugins/like/
在其他浏览器中都是正常的。但是在IE中显示不正常,这个Like Button有时出现,有时不出现。通过Facebook在线代码生成工具,操作步骤如下图:
在第二点中提到,未来适应老版本的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。
- 1627: [Usaco2007 Dec]穿越泥地
- 1651: [Usaco2006 Feb]Stall Reservations 专用牛棚
- 1615: [Usaco2008 Mar]The Loathesome Hay Baler麻烦的干草打包机
- Polyspace不认识Interrupt,肿么办?
- 1639: [Usaco2007 Mar]Monthly Expense 月度开支
- 1638: [Usaco2007 Mar]Cow Traffic 奶牛交通
- 1642: [Usaco2007 Nov]Milking Time 挤奶时间
- 1625: [Usaco2007 Dec]宝石手镯
- 1613: [Usaco2007 Jan]Running贝茜的晨练计划
- 1677: [Usaco2005 Jan]Sumsets 求和
- 1609: [Usaco2008 Feb]Eating Together麻烦的聚餐
- 1602: [Usaco2008 Oct]牧场行走
- 【LeetCode 500】关关的刷题日记27 Keyboard Row
- 1601: [Usaco2008 Oct]灌水
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Dynamic Programming - 91. Decode Ways
- Dynamic Programming - 213. House Robber II
- Dynamic Progamming - 198. House Robber
- Dynamic Programming - 221. Maximal Square
- Dynamic Programming - 174. Dungeon Game
- Dynamic Programming - 97. Interleaving String
- Dynamic Programming - 72. Edit Distance
- Dynamic Programming - 64. Minimum Path Sum
- Dynamic Programming - 322. Coin Change
- Dynamic Programming - 279. Perfect Squares
- Dynamic Programming - 120. Triangle
- Dynamic Programming - 63. Unique Paths II
- Tree - 109. Convert Sorted List to Binary Search Tree
- Tree - 108. Convert Sorted Array to Binary Search Tree Easy
- Tree - 236. Lowest Common Ancestor of a Binary Tree