HOWTO: Use the Facebook API into your web site - a practical example

Wanting to make life easier for those who wish to sign the new version of the Guestbook, I thought I'd try to add a method to automatically fill in all fields new Guestbook (except the one where to write the actual comment 🙂 ) by logging in with your Facebook account (But I do not use, ed).

First you need to sign up for a Facebook API key at developers.facebook.com. We must create a new Web application, give a nome, and enter the address of its website in the fields “App Domains” and “Website with Facebook Login”.

Then download the SDK to communicate with Facebook via PHP in github this address, and upload it to FTP server.

Create a new PHP file and copy your code that I wrote this, to log in via Facebook:

<?
//Facebook SDK and PHP, a pratical example for parsing Name,Email,web address and avatar of an user. Code by flapane.com
require "facebook/facebook.php";
$facebook = new Facebook(array(
    'appId'  => YOURAPPID,
    'secret' => YOURSECRETID,
));

$user = $facebook->getUser();

if ($user) {
  try {
    $user_profile = $facebook->API('/me');

      $fbname = $user_profile['name'];
      $fblink = $user_profile['link'];
      $fbmail = $user_profile['email'];
      $fbid = $user_profile['id']; //for the user avatar
  } catch (FacebookApiException $ e) {
    // The access token we have is not valid
    $user = null;
  }
}

if ($user) {
      $logoutUrl = $ facebook->getLogoutUrl();
      $access_token = $facebook->getAccessToken();
      $logout_landing_page = "http://www.yourwebsite.com/index.php";
      $logout_url = "https://www.facebook.com/logout.php?access_token=".$access_token."&confirm=1&next=".$logout_landing_page;
    } else {
      $loginUrl = $ facebook->getLoginUrl();
    }
?>
<?php 
if (!$user): ?>
   <div id="fb-root" style="display:none"></div>
    <script language="javascript" type="text/javascript"> //modifica per validazione w3c
//<![CDATA[
document.write('<fb:login-button size="medium" scope="Email">Login with / Login with Facebook</fb:login-button>');
//]]>
    </script>
<?php endif ?>
    <script type="text/javascript">
      window.fbAsyncInit = function() {
        FB.init({
          appId      : '<?php echo $facebook->getAppID() ?>',
          status     : true, 
          cookie     : true,
          xfbml      : true,
          oauth      : true,
        });

        FB.Event.subscribe('auth.login', function(response) {
          window.location.reload();
        });
      };

      (function(D){
         var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
         js = d.createElement('script'); js.id = id; js.async = true;
         js.src = "//connect.facebook.net/en_US/all.js";
         d.getElementsByTagName('head')[0].appendChild(js);
       }(document));
    </script>
<? if ($user) {
echo "<img src='http://graph.facebook.com/$fbid/picture' title='Sei loggato come/Logged in as $fbname' alt='Sei loggato come/Logged in as $fbname' /><br /><a href='$logout_url'><img src='facebook/facebook-logout-button.png' title='Logout' /></A>"; //Show user avatars and logout button
}
?>

Sostituite a YOURAPPID e YOURSECRETID le chiavi che avete ottenuto da Facebook for Developers, saved and loaded the PHP page you just created.

Opening it, you will be asked to log in using Facebook (and the pop-up will appear that will list the permissions needed). Logging in, you are in possession of the user data (than that of the avatar, that appear directly in the page, Once logged-in).

The data (name, website, email ed avatar) are contained in the variables:

$fbname = $user_profile[‘name’];
$fblink = $user_profile[‘link’];
$fbmail = $user_profile[’email’];
$fbid = $user_profile[‘id’]; //per l’avatar utente

At that point, you can use them as best you (for example, to automatically populate the fields in the Guestbook).

And you use Facebook or other social networks to facilitate access to your site? What method did you use?

HOWTO: Using the Facebook API in your website – a practical example

Customers who bought this also ...

35 Comments »