i trying implement facebook login in application using javascript sdk. using following js:
$("#loginwithfacebook").click(function () { fb.login(function (response) { if (response.status === 'connected') { fb.api('/me', function (user_details) { // user_details }); } }); the problem when call fb.login, opens facebook login window extreme right, want center aligned. way fix issue?
this old, i'm faced same issue : when using simple custom <button> instead of "official" fb button, login popup window opens on extreme right of screen.
i think official button (wich complex : complete html page js) makes use of sdk centering popup. couldn't manage use sdk centering popup custom button (if does, tell us!). fb.login() function doesn't center popup when fired custom button.
i found solution, works great : http://permadi.com/2011/04/centering-facebook-oath-login-popup-dialog/
the online demo (view source see code) : http://www.permadi.com/tutorial/facebook-js-oauth-popup-centered/index.html
it makes use of fb.getloginstatus() , not fb.login(). mimics fb.login function :
- open centered facebook popup window.open
- check setinterval if user logged or not
- when user finished facebook, redirecturl provided during opening popup used fb go blank page create window.close() in --> closes popup
- clearinterval , continue app code (login, save in data base...)
below my jquery version of script simplification , improvments :
- simplification : login button. no logout.
- improvment : load jsk if user hit fblogin button (and once)
- improvment : prevent user triggering multiple facebook popup (important)
we kind of recreate offical fb.login function here:) there advantages on offical button :
- we can use simple
<button>wich easy style - wich accessible (try catch official btn tab on keyboard only)
wich loads fast
var fbopen = 0; // prevent opening multiple facebook login popup dialog // otherwhise setinterval messing things around! function treatfbresponse() { fb.init({ appid : 'your_apdd_id', status :true, // important, otherwhise if user cancel login (->response.status="unknown), 2nd time -> response.status="null" -> no possible login more! cookie : true, version : 'v2.5' }); fb.getloginstatus(function(response) { if (response.status=="connected" && response.authresponse){ fb.api('/me?fields=id,name,first_name,last_name,picture,email', function(response) { // user logged app , facebook -> console.dir(response); -> log app, save in database etc. }else{ // user not logged app fbopen = 0; // let him retry } }); } var gotfbscript = 0; // load fb js sdk once function fbsdk() { // sdk not loaded yet if( !gotfbscript){ console.log('getting fb js sdk...'); $.ajax({ // or $.ajaxsetup({ cache: true }); // $.getscript('//connect.facebook.net/en_en/sdk.js', function(){ gotfbscript = 1 ... // $.ajax better think because lets set cache true locally url: '//connect.facebook.net/en_en/sdk.js', datatype: "script", cache:true, success: function() { gotfbscript = 1; treatfbresponse(); } }); // sdk loaded }else if ( gotfbscript ){ treatfbresponse(); } }; function facebookpopup() { var popupwidth=500, popupheight=300, xposition=($(window).width()-popupwidth)/2, yposition=($(window).height()-popupheight)/2, loginurl="http://www.facebook.com/dialog/oauth/?"+ "scope=public_profile,email&"+ // instead of publish_stream "api_key=your_apdd_id&"+ // instead of client_id "redirect_uri=http://www.my_site.com/path/to/self-closing-empty-page.php&"+ "response_type=token&"+ "display=popup", fbloginwindow=window.open(loginurl, "loginwindow", "location=1,scrollbars=1,"+ "width="+popupwidth+",height="+popupheight+","+ "left="+xposition+",top="+yposition), logintimer=setinterval( function() { checkloginwindowclosure(fbloginwindow, logintimer), 1000); }; function checkloginwindowclosure(fbloginwindow, logintimer) { if (fbloginwindow.closed) { clearinterval(logintimer); fbsdk(); } }; $("#your_custom_fb_button").on('click', function() { if(fbopen === 0) { fbopen = 1; facebookpopup(); } });
Comments
Post a Comment