Custom login button VS. fbml button
For a few days i was trying to use a custom button to invoke login
$(".join").live("click", login);
function login(){
FB.login(function(response) {
if (response) {
console.log('Login success.');
FB.api("/me", handleMe);
}
else {console.log('Login cancelled.')}
});
}
function handleMe(response) {
$.ajax({
async: 'false',
type: 'GET',
url: 'www. address.com',
data:
"uid=" + response.id +
"&name=" + response.name,
success: function(){
console.log('Ajax successful.');
console.log("<?php echo $this->session->userdata('fb_uid'); ?>");
window.location = "www. address.com";
},
error: function(){console.log('Ajax failed.');}
});
}
$(".join,.log,.biggie-btn").l开发者_StackOverflow社区ive("click", login);
However it was always buggy, the login window would not close (oddly, most of the times) and after I closed it, I would not get the user FB.API details, and I had to refresh the page to get them.
As soon as I switched to the bugs were gone (having exactly the same functionality), however I can't control now the style of the login button. Is there a solution, to have a fully functional custom login button?
You can use the Facebook javascript SDK and easily build your own login button. Just have the button class FB.login and pass it a callback function and optionally any extended permissions you need. Upon success, this will set a cookie that has an access_token that you can use from server code if needed. Otherwise, you can just call javascript sdk functions.
Here is an example:
<!DOCTYPE html>
<html>
<body>
<div id="fb-root"></div>
<a href="#" onclick="doLogin();return false;">Custom Login Button</a>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({ appId: 'your app id', status: true, cookie: true, xfbml : true });
function doLogin() {
FB.login(function(response) {
if (response.session && response.perms) {
FB.api('/me',
function(response) {
alert('User: ' + response.name);
alert('Full details: ' + JSON.stringify(response));
}
);
}
} , {perms:'user_about_me'});
}
</script>
</body>
</html>
加载中,请稍侯......
精彩评论