fb之類的按鈕未在Chrome瀏覽器以外的任何瀏覽器上顯示

Question

我已經使用iframe代碼在我正在開發的網站上顯示了fb like按鈕，通常對所有瀏覽器來說都是這樣，但這僅在chrome上顯示。

我嘗試使用html5，而xfbml仍未在其他瀏覽器上顯示。

在html5版本的CSS跨度上嘗試過的固定高度和寬度仍未顯示。

讀取height:0; width:0; 鍍鉻height:21; width:73;

為什么會這樣呢？

我還注意到，當我在http://developers.facebook.com/docs/reference/plugins/like/中輸入fb頁面網址時，預覽不會顯示。 嘗試了其他頁面，並顯示了預覽。

這與為什么它沒有在其他瀏覽器上顯示有關嗎？

這是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>