Possible Duplicate:
Facebook SDK: Replace “Log In” button with custom image
I have this:
<fb:login-button autologoutlink="true"></fb:login-button>
How do I customize the button by it image, size and etc?
Possible Duplicate:
Facebook SDK: Replace “Log In” button with custom image
I have this:
<fb:login-button autologoutlink="true"></fb:login-button>
How do I customize the button by it image, size and etc?
if you're using new Facebook JavaScript SDK you can use any element as button - just attach onclick event to that element and invoke FB.login() with necessary parameters.
If you use the Facebook PHP SDK (if you are new, check the example given), you can get the URL to redirect the user to the Facebook login page with :
$fb_login_url = $facebook->getLoginUrl();
You can then include it in your page as a normal link :
<a href="<?php echo $fb_login_url ?>" id="facebook_login_link">
Login with Facebook
</a>
that you can customize with some CSS, for example :
#facebook_login_link {
background: url(my_button_image.png) no-repeat top left;
display: block;
width: 50px;
height: 20px;
}
William,
This link may shed some light on what you are trying to accomplish: http://blog.mixu.net/2011/01/09/implementing-facebook-login-part-3/
The above blog post has a rundown of some optional attributes:
Head over to this answer, I have already explained this and also provided the code. Let me know if it still needs further clarification.
Here is a shorter version of that code -
HTML PART -
<a href="#" onclick="fb_login();"><img src="images/fb_login_awesome.jpg" border="0" alt=""></a>
JAVASCRIPT FUNCTION -
function fb_login(){
FB.login(function(response) {
if (response.authResponse) {
console.log('Welcome! Fetching your information.... ');
//console.log(response); // dump complete info
access_token = response.authResponse.accessToken; //get access token
user_id = response.authResponse.userID; //get FB UID
FB.api('/me', function(response) {
user_email = response.email; //get user email
// you can store this data into your database
});
} else {
//user hit cancel button
console.log('User cancelled login or did not fully authorize.');
}
}, {
scope: 'publish_stream,email'
});
}