Facebook「贊」按鈕（HTML5）無法正常工作

Question

因此...在我正在處理的網站上，有一個Facebook「Like」按鈕，點擊後應該變成灰色，並且不喜歡你點擊灰色「Like」按鈕中的「X」。

事情是......它無法正常工作。在IE9中，只要您點擊「贊」，「喜歡」按鈕就會變成一個小文本框，經過仔細檢查後，它實際上是一個Facebook評論窗口，它試圖適應插槽！在Firefox和Safari中（每個都在Windows 7上），如果單擊「Like」按鈕，該按鈕會變爲灰色，但有時（看似隨機），如果您嘗試單擊「X」來「不像」，則會變成在我的FB個人資料照片的頂部，並且似乎試圖將Facebook窗口塞進該插槽。

我不想要Facebook評論窗口或任何 - 我只想讓FB「贊」按鈕切換。

按照該FB的開發人員信息，我的JavaScript之前有這樣的：

<div id="fb-root"></div> 

從那之後，我有：

(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"; 
    fjs.parentNode.insertBefore(js, fjs); 
}(document, 'script', 'facebook-jssdk')); 

周圍的按鈕的代碼，再次按該FB開發者頁面，是：

<div class="fb-like" data-href="http://www.facebook.com/(page to be liked)" data-send="false" data-layout="button_count" data-width="450" data-show-faces="false"></div> 

該網站還沒有在線，所以我不能提供一個鏈接，所以你不能呃，我現在也不可能把它放在網上。

此外，原始代碼具有上述Javascript，但在js.src任務結束時是一個appid。刪除，沒有區別。

還有一個鏈接到Twitter使用類似的變量，但我試圖一起去除所有無濟於事;也許這是干擾。

我還應該尋找什麼？我不能在Chrome或Opera中重現問題，事實上，在Opera中，渲染速度很慢，看起來像這樣：1）點擊「Like」。 2）看起來像一個文本框，但實際上是一個壓縮的FB註釋框的東西出現。 3）顯示灰色的「贊」按鈕。如果您單擊斷開連接，則相反的情況會發生。我開始認爲這可能是Facebook的一端，而不是我的一個bug）。

Answer 1

嗯，我發現如何解決這個問題至少在互聯網爆炸者結束！

問題實際上是Facebook如何渲染Like按鈕。從我可以告訴，這是發生了什麼： 1）用戶點擊「喜歡」。 2）用戶可能需要登錄Facebook並「確認」Like。 3）Facebook將用戶登錄並將用戶標記爲「喜歡」 - 即頁面。 4）Facebook天橋出現。 5）「Like」按鈕變成灰色。

這就是問題的第四步，部分原因是因爲我們嵌入了「Like」按鈕的div標籤。我們專門設置了CSS的溢出爲「隱藏」，這意味着任何不適合「Like」按鈕空間的東西都會被阻擋。所以從理論上講，天橋不應該是可見的，因爲它超出了「喜歡」按鈕的範圍。然而，似乎有些瀏覽器基本上呈現所有內容（包括天橋），那麼推送內容div標籤的盡頭（換句話說，在評論框的右下角），並作爲結果，「Like」按鈕被完全推出，並且THAT被視爲溢出並因此被隱藏。

現在，我發現的是，它似乎步驟4和5往往是一個競賽，看看哪一步能得到第一完成！如果第4步發生，那麼呈現的最後一個東西是灰色的「贊」按鈕 - 這正是我想要的。但是，如果第5步中首先發生，呈現的最後一件事是在評論框，在這裏我需要有變灰的「Like」按鈕其中一部分是現在可見。我想如果我真的強迫整個Facebook框（通過div標籤）消失，然後讓它回來，渲染會重置，我會得到我想要的。它能夠工作 - 只要我至少延遲1毫秒，否則第5步將在完成第4步之前完成。這似乎解決了IE中存在的問題。唯一的一點是，對於第二個非常，非常小的一部分，一個實際上可以看到Facebook的按鈕消失，Twitter的按鈕，我們要其左飛奔到右側，然後回左邊時，FB按鈕來背部。

此外，此修復程序不會真的做很多工作來解決Firefox中的上述問題：在Firefox中，用戶仍然可以通過點擊按鈕處於中呈現的中間。 （需要一秒鐘。）如果用戶在按鈕完成渲染之前嘗試取消「喜歡」，用戶將獲得該評論框的該部分。這看起來完全在Facebook的結尾，不幸的是意味着它超出了我的控制範圍。我所能做的就是希望普通用戶不會對鼠標按鈕感到滿意！

這是不是100％的解決方案，但它是在我原來所在之處一個巨大的進步！