Hi All below is the code which i use.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>ABI SocialWebConnect</title>
<style type="text/css" media="screen">
body {
font-family : arial, sans-serif;
}
#spacer { width : 10px; }
#friendWrapperCanvas {
border : 2px solid #979797;
width : 85%;
height : 100px;
}
#mapWrapperCanvas {
border : 2px solid #979797;
width : 85%;
height : 380px;
padding-top: 10%;
}
#mapCanvas {
border : 2px solid #979797;
height : 380px;
width : 100%;
}
#resultsCanvas {
position : relative;
top : 15px;
left : 0px;
height : 370px;
width : 280px;
}
#mapSearch {
position: relative;
top : 0px;
left : 0px;
}
.mapcanvastable td {
padding : 0px;
}
.mapcanvastable {
border-width : 0px;
border-spacing : 0px;
border-collapse : collapse;
border : none;
padding-top: 10%;
}
/* canvas view css over-rides */
#mapCanvas .gels {
width : 280px;
background-color: #ddeeff;
}
#mapCanvas .gels-form {
background-color: #ddeeff;
}
#mapWrapperCanvas .gels-controls {
position : absolute;
bottom : -2px;
left : 0px;
}
#mapWrapperCanvas .gels-app,
#mapWrapperCanvas .gels-extresults-active {
border : none;
}
#mapWrapperCanvas .gels-list-item {
margin-bottom : 2px;
}
#mapWrapperCanvas .gels-list-wrapper {
padding-left : 0px;
}
</style>
</head>
<body style="font-family: Arial;border: 0 none;">
<div id="friendWrapperCanvas">
<h3>Connect with Facebook</h3>
<form name="comment_form" method="post">
<div id="user">
<fb:login-button length='long' onlogin="update_user_box();" autologoutlink='true'>Logout</fb:login-button>
</div>
</form>
</div>
<script type="text/javascript">
function update_user_box() {
var user_box = document.getElementById("user");
user_box.innerHTML =
"<span>" +
"<table><tr>" +
"<td>" +
"<fb:profile-pic uid='loggedinuser' facebook-logo='true'></fb:profile-pic>" +
"</td>" +
"<td><fb:login-button length='long' autologoutlink='true'>Logout</fb:login-button></td>"+
"<td >" +
"<fb:name uid='loggedinuser' useyou='false'></fb:name>" +
"<input type=\"button\" onclick=\"submitComment();\" value=\"Post to Your Wall\"> ." +
"</td></tr><tr>" +
"<td colspan='3'>" +
"<fb:comments xid='user_comments' canpost='true' showform='true'>"+
"</fb:comments>"+
"</td>"+
"</tr></table></span>";
FB.XFBML.Host.parseDomTree();
}
function submitComment() {
FB.Connect.streamPublish(null, null, null, null, "Share your Search...", null, false, null);
}
</script>
<script type="text/javascript" src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" mce_src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php"> </script>
<script type="text/javascript">
var api_key = "389895527688846";
var channel_path = "xd_receiver.htm";
FB.init(api_key, channel_path);
</script>
</body>
<script>
validateUserStatus();
var uid;
var accessToken;
function validateUserStatus(){
alert('called before getting login status');
FB.getLoginStatus(function(response) {
var user = document.getElementById("user");
if (response.status === 'connected') {
alert('called before getting login status : connected');
user.innerHTML =
"<span>" +
"<table> <tr>" +
"<td>" +
"<fb:profile-pic uid='loggedinuser' facebook-logo='true'></fb:profile-pic>" +
"</td>" +
"<td >" +
"<fb:name uid='loggedinuser' useyou='false'></fb:name>" +
" <input type=\"button\" onclick=\"submitComment();\" value=\"Post to Your Wall\"> ." +
"</td></tr><tr>" +
"<td colspan='2'>" +
"<fb:comments xid='user_comments' canpost='true' showform='true'>"+
" </fb:comments>"
+ "</td>"
"</tr></table>" +
+ "</span>";
uid = response.authResponse.userID;
accessToken = response.authResponse.accessToken;
} else if (response.status === 'not_authorized') {
alert('called before getting login status : not-connected');
user.innerHTML =
"<span>" +
"<table> <tr>" +
"<td>" +
"<fb:login-button length='long' onlogin='update_user_box();' autologoutlink='true'>Logout></fb:login-button>" +
"</td></tr></table>"+"</span>";
} else {
// the user isn't logged in to Facebook.
}
FB.XFBML.Host.parseDomTree();
});
}
</script>
</html>
i have two questions here.
- FB.loginStatus is not giving me me the status
- i get the user profile image with the name when i click on the user’s image it goes to facebook but i don’t want that go to facebook because i integrated this in my own application. so it should remain in the same window or application.
Please advise me how to go about.
To answer your second question, to prevent the user’s image from linking out to Facebook, you can use jQuery to remove the href attribute of the anchor tag that is generated.