Facebook Connect and then display user's first+last name and profile picture
I'd like new users to be able to 'connect' with the use of the fb connect button on my site and once connected it will display their first+last name and pro开发者_开发知识库file picture.
If the user is already connected, the connect button turns into a logout.
Going by the docs, i've implemented the following code;
<html>
<head>
<title>test full name and photo</title>
</head>
<body>
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js">
</script>
<script>
FB.init({
appId:'xxxxxxxxxx', cookie:true,
status:true, xfbml:true
});
FB.api('/me', function(user) {
if(user != null) {
var image = document.getElementById('image');
image.src = 'http://graph.facebook.com/' + user.id + '/picture';
var name = document.getElementById('name');
name.innerHTML = user.name
}
});
</script>
<div align="center">
<img id="image"/>
<div id="name"></div>
</div>
</body>
</html>
The only problem is that it does not display the facebook connect button and when I try and insert it, the code breaks.
Any help would be much appreciated!
recap: website checks if the user has connected and has a valid session, if not, display fb connect/login button, if yes, display the logout button, either way it should show the user their name and profile photo.
Thank you!
The Facebook PHP-SDK will do exactly what you want:
<?php
require '../src/facebook.php';
// Create our Application instance (replace this with your appId and secret).
$facebook = new Facebook(array(
'appId' => 'APP_ID',
'secret' => 'APP_SECRET',
));
$user = $facebook->getUser();
// Session based API call.
if ($user) {
try {
$me = $facebook->api('/me');
} catch (FacebookApiException $e) {
echo '<pre>'.htmlspecialchars(print_r($e, true)).'</pre>';
$user = null;
}
}
// login or logout url will be needed depending on current user state.
if ($user) {
$logoutUrl = $facebook->getLogoutUrl();
} else {
$loginUrl = $facebook->getLoginUrl();
}
?>
<!DOCTYPE html>
<html xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<title>test full name and photo</title>
</head>
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '<?php echo $facebook->getAppId(); ?>', // 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
oauth : true, // enable OAuth 2.0
xfbml : true // parse XFBML
});
// whenever the user logs in, we refresh the page
FB.Event.subscribe('auth.login', function() {
window.location.reload();
});
};
(function() {
var e = document.createElement('script');
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
</script>
<?php if ($user): ?>
<a href="<?php echo $logoutUrl; ?>">
<img src="http://static.ak.fbcdn.net/rsrc.php/z2Y31/hash/cxrz4k7j.gif">
</a>
<?php else: ?>
<div>
Using JavaScript & XFBML: <fb:login-button></fb:login-button>
</div>
<?php endif ?>
<?php if ($user): ?>
<div align="center">
<img id="image" src="https://graph.facebook.com/<?php echo $uid; ?>/picture" />
<div id="name"><?php echo $me['name']; ?></div>
</div>
<?php endif ?>
</body>
</html>
加载中,请稍侯......
精彩评论