IE7 问题中的 Facebook Like 按钮答案

【问题标题】：Facebook Like button in IE7 issueIE7 问题中的 Facebook Like 按钮
【发布时间】：2011-04-18 18:49:01
【问题描述】：

我遇到了仅在 IE7 中使用 Facebok Like 按钮图像的问题。这是我用来实现这个的代码：

<html xmlns:og="http://opengraphprotocol.org/schema/" xmlns:fb="http://www.facebook.com/2008/fbml">
.
.
.
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<fb:like href="http://www.facebook.com/xxxxx" show_faces="false" width="100" colorscheme="dark" style="float:left;"></fb:like>
.
.
.

我看到的问题只存在于 IE7 中。喜欢按钮看起来很棒。一旦你“喜欢”了这个项目，它看起来也很棒。不喜欢后你会得到这个：http://screencast.com/t/6qno8HDvYh

如果你再次“喜欢”它，你会得到这个：http://screencast.com/t/NlkXbaD5

感谢任何帮助。我已经在 Google 上到处寻找有这个问题的其他人。这是供参考的网站：http://auto-owners.com/ 任何帮助表示赞赏。

谢谢！

【问题讨论】：

标签： facebook dotnetnuke facebook-like

【解决方案1】：

你试过Facebook之类的IFrame版本吗？我们已经切换到 DNN 的 IFrame 版本——它给我们带来的问题最少。

<iframe src="http://www.facebook.com/plugins/like.php?href&amp;send=true&amp;layout=standard&amp;width=450&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=35" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:35px;" allowTransparency="true"></iframe>

在此处生成：

http://developers.facebook.com/docs/reference/plugins/like/

当 Facebook 服务器出现故障时，您还可以避免页面加载阻塞（上个月发生在许多使用脚本版本的网站上）

【讨论】：

嗨@hamlin11，我会试一试。我发现了其他东西......它在 IE8 中始终显示为我，并启用了 IE7 浏览器和文档模式，并且仅当我登录到 Facebook 时。我会尝试按照您的建议将其切换到 iframe，并让您知道它是如何进行的。但是，如果这是答案，那将是令人失望的，因为我花了很多时间将这个网站全部设置为 FBML！
同意，这可能会令人沮丧。我不记得我们切换到 iFrame 版本的具体原因——我很抗拒，但这对我们来说是必要的。
嗨@hamlin11，我放入了iframe代码，但我仍然看到问题：screencast.com/t/TvY9RCeAdKBE。这很奇怪，因为我在 IE7 的任何页面上都看到了这个。这是 IE7 中 Facebook 的点赞按钮页面的屏幕截图...screencast.com/t/9CVmh48SY2。看起来它只在宽度设置为 283 像素或更少时才会这样做......它没有给出整个按钮的最小宽度。
我在 Facebook 开发者论坛上找到了一个帖子，并在那里发布了我的发现：forum.developers.facebook.net/viewtopic.php?pid=340118#p340118
有趣——至少它不是特定于您的软件的。如果找到答案，请确保并在此处发布答案（是的，您可以在 Stackoverflow 上接受自己的答案 :)）

【解决方案2】：

如果您在 IE7 上使用 iFrame 版本，请检查它是否不会导致页面上的资源多次加载，在我们的例子中，这偶尔会导致显示无信息的 JavaScript 错误。您可以使用 IE Development Helper 插件来查看 HTTP 请求堆栈。

【讨论】：

【解决方案3】：

试试这个：-

<div style="width:48px; overflow:hidden!important;">
 <fb:like class='fb_like' href="http://www.correcturlhere.tld" send="false"
   width="320" height="24" colorscheme="dark" font="tahoma">
 </fb:like>
</div>

width="320" 修复了 IE7 问题，而 div 溢出属性可防止显示不需要的 FB 内容。因此，当 FB 代码的宽度属性小于标准布局的最小宽度 (225px) 时，似乎会出现 IE7 问题。

您可能希望在特定于 IE 的条件中包含开始和结束 div 标记：-

<!--[if IE 7]><div><![endif]-->
[FB code here]
<!--[if IE 7]><div><![endif]-->

为我修好了。希望这会有所帮助。

【讨论】：