Follow the Simple Steps to integrate Facebook Login with javascript SDK in your website, in 10 Mins.
Step: 1
Add Following html in Web Page
<a href="javascript:void(0)" onclick="return fblogin()">Facebook Login</a>
Step: 2
Add Following javaScript function, and get FACEBOOK_APPLICATION_ID from https://developers.facebook.com/.
var myWindow=null;
function fblogin(){
var appId =FACEBOOK_APPLICATION_ID;/** facebook application id */
var URLAfterAuth = 'http://www.example.com/ajax/fblogin';/* After authentication go to this page **/
var str= window.location.href;
if (myWindow && !myWindow.closed) { //exist and is not closed
myWindow.close();
myWindow=null; //delete the object
}else{
myWindow = window.open('https://www.facebook.com/dialog/oauth?redirect_uri='+URLAfterAuth+'&display=popup&response_type=code&client_id='+appId+'&ret=login', 'mywindow','left=100,top=50,width=500,height=500,toolbar=0,resizable=0');
}
}
Step: 3
Add Following script in ajax/fblogin URL
//Add jQuery File <script src="//code.jquery.com/jquery-1.11.0.min.js"></script> <div id="fb-root"> </div> <script> var str= window.location.href; window.fbAsyncInit = function() { FB.init({ appId : FACEBOOK_APPLICATION_ID status : true, cookie : true, xfbml : true, oauth : true }); FB.Event.subscribe('auth.authResponseChange', function(response) { // Here we specify what we do with the response anytime this event occurs. if (response.status === 'connected') { saveuserdetail(); } else if (response.status === 'not_authorized') { FB.login(); } else { FB.login(); } }) }; function saveuserdetail() { FB.api('/me', function(response) { $.ajax({ type: "POST", url: '/ajax/register/',/** Facebook will send user detail send in this URL **/ data: response, success: function(msg){ if(msg['login']=='success'){ window.opener.location.reload(); window.close(); } }, dataType: 'json' }); }); } (function(d){ var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;} js = d.createElement('script'); js.id = id; js.async = true; js.src = "//connect.facebook.net/en_US/all.js"; d.getElementsByTagName('head')[0].appendChild(js); }(document)); </script> Please wait ....
Step: 4
(After Facebook authentication facebook send user to this URL),
URL: ajax/register
print_r($_POST);//Here will have all details
