Facebook button to login

Question

I hope you can help me with this problem.

I grabbed the main code of the login button from the FB developers site and I am writing it as it is:

<div id="fb-root"></div> <script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1&appId=345451695525893"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script> <div class="fb-login-button" data-show-faces="false" data-width="200" data-max- rows="1">Test text</div> 

The only setting I make is overriding the default text “Input” with my own text (in this case, “test text”). This works fine when I log out of facebook, but it is interesting when I log in to facebook (via the facebook website on another tab) and then return to my page, the custom text is blinking, then the button is displayed a second time with the default text “Login” .

Any ideas, or is this a design feature from Facebook?

Answer 1

Given the recent changes to the component component of the fb-login-button component (which, like weeks or so, it ALWAYS rewrites custom text into “Login”), it’s best to create your own CSS class for Facebook and run FB.Login through Javascript. This is what I did, and it works well.

Here is some CSS for a Facebook button that looks exactly like a standard Facebook button and easily supports custom text:

 a.fb-button { color: #FFF; display: inline-block; text-decoration: none; } .fb-button { background: #5F78AB; background-image: url('http://static.ak.fbcdn.net/rsrc.php/v2/yf/r/S-DbSHszr4D.png'); /*COPY TO YOUR OWN IMAGE STORE*/ background-repeat: no-repeat; background-position: -1px -81px; border-top: 1px solid #29447E; border-right: 1px solid #29447E; border-bottom: 1px solid #1A356E; border-left: 1px solid #29447E; -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 #8A9CC2; -moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 #8a9cc2; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 #8A9CC2; cursor: pointer; font-family: 'lucida grande', tahoma, verdana, arial, sans-serif; font-size: 13px; font-weight: bold; height: 23px; line-height: 23px; padding: 0px 5px 0px 30px; text-align: left; } 

The item on your page will be

 <a class="fb-button" onClick="fblogin();">Custom Text</a> 

And then the JS function is like this

 var fblogin = function() { FB.login(function(response) { if (response) { if (response.authResponse) { //successful auth //do things like create account, redirect etc. } else { //unsuccessful auth //do things like notify user etc. } },{scope:'email,publish_stream'}); //whatever perms your app needs }; 

Of course, you need to include the fb root div on your page and run the Facebook SDK before that

Here's what it looks like:

The great thing about CSS is that you can use it to create other Facebook buttons on your site for things that are not supported (like Share) with a familiar look. You can even create additional css to use buttons of different sizes. You just need to have different background positions for the background image and different font sizes, heights, etc.

Answer 2

Use the following code to use your own text.

 <div class="fb-login-button" data-show-faces="false" data-width="200" data-onlogin="afterLoginCallback()" login_text="Your Text" ></div> 

Notification, the login_text property login_text provided to set the text on the login button. If you don’t install it, it will overwrite your default text provided by Facebook.

Answer 3

Or you can just use:

 <div class="fb-login-button" data-login_text="Connect with FaceBook"></div> 

OR

 <fb:login-button show-faces="true" width="200" max-rows="1" login_text="Connect with FaceBook"></fb:login-button> 

Easy as 1,2,3 :)

Answer 4

Try this, add data entry text similar to this.

 <div class="fb-login-button" data-login-text="Sign in with Facebook" data-max-rows="1" onlogin="window.location.reload()" data-size="large" data-show-faces="false" data-auto-logout-link="false"> </div>