Facebook Login with JavaScript

Follow Simple Steps to Integrate "Facebook Login" with JavasScript in your Web Application.

Login in https://www.facebook.com/
"Create a New App" in https://developers.facebook.com/
Fill all required Information
Settings => App PlateForm=>Click on "Website" then add detail
In "Status & Review", Click on "Yes" to activate for public

Get the "App Id" and use in Following Example

<html>
    <head>
        <title>Facebook Login Integration with JavaScript</title>
        <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
    </head>
    <body>

        <div id="fb-root">
</div>
<script>
            window.fbAsyncInit = function() {
                FB.init({
                    appId      : 'XXXXXXXX',//your appid
                    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') {
                        // In this case, the person is logged into Facebook, but not into the app, so we call                        
                        FB.login();
                    } else {
                        // In this case, the person is not logged into Facebook, so we call the login()                         
                        FB.login();
                    }
                })  
  
            };
        
            function saveuserdetail() {
                //console.log('Welcome!  Fetching your information.... ');
                FB.api('/me', function(response) {                    
                    console.log(response.toSource());
                    $.ajax({                        
                        type: "POST",
                        url: '/url_to_save_detail',
                        data: response,
                        success: function(msg){
                        console.log(msg);    
                        },
                        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>
        <div class="fb-login-button">
Login with Facebook</div>
</body>
</html>

Facebook Login URL:

https://www.facebook.com/dialog/oauth?redirect_uri=websiteLoginURL&display=popup&response_type=code&client_id=appId&ret=login

websiteLoginURL: After login which page of your website should redirect.
appId: Application Id of facebook.com

Web Technology Experts Notes

Thursday, 3 April 2014

Facebook Login with JavaScript

Thursday, 3 April 2014

Facebook Login with JavaScript

Best Related Posts are Following: