2012-05-07 61 views
3

使用XFBML,有可能change the text of login button這樣的:定製的Facebook登錄按鈕文本(HTML5版) - FOUC

<fb:login-button> 
    Custom login text 
</fb:login-button> 

也可以同樣用HTML5版本的按鈕:

<div class="fb-login-button"> 
    Custom login text 
</div> 

問題是,與SDK加載後呈現的XFBML不同,即使在FB SDK初始化之前,瀏覽器也會呈現HTML5版本,從而導致在登錄位置出現純「自定義登錄文本」字符串按鈕,然後SDK將其初始化並將其更改爲int o Facebook原生外觀(類似於FOUC--無版內容的閃光)。

有沒有辦法如何指定自定義文本並避免此問題?例如。一些數據參數或任何JS方式如何動態地改變文本。

+1

你不能只是風格的股利爲'知名度!none' CSS和重寫能見度當腳本來顯示登錄按鈕觸發? – cpilko

回答

0

我認爲這可能是下線休息。

Facebook的JS SDK使用

login_text:this.dom.textContent || this.dom.innerText 

所以,應該挑選出正確的事情。

此示例(http://www.fbrell.com/saved/bc55c3f938a9008e1e514fbb97e81535)似乎拉入登錄按鈕的自定義文本。

2

到目前爲止,我發現的唯一方法是將自定義登錄文本的顏色設置爲與背景相同的顏色。一旦SDK加載,Facebook就會覆蓋顏色。

我直接在div上設置顏色。

希望你找到一個更好的(本地)方法來做到這一點。

0

HTML加載後,類會發生更改。這個CSS爲我工作:

.fb-login-button { 
    display: none; 
} 

.fb_iframe_widget { 
    display: block !important; 
} 
0

我不得不這樣做與Twitter小部件之前。基本上,您將Facebook創建的IFrame設置爲0的不透明度。然後,您可以將自定義按鈕「隱藏」在它後面。

0

或者

.fb-share-button:not(.fb_iframe_widget) { 
    display: none; 
} 

是有點更簡潔,避免重要