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。