Facebook Login Authentication Example

Pankaj Tahiliani

<< DateName vs DatePart | Home | System.Web.UI.Control.get_ViewState() failed >>

<html>
<head>
    <title>Facebook Login Authentication Example</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
    <script>
        // Load the SDK Asynchronously
        (function (d) {
            var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
            if (d.getElementById(id)) { return; }
            js = d.createElement('script'); js.id = id; js.async = true;
            js.src="//connect.facebook.net/en_US/all.js";
            ref.parentNode.insertBefore(js, ref);
        }(document));

        // Init the SDK upon load
        window.fbAsyncInit = function () {
            FB.init({
                appId: '<<<ENTER YOUR FACEBOOK APP ID HERE>>>', // App ID
                channelUrl: '//' + window.location.hostname + '/channel', // Path to your   Channel File
                status: true, // check login status
                cookie: true, // enable cookies to allow the server to access the session
                xfbml: true // parse XFBML
            });

            // listen for and handle auth.statusChange events
            FB.Event.subscribe('auth.statusChange', function (response) {
                if (response.authResponse) {
                    // user has auth'd your app and is logged into Facebook
                    FB.api('/me', function (me) {
                        if (me.name) {
                            document.getElementById('auth-displayname').innerHTML = me.name;
                        }
                        if (me.id) {
                            document.getElementById('FBId').innerHTML = me.id;
                            document.getElementById('Pic').src = 'http://graph.facebook.com/' + me.id + '/Picture';
                            document.getElementById('Pic').alt = me.name;
                            document.getElementById('Pic').title = me.name;
                        }

                        if (me.email) {
                            document.getElementById("DisplayEmail").innerHTML = me.email;
                        }
                        if (me.gender) {
                            document.getElementById("Gender").innerHTML = me.gender;
                        }
                        if (me.birthday) {
                            document.getElementById("DOB").innerHTML = me.birthday;
                        }

                    })
                    document.getElementById('auth-loggedout').style.display = 'none';
                    document.getElementById('auth-loggedin').style.display = 'block';
                } else {
                    // user has not auth'd your app, or is not logged into Facebook
                    document.getElementById('auth-loggedout').style.display = 'block';
                    document.getElementById('auth-loggedin').style.display = 'none';
                }
            });
            $("#auth-logoutlink").click(function () { FB.logout(function () { window.location.reload(); }); });
        }
    </script>
    <h1>Facebook Login Authentication Example</h1>
    <div id="auth-status">
        <div id="auth-loggedout">
            <div class="fb-login-button" autologoutlink="true" scope="email,user_checkins">Login with Facebook</div>
        </div>
        <div id="auth-loggedin" style="display: none">
            Hi, <span id="auth-displayname"></span>(<a href="#" id="auth-logoutlink">logout</a>)
            <br />
            Your Facebook ID : <span id="FBId"></span>
            <br />

            Your Email : <span id="DisplayEmail"></span>
            <br />

            Your Sex: <span id="Gender"></span>
            <br />

            Your Date of Birth: <span id="DOB"></span>
            <br />

            Your Pic:
            <img id="Pic" />
            <br />
        </div>
    </div>
</body>
</html> Posted on Friday, August 23, 2013 5:06 PM Facebook Login Authentication | Back to top

Comments on this post: Facebook Login Authentication Example

# re: Facebook Login Authentication Example

the first one of a lot of examples i tried that worked even with localhost :)

thanks, great job and you saved me a lot of time

Left by karcsi hal on Jan 03, 2014 6:07 AM

# re: Facebook Login Authentication Example

Thanks for the great tutorial! Unfortunately I noticed a few syntax errors, which prevent the code from working upon copy & paste. Most should show up by searching for the string "unction". Hope that's some help.

Left by NDL on Sep 02, 2014 11:05 AM

# re: Facebook Login Authentication Example

great example dear
thanks

Left by psingh on Jun 20, 2015 6:10 PM

# re: Facebook Login Authentication Example

Not working

Left by Ratnesh on Aug 15, 2015 2:37 PM

# re: Facebook Login Authentication Example

Hi ,
what should be the channel name ,Pls Help

Left by Meenal on Mar 01, 2017 7:00 PM

# re: Facebook Login Authentication Example

The example for the Facebook login authentication found to be very useful for me. I was searching for the details of the same and I found them here. Actually you people are best in such things and I appreciate the great mind behind such hard work.
oren loni burgerim

Left by Merlin John on Apr 28, 2017 6:06 PM

# Mobdro

your computer, await it to fill up, and after that search the Mobdro which it needs to use. Despite whether you have an iOS tool

Left by Everett on Aug 01, 2017 10:20 AM

# re: Facebook Login Authentication Example

If you have a long airplane ride ahead of you? netflixlogin though Netflix doesn't define. Standard makes use.

Left by tyson on Sep 26, 2017 11:56 AM

# ioperamini

well as rapid searching anywhere and anytime. This application is readily ioperamini procedure as well as compress it, and also sends it back.

Left by yana on Oct 05, 2017 11:07 AM

# kodi

Wait for the installment process to complete.After the procedure, exit Cydia. kodi.ooo Go to the system in Kodi, and after that file manager.

Left by Victoria on Dec 02, 2017 11:00 AM

# re: Facebook Login Authentication Example

I desire in fact go into several of the most effective router tables readily available Free Router Table Strategy In addition, if you wish to check out the handbook for the RA1171.

Left by Peter on Jan 26, 2018 11:24 AM

# McDVOICE

Viewing as it is a preferred dining place, it would be terrific to be able McDVOICE staff members on the best ways to better serve your food.

Left by Tyson on Feb 02, 2018 3:40 PM

# re: Facebook Login Authentication Example

I'm very happy to read your stuff and the way you have been working on, thanks a lot for sharing Facebook login authentication coding. I have an error on istaspace when someone is assigned as admin, he/she is unable to modify the content, can you resolve this issue on my behalf.

Left by JessAdele on Mar 25, 2018 11:55 AM

Your comment:

Title:

Name:

Email: (never displayed) (will show your gravatar)

Comment: Allowed tags: blockquote, a, strong, em, p, u, strike, super, sub, code

Verification: