Thursday, February 12, 2015

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.

1 comment:

  1. very interesting post.this is my first time visit here.i found so mmany interesting stuff in your blog especially its discussion..thanks for the post! Verifications IO

    ReplyDelete