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.
 |
| Click to Enlarge |
Description:
In the previous article I have explained Create
dynamic menu in asp.net, Getting the ID
of last inserted record in asp.net using output parameter, How to reset
or clear all web form controls in asp.net, Getting the ID of last inserted record
using SQL Server database in asp.net,
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">
<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>
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.
.png)
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