Get Facebook logged in User details like Username, Email, Birthday, Profile picture, DOB and Gender - Free Asp.Net,MVC,AngularJs,Jquery,Javascript,Sql Server,WCF,Entity framework snippets and tutorial

Get Facebook logged in User details like Username, Email, Birthday, Profile picture, DOB and Gender

Introduction: In this article today I am going to explain how to get the Facebook logged in User details like Username, DOB and Gender etc.
Facebook
Click to Enlarge

Description:

HTML Markup of Web Page:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
     <div id="fb-root"></div>
<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: '**********', //Replace with App ID
            channelUrl: '//' + window.location.hostname + '/channel',

            status: true, // check login status
            cookie: true, // enable cookies to allow the server to access the session
            xfbml: true  // parse XFBML
        });

        FB.Event.subscribe('auth.statusChange', function (response) {
            if (response.authResponse) {
                // user has auth'd your app and is logged into Facebook
                var uid = "http://graph.facebook.com/" + response.authResponse.userID + "/picture";
                FB.api('/me', function (me) {
                    document.getElementById('auth-displayname').innerHTML = me.name;
                    document.getElementById('Email').innerHTML = me.email;
                    document.getElementById('profileImg').src = uid;
                    document.getElementById('Gender').innerHTML = me.gender;
                    document.getElementById('Birthday').innerHTML = me.birthday;
                    document.getElementById('firstname').innerHTML = me.first_name;
                    document.getElementById('lastname').innerHTML = me.last_name;
                    document.getElementById('Location').innerHTML = me.location.name;
                })
                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>

<table align="center">
<tr><td>
<div id="auth-status">
<div class="fb-login-button" autologoutlink="true" scope="email,user_checkins">Login with Facebook</div>
</div>
<div id="auth-loggedin" style="display: none">
First Name: <b><span id="firstname"></span><b><br />
Last Name: <b><span id="lastname"></span><b><br />
Username: <b><span id="auth-displayname"></span></b><br />
Email: <b><span id="Email"></span></b><br />
Gender: <span id="Gender"></span><br />
Birthday: <span id="Birthday"></span><br />
Gender: <span id="Location"></span><br />
Profile Image: <img id="profileImg" /><br />
</div>
<div id="auth-loggedout">
</div>
</td></tr>
</table>
    </form>
</body>

</html>

 Is this article helpful for you?

If yes post your comment to appreciate my work and fell free to contact me. You can like me on Facebook, Google+, Linkedin and Twitter via hit on Follow us Button and also can get update follow by Email.

What do you think about this article?

If you found this article useful, please share and follow on Facebook, Twitter, Google Plus and other social media websites. To get free updates subscribe to newsletter. Please put your thoughts and feedback in comments section.

Share this

Share on FacebookTweet on TwitterPlus on Google+


EmoticonEmoticon