カスタムFacebookのログインボタンのテキスト（HTML5版） - FOUC

Question

XFBMLを使用して、それがこのようなchange the text of login buttonすることが可能であった：

<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を変更する前にボタンを押しますFacebookのネイティブな外観（FOUCのようなもの - スタイルのないコンテンツのフラッシュ）。

カスタムテキストを指定してこの問題を回避する方法はありますか？例えば。いくつかのデータ・パラーム、またはJSの方法でテキストを動的に変更する方法を説明します。

Answer 1

私はこれが改行の可能性があると思います。

は、FacebookのJS SDKだから、それは正しいことを選ぶ必要があります

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

を使用しています。

この例（http://www.fbrell.com/saved/bc55c3f938a9008e1e514fbb97e81535）は、ログインボタンのカスタムテキストを引き出しているようです。

Answer 2

私が見つけた唯一の方法は、カスタムログインテキストの色を背景と同じ色に設定することです。 SDKが読み込まれると、Facebookはその色を上書きします。

divに直接色を設定しました。

あなたはこれを行うためのより良い（ネイティブ）方法を見つけることを望みます。

Answer 3

HTMLのクラスは、一旦ロードされると変更されます。このCSSは私のために働いた：

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

.fb_iframe_widget { 
    display: block !important; 
} 

Answer 4

私は前にTwitterのウィジェットでこれをしなければならなかった。基本的に、facebookが作成するIFrameを0の不透明度に設定します。しかし、カスタムボタンはその背後にあります。

Answer 5

代わり

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

は、もう少し簡潔で、回避が重要