Custom Facebook login button text (HTML5 version) - FOUC

Question

Using XFBML, it was possible to change the text of login button like this:

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

It is also possible similarly with the HTML5 version of the button:

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

The problem is that unlike the XFBML, which is rendered after the SDK load, the HTML5 version is rendered by the browser even before the FB SDK initializes, causing the plain "Custom login text" string to appear on the place of the login button before the SDK initializes it and change it into the Facebook native look (something like FOUC - flash of unstyled content).

Is there any way how to specify the custom text and avoid this problem? Eg. some data- param, or any JS way how to change the text dynamically.

Answer 1

So far, the only method I have found is to set the color of the custom login text to same color as the background. Facebook then overwrites the color once the SDK is loaded.

I set the color directly on the div.

Hope you find a better (native) method to do this.