zoukankan      html  css  js  c++  java
  • 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。

  • 相关阅读:
    BZOJ 3506 机械排序臂 splay
    BZOJ 2843 LCT
    BZOJ 3669 魔法森林
    BZOJ 2049 LCT
    BZOJ 3223 文艺平衡树 splay
    BZOJ 1433 假期的宿舍 二分图匹配
    BZOJ 1051 受欢迎的牛 强连通块
    BZOJ 1503 郁闷的出纳员 treap
    BZOJ 1096 ZJOI2007 仓库设计 斜率优化dp
    BZOJ 1396: 识别子串( 后缀数组 + 线段树 )
  • 原文地址:https://www.cnblogs.com/liminjun88/p/3013327.html
Copyright © 2011-2022 走看看