Geek asks and answers

Facebook custom login text (HTML5 version) - FOUC

Using XFBML, you could change the text of the login button as follows:

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

This is also possible similar to the HTML5 version of the button:

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

The problem is that, unlike XFBML, which is displayed after loading the SDK, the HTML5 version is displayed by the browser even before the FB SDK is initialized, as a result of which the usual line "User login text" appears in the login place before the SDK initializes it and change it to the look of Facebook (something like FOUC - a flash of loose content).

Is there a way to specify custom text and avoid this problem? For instance. some data parameter or any JS method how to change text dynamically.

+3
5

, , , . Facebook SDK.

div.

, () .

+2

, .

SDK Facebook JS

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

, .

(http://www.fbrell.com/saved/bc55c3f938a9008e1e514fbb97e81535), , .

0

HTML . CSS :

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

.fb_iframe_widget {
    display: block !important;
}
0

I had to do this using the Twitter widget before. Basically, you set the IFrame created by facebook for opacity 0. Then, but your custom button is “behind”.

0
source

On the other hand

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

a little more concise and avoids! important

0
source

More articles:


All Articles