Facebook javascript login using ajax-jquery -
i trying create fb javascript loging using ajax, php. works , fetch required data facebook. once user click on login page gets reloaded twice after login completes , beofre showing data. here code. can point out bug or link?
<?php session_start(); $appid = '669340023079549'; $appsecret = '390c04c60d19f38e113ea44f268aca44'; // facebook app secret $return_url = 'http://yoursite.com/connect_script/'; //path script folder $fbpermissions = 'publish_stream,email'; //more permissions : https://developers.facebook.com/docs/authentication/permissions/ ?> <!doctype html> <html xmlns:f b="http://www.facebook.com/2008/fbml" xml:lang="en-gb" lang="en-gb" ><head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script> <title>js/ajax facebook connect</title> <script> function ajaxresponse() { // alert("4"); var mydata = 'connect=1'; //for demo, pass post variable, check process_facebook.php $.ajax({ type: "post", url: "process_facebook.php", datatype:"html", data:mydata, success:function(response){ // alert(response); $("#results").html('<fieldset style="padding:20px">'+response+'</fieldset>'); //result }, error:function (xhr, ajaxoptions, thrownerror){ $("#results").html('<fieldset style="padding:20px;color:red;">'+thrownerror+'</fieldset>'); //error } }); } function lodinganimate() //show loading image { //alert("3"); $("#loginbutton").hide(); //hide login button once user authorize application $("#results").html('<img src="ajax-loader.gif" /> please wait connecting...'); //show loading image while process user } </script></head><body> <?php if(!isset($_session['logged_in'])) { ?> <div id="results"> </div> <div id="loginbutton"> <div class="fb-login-button" onlogin="return callafterlogin();" size="medium" scope="<?php echo $fbpermissions; ?>">connect facebook</div> </div> <?php } ?> <div id="fb-root"></div> <script type="text/javascript"> window.fbasyncinit = function() { // alert("1"); fb.init({ appid: '<?php echo $appid; ?>', cookie: true, xfbml: true, channelurl: '<?php echo $return_url; ?>channel.php', oauth: true});}; (function() { var e = document.createelement('script'); e.async = true;e.src = document.location.protocol +'//connect.facebook.net/en_us/all.js'; document.getelementbyid('fb-root').appendchild(e); }()); function callafterlogin(){ //alert("2"); fb.login(function(response) { if (response.status === "connected") { lodinganimate(); //animate login fb.api('/me', function(data) { if(data.email == null) { //facbeook user email empty, can check this. alert("you must allow access email id!"); resetanimate(); }else{ ajaxresponse(); } }); } return true; }); } </script> </body> </html>
try this
change
<div class="fb-login-button" onlogin="javascript:callafterlogin();" size="medium" scope="<?php echo $fbpermissions; ?>">connect facebook</div> to
<div class="fb-login-button" onlogin="return callafterlogin();" size="medium" scope="<?php echo $fbpermissions; ?>">connect facebook</div> function callafterlogin(){ //alert("2"); fb.login(function(response) { if (response.status === "connected") { lodinganimate(); //animate login fb.api('/me', function(data) { if(data.email == null) { //facbeook user email empty, can check this. alert("you must allow access email id!"); resetanimate(); }else{ ajaxresponse(); } }); } return true; }); }
Comments
Post a Comment