The below code snippet explains how to get FaceBook user profile picture in jQuery using the FaceBook Graph API.
<input type = "text" id = "fbId" />
<input type = "button" id = "demo" value = "Demo" />
<br /><img id = "fbPic" />
<script type = "text/javascript" src = "http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type = "text/javascript">
$("#demo").live("click", function () {
$("#fbPic")[0].src = "http://graph.facebook.com/" + $("#fbId").val() + "/picture";
});
</script>
Explanation:
The above code snippet has a HTML input textbox with ID fbId in which user has to enter his FaceBook UserName or Facebook UserId. Once that is done user has to click the HTML input button Demo which has a jQuery event handler attached. When the Demo button is clicked it gets the FaceBook User Profile Picture and displays it in the HTML image control fbPic.
Demo:
![]()