My problem is to display a login button and(once the user is logged in) show his profile image, name and a “logout” link.
In the facebook api documentation (here http://developers.facebook.com/docs/guides/web/#login) i found this example:
<html>
<head>
<title>My Facebook Login Page</title>
</head>
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'YOUR_APP_ID', // App ID
channelUrl : '//WWW.YOUR_DOMAIN.COM/channel.html', // Channel File
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
FB.api('/me', function(user) {
if (user) {
var image = document.getElementById('image');
image.src = 'http://graph.facebook.com/' + user.id + '/picture';
var name = document.getElementById('name');
name.innerHTML = user.name
}
});
};
// 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));
</script>
<div align="center">
<img id="image"/>
<div id="name"></div>
</div>
</body>
</html>
That should do what i was looking for. I replaced ‘MY_APP_ID’ and MY_DOMAIN.COM with my app_id and my domain site (http://localhost/index.html). I also added a login button as i found on the documentation (that works and allow me to log in) but then no image nor name is shown. I wrote the “user” object in a console and it conatins this:
error: Object
code: 2500
message: "An active access token must be used to query information about the current user."
type: "OAuthException"
How should I use this “active access token”?
In order to accomplish any user data retrieval, every Facebook application must first authenticate the user session to ensure that the app has the permission of the end user to retrieve their data.
Reference: https://developers.facebook.com/docs/authentication
Retrieve their access token with the Javascript SDK and you should be able to begin retrieving their user display name and image as a result.
Facebook JS SDK: https://github.com/facebook/facebook-js-sdk/