Facebook Like按鈕 - 防止XFBML版本調整高度

我試圖使用Facebook Like按鈕的XFBML版本。在零個喜歡的網頁，主要的問題是事件的順序加載頁面時：Facebook Like按鈕 - 防止XFBML版本調整高度

HTML負載
按鈕載入像
按鈕展開高度，推它下面的內容下來
按鈕看它有沒有喜歡
按鈕降低高度，移動內容如下備份

出現這種情況，無論怎麼Javascript SDK已加載（標準或異步），並且「顯示面孔」已啓用/禁用。

有沒有辦法來防止這種分散注意力的自動調整大小發生？

這是test page顯示的行爲。

來源

2011-03-17 Ryan

我一直在想這一段時間。我沒有一個滿意的答案，除了可以「雙重存儲」喜歡和Facebook用戶標識符（但這可能過於複雜）。 – 2011-04-05 16:49:33

我已經沮喪了很多次。我終於在jQuery中做了一個破解。它適用於Chrome，FF和Safari。對不起，我不在IE電腦附近......但這個概念應該保留。

HTML

<div style="display:block;float:left;width:450px;min-height:35px;"> 

    <div id="like" style="display:none;float:left;width:450px;height:35px;overflow:hidden;"> 

     <fb:like href="" show_faces="true" width="450" font=""></fb:like> 

    </div> 

</div>

的jQuery

$('#like').delay(500).fadeIn(500,function(){ $(this).css({'height':"inherit",'overflow':"inherit"}); });

說明

首先，創建具有35px一個最小高度一個div，然後創建子div與像，顯示無，高度35px和溢出的隱藏。

使用jQuery，引用等 DIV和延遲在衰落。當的完成淡入，的CSS屬性（高度和溢出）復位到繼承。

從理論上講，這可以讓類似的按鈕在背後變得不那麼怪異，然後優雅地將它帶入頁面。

希望這會有所幫助，或者Facebook只是修復此問題。

來源

2011-03-31 14:54:48

雖然，如果按鈕顯示面孔，我不確定這是否有效。 – 2011-04-05 16:47:43

它不會，但它會切掉像彈出式按鈕一樣的一半（展開和縮回），因爲它只展開（用於臉部）。此外問題要求爲零喜歡的網頁。這是一個黑客，我希望Facebook能夠解決它。 ;） – 2011-04-05 17:19:02

你可以「雙重存儲」你喜歡的Facebook和用戶標識（使用FB.Event.subscribe('edge.create', function(response) { ... });），然後檢查你登錄的Facebook用戶是否有喜歡你的頁面的朋友。

雖然這可能過於複雜。

來源

2011-04-05 16:51:33

Facebook Like按鈕 - 防止XFBML版本調整高度

回答

相關問題