Learning jQuery

Adding a Login with Facebook option to your web app is a pain! The process requires multiple requests to the Facebook API, and usually results in a messy callback soup that you get stuck managing.

A typical Facebook login flow usually requires the following sequence:
https://github.com/ryandrewjohnson/jquery-fblogin

• window.fbAsyncInit
• FB.init
• FB.login
• FB.api(/me)

You may also like:

• Facebook Like Twitter Follower Box using jQuery
• 5 jQuery Plugins for like Facebook effects
• 10 Free jQuery Social Sharing Plugins
• Top jQuery Photo Tagging Plugins

Include script after the jQuery library:

<script src="/path/to/jquery.fblogin.js"></script>

You will need a valid Facebook App Id and the Facebook JS SDK loaded to use the plugin. After that simply call $.fblogin(options) where options is an object with the desired settings.

// This will login a user with Facebook and return user's public data
$.fblogin({
    fbId: '{FB app id}',
    success: function (data) {
        console.log('Basic public user data returned by Facebook', data);
    },
    error: function (error) {
        console.log('An error occurred.', error);
    }
});

Login requesting Facebook permissions:

// the permissions option is a comma separated list of extended FB permissions
$.fblogin({
    fbId: '{FB app id}',
    permissions: 'email,user_birthday',
    success: function (data) {
        console.log('User birthday' + data.birthday + 'and email ' + data.email);
    }
});

Visit the official website for documentation, sample and find out what other options are available.

Feel free to contact me for any help related to jQuery, I will gladly help you.