Friday 5 September 2014

Facebook login with javascript SDK example

Facebook login with javascript SDK example


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