Facebook Connect and then display user's first+last name and profile picture_问答_开发者

Facebook Connect and then display user's first+last name and profile picture

开发者 https://www.devze.com 2023-02-09 05:11 出处：网络

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.

相关专题：facebook php

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 &amp; 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>