css styling the facebook Login Button, best practices
Solution 1
As you can see in the fb docu, the div.fb-login-button
is replaced by an iframe
by the script you load externally. To style this button yourself, you could just create a button which is styled depending on your wishes and trigger the login mechanism yourself.
For further information, read here.
Solution 2
Although quite old, but here is sample code that I am using.
<!--HTML-->
<button id="customBtn" (click)='checkLoginState();'>
<span class="icon"></span>
<span class="buttonText">Facebook</span>
</button>
<div id='fb-status-login'></div>
Below is the CSS(Inspired by google button) you can use. For logo, you can download any 32px*32px png.
//CSS
#customBtn {
display: inline-block;
background: white;
color: #444;
width: 190px;
border-radius: 5px;
border: thin solid #888;
box-shadow: 1px 1px 1px grey;
white-space: nowrap;
}
#customBtn:hover {
cursor: pointer;
}
span.label {
font-family: serif;
font-weight: normal;
}
span.icon {
background: url('/assets/images/f-normal.png') transparent 5px 50% no-repeat;
display: inline-block;
vertical-align: middle;
width: 42px;
height: 42px;
}
span.buttonText {
display: inline-block;
vertical-align: middle;
padding-left: 42px;
padding-right: 42px;
font-size: 14px;
font-weight: bold;
/* Use the Roboto font that is loaded in the <head> */
font-family: 'Roboto', sans-serif;
}
Inside your component (I am using Angular 4), you can define function like this.
public checkLoginState() {
console.log('checking login status');
FB.getLoginStatus((response)=> {
this.statusChangeCallback(response);
});
}
public statusChangeCallback(response) {
console.log('statusChangeCallback');
console.log(response);
if (response.status === 'connected') {
console.log('status was already connected. will test api.');
this.testAPI();
} else if(response.status ==='not_authorized'){
console.log('status was not authorised. will call login');
FB.login((response)=> {
if (response.status === 'connected') {
console.log('status is now connected. will test api.');
this.testAPI();
} else {
console.log('fatal.');
document.getElementById('fb-status-login').innerHTML = 'some serious shit happened';
}
});
} else{
document.getElementById('fb-status-login').innerHTML = 'Please log ' +
'into this app.';
}
}
public testAPI() {
console.log('Welcome! Fetching your information.... ');
FB.api('/me', function(response) {
console.log('Successful login for: ' + response.name);
document.getElementById('fb-status-login').innerHTML =
'Thanks for logging in, ' + response.name + '!';
});
}
Related videos on Youtube
Louis
Updated on July 09, 2022Comments
-
Louis almost 2 years
I am using the Facebook Login Button for Single Sign On in my webapp (code below). But I can't figure out how to control the button's styles with css. I see the Facebook plugin inserts an iframe in my page...
<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/fr_CA/all.js#xfbml=1&appId=myid"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script> <div class="fb-login-button" data-max-rows="1" data-size="large" data-show-faces="false" data-auto-logout-link="true"></div>
But this doesn't render :
.fb-login-button { width: 300px !important; font-size: 16px !important; line-height: 30px !important; padding: 3px 8px !important; }
JSfiddle : http://jsfiddle.net/4SqGn/
Do you know how to control the button styles please ?
-
Hendra Nucleo about 10 yearsCreate the working fiddle for the code, so we can examine your problem and provide solution. Thanks.
-
Louis about 10 yearssorry, I added the jsfiddle
-
-
Louis about 10 yearsthanks, I took the quickstart code from your link, but the button they use
<fb:login-button show-faces="true" size="xlarge" max-rows="1" onlogin="Log.info('onlogin_callback')">Facebook</fb:login-button>
is the still the FB "Login button". Can you provide a replacenet code for a customizable button that works with the api ? ...i.e.<div id="customFbBtn" type="button" class="customFbSignIn" onclick='FB.login(function(response){});'> <span class="FBicon"></span> <span class="FBbuttonText">Sign in with Facebook</span> </div>
doesn't trigger the login -
NightOwl888 about 6 yearsYou meant
click
instead of(click)
for the HTML attribute name, didn't you? -
Manish Bansal about 6 yearsAs i mentioned, i am using angular so (click) is a valid syntax. But you can use onclick for normal html.