Monday, January 2, 2012

Facebook API - Beginner's Guide

Facebook offers Javascript SDK and PHP SDK which you can make use of for web development. Javascript SDK is more simple to use. Ofcourse PHP SDK is also simple. A well integrated web application needs to efficiently use both of these SDK's .

The first step in using facebook API is to obtain an APP ID for your domain. You can refer here to create a new APP.

Setting Up JS/PHP SDK

Using Javascript API

You need not download any javascript files. You need to include the following code in any file you use JS SDK code.

< 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
});

// Additional initialization code here
};

// Load the SDK Asynchronously
(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>


In channel.html have the following line

<script src="//connect.facebook.net/en_US/all.js">
</script>
 
Using PHP SDK

You can download the PHP SDK here. 



Integrating Facebook Login into your website

Using Only PHP SDK

require 'src/facebook.php';

// Create our Application instance (replace this with your appId and secret).
$facebook = new Facebook(array(
  'appId'  => 'YOUR_APP_ID',
  'secret' => 'YOUR_APP_SECRET',
));

// Get User ID
$user = $facebook->getUser();

// If we have a $user id here, it means we know the user is logged into
// Facebook, but we don't know if the access token is valid. An access
// token is invalid if the user logged out of Facebook.

if ($user) {
  try {
    // Proceed knowing you have a logged in user who's authenticated.
    $user_profile = $facebook->api('/me');
  } catch (FacebookApiException $e) {
    error_log($e);
    $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>php-sdk </title>

    <style>

      body {
        font-family: 'Lucida Grande', Verdana, Arial, sans-serif;
      }
      h1 a {
        text-decoration: none;
        color: #3b5998;
      }
      h1 a:hover {
        text-decoration: underline;
      }
    </style>

  </head>

  <body>
    <h1>php-sdk</h1>
    <?php if ($user): ?>
      <a href="logout.php" >Logout</a>
    <?php else: ?>
      <div>
       
        <a href="<?php echo $loginUrl; ?>">Login with Facebook</a>
      </div>
    <?php endif ?>

    <?php if ($user): ?>
      <h3>You</h3>
      <img src="https://graph.facebook.com//picture">
      <h3>Your User Object (/me)</h3>
      <pre><?php 
    echo $user_profile['email'];
    echo "\n";
    echo $user_profile['name'];
    ?></pre>
    <?php else: ?>
      <strong><em>You are not Connected.</em></strong>
    <?php endif ?>
   
  </body>
</html>