The below code snippet explains how to get Facebook user profile using the Facebook Graph API by making JSON call using jQuery and Javascript
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1">
<title></title>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.1.min.js"></script>
<script type="text/javascript">
$("#demo").live("click", function () {
var fbId = $("#fbId").val();
$.getJSON('https://graph.facebook.com/' + fbId + '?callback=?', OnCallBack);
});
function OnCallBack(r, s) {
var html = "";
if (s == "success" && !r.error) {
for (p in r) {
html += p + ": " + r[p] + "<br />";
}
} else {
html = r.error.message;
}
$("#dv").html(html);
}
</script>
</head>
<body>
<form id="form1">
<span>Enter your Facebook Id or Username</span>
<input type = "text" id = "fbId" />
<input type = "button" value = "Get Profile" id = "demo" />
<div id = "dv"></div>
</form>
</body>
</html>
Explanation:
A click event handler has been bind to the HTML input button with id demo. When the button is clicked, a cross domain JSON call is made to the Facebook Graph API and following two parameters are sent
1. Facebook Id: Facebook Username or Facebook User Id
2. Callback Method: OnCallBack method which will be called when the JSON response is returned by the Facebook Graph API.
Once the response is received from the Facebook Graph API the information is displayed in HTML div with the ID dv.
Demo:
Enter your Facebook Id or Username