Facebookログインボタンのカスタマイズ* USING JSSDKがFBMLではない*

Question

Facebook Javascript SDKを使用して、次のマークアップを使用してログインボタンを作成しています。

<div class="fb-login-button" data-show-faces="false" data-width="300px" 
    data-max-rows="1">Login with Facebook</div> 

これは問題なく動作します。しかし、私はこれを少し大きくすることによってこれをカスタマイズしたいと思います。私はこれがXFBMLマークアップで異なる値（例えばsize=）を使用して可能であったことを知っています。私は生成されたHTMLを見て適用する必要がある正しいFB CSSクラスを見つけたので、いつもJQueryの魔法でそれをハックすることができます。

適切なdata-*属性を設定するだけで、FB-JSSDK独自の処理を行うことになります。

は、私はすでに、私はちょうどdata-size="large"を試みたが、それが働いた完全

Answer 1

動作しないdata-size=を試してみました。スタイルfb_button_largeが適用され、やや大きかった。しかしそれほど大きくはありませんでしたが、私はほとんど気づいていませんでした。また、それは文書化されていないので、最終的に償却されると仮定します。

data-size="xlarge"しかし、明らかに大きかった。

<div class="fb-login-button" data-show-faces="false" 
data-max-rows="1" data-size="xlarge">Login with Facebook</div> 

なぜ、それがあなたにとってうまくいかないのか分かりません。あなたがボタンを完全にカスタマイズしたいのであれば、私が代わりにやることはCSSを使うことだけです。

新しいボタンはちょうどネストされた<div class="fb-login-button"><a class="fb_button"><span class="fb_button_text"> DOM構造であり、CSSを使用して自由にスタイルを設定できます。

Facebookスタイルの継承に問題がある場合は、スタイル宣言の最後に!importantを使用して、Facebookのスタイルを上書きしてください。

sprite with multiple sizesなので、「F」画像のサイズを変更することもできます。スタイルをオーバーライドするときは、正しいスタイルが得られるまでbackground-positionのプロパティでプレイしてください。

幸運を祈る！