javascript - fb like 按钮不显示在除 chrome 之外的任何浏览器上

Question

我已经使用 iframe 代码在我正在开发的网站上显示类似 fb 的按钮，通常它对所有浏览器都是正确的，但这只在 chrome 上显示。

我尝试使用 html5，但 xfbml 仍然没有在其他浏览器上显示。

尝试在 html5 版本的 css span 上修复高度和宽度仍然没有显示。

它读取 height:0; 和 width:0; 在 chrome 上读取 height:21; 和 width:73;

为什么会这样？

我还注意到，当我在 http://developers.facebook.com/docs/reference/plugins/like/ 中输入 fb 页面 url 时预览不显示。尝试了其他页面，它显示了预览。

这是否与它在其他浏览器上不显示的原因有关？

这是iframe代码

<iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.facebook.com%2Fpages%2FCarolina-Designer-Cabinets%2F400436533396747&amp;send=false&amp;layout=button_count&amp;width=450&amp;show_faces=false&amp;font&amp;colorscheme=light&amp;action=like&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:21px;" allowTransparency="true"></iframe>

这是网站 http://carolinadesignercabinets.com/

Answer 1

这很奇怪，看起来像是您的布局(可能是 CSS、JS 或 HTML)的特定问题导致了这种情况。另外看起来 iframe 内部代码在非 chrome 浏览器上无法正确呈现。无论如何，Facebook 已宣布 iframe 已弃用，因此我建议您转到他们更新的代码，看看是否可行。在你的情况下:

<div class="fb-like" data-href="http://www.facebook.com/pages/Carolina-Designer-Cabinets/400436533396747" data-send="false" data-layout="button_count" data-width="450" data-show-faces="true"></div>

如果您还没有的话，您可能需要在页面底部包含以下 JS。

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=465232306855359";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>