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。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏web前端教室

简单粗暴,以小见大 -- 实现一个按钮的前端组件

按钮,一个button,一个div,一个a标签,都可以做成按钮。现在要把它做成一个前端组件,那前端组件是什么? 定义很多,我随便网上查一个,“指一些设计为通用性...

2327
来自专栏刘宁的专栏

Android开发入门的正确姿势

对于从事移动客户端开发者的初学者而言,不论是Android还是iOS开发,对客户端开发有一个整体的认识,然后再逐步深入,这样会有事半功倍的效果。

1.4K0
来自专栏知晓程序

开发 | 提升 1 倍运行效率!有了这些技巧,你的小程序也能快如闪电

微信小程序的一大优势体现在「小」上面,小而轻的微信小程序,能给用户带来非常良好的体验。

1036
来自专栏Python爬虫与算法进阶

App爬虫思路

但是我觉得不够全,首先对于一般的HTTP和HTTPS协议,通过最基本的Fiddler和Charles就可以抓包,具体方法请Google。需要保证两点:App走代...

9942
来自专栏小文博客

查看WordPress站点主题的方法

5992
来自专栏IMWeb前端团队

微信小程序初体验

本文作者:IMWeb 黎清龙 原文出处:IMWeb社区 未经同意,禁止转载 微信小程序初体验 1 背景 微信小程序刚出来的时候就想玩玩了,个人开发者开...

1.3K11
来自专栏Golang语言社区

【Golana语言社区】window应该开发之--cmd杀进程

首先还是给大家简单的介绍下go语言在windows下的应用开发中,例如查杀进程,获取进程的相关数据;操作注册表等等,抑或开发外挂等;用c或者C++,都...

35813
来自专栏小文网

PotPlayer

这个播放器我认为是最好用的,解码库强大,播放流畅,最喜欢的就是可以随时CTRL+C以原大小复制画面帧,还有更多等等等等。

2914
来自专栏微信小程序开发

微信小程序常见问题(三)

知晓程序员,专注微信小程序开发的程序员! 一、获取formId 相信使用过小程序的同学,多少都收到过小程序的通过消息,如下: 这类通知消息,是和好友消息一样展示...

5216
来自专栏DeveWork

WordPress 网站开发“微信小程序”实战(五)

本站WordPress +“微信小程序”实战系列文章已经到了第五篇,这次记录的是“DeveWork极客”小程序v2.0 的更新。2.0 版本在UI 上改动不大,...

3795

扫码关注云+社区

领取腾讯云代金券