Facebook for Websites – Facebook Developers

 

Facebook for Websites

HomeDocumentationFacebook for Websites

Introduction

The Facebook Platform enables you to make your website more personalized and social. You can mix and match Facebook’s APIs to best meet your goals:

  • Registration + Login — With a single dialog, you can access data including a user’s real name, email address, profile picture and list of friends. Replace or supplement your user account system with Facebook to help drive signups and improve data quality.

  • Engagement — With Facebook users comes their friends; incorporate these connections to make your product more engaging. Social plugins like the Like button and the activity feed enable you to offer social experiences with just a line of HTML. The Graph API enables you to integrate the social graph into your site in deep and compelling ways.

  • Growth — You can publish content from your site into the social graph to reach your users’ friends. The Like button enables users to share your site’s content back to their Facebook stream with one click. In addition, you can integrate pages deeply into the social graph via the Open Graph protocol.

    This guide will walk you through the basics of creating a web application with some of these features. If you aren’t sure where to start after reading this guide, check out the Platform showcase for inspiration from other sites.


    Contents


    Social Plugins

    Social plugins are the easiest way to get started with Facebook Platform. The plugins are embeddable social features that can be integrated in your site with a line of HTML. Because they are hosted by Facebook, the plugins are personalized for all users who are logged into Facebook — even if the users haven’t yet signed up for your site.

    The most important social plugin is the Like button, which enables users to post pages from your site back to their Facebook profile with one click. You can add a Like button to any page with an iframe tag:

    <iframe src="http://www.facebook.com/widgets/like.php?href=http://example.com"
            scrolling="no" frameborder="0"
            style="border:none; width:450px; height:80px"></iframe>

    There are a number of options for the Like button, including the option to include the names and profile pictures of the user’s friends who have also liked the page. Here is a like button for the Facebook Developers site:

    Once you have included Like buttons on a lot of your pages, you can use other social plugins to turn those user interactions into more engaging experiences throughout your site. For example, you can use the activity feed plugin to show users a stream of the recent likes and comments from their friends on your site, and you can use the recommendations plugin to show personalized page recommendations to your users based on the likes and comments across your entire site. Here are the activity and recommendations plugins for the Facebook Developers site:

    All social plugins can be integrated with your site with iframe tags or XFBML tags, special XML tags that can be included in your HTML pages and parsed by the JavaScript SDK. iframe tags don’t have any dependencies, but XFBML tags are more flexible because they are not limited to the fixed size of the iframe. For example, the XFBML version of the Like button enables additional functionality like commenting that is not available in the iframe version. Here is the activity feed plugin as an iframe:

    <iframe src="http://www.facebook.com/widgets/activity.php?site=example.com"/>

    and the XFBML equivalent:

    <fb:activity-feed site="example.com"/>

    Get started by checking out our entire suite of social plugins.


    Single Sign-on

    Facebook enables you to remove the registration process for your site by enabling users to log in to your site with their Facebook account. Once a user logs in to your site with his or her Facebook account, you can access the user’s account information from Facebook, and the user is logged in to your site as long as he or she is logged in to Facebook.

    The Facebook Platform uses the OAuth 2.0 protocol for authorization. You can find all the details for Facebook’s implementation of OAuth 2.0 in the authentication guide.

    While you can implement a complete login and signup system using OAuth 2.0 directly, the open source JavaScript SDK is a simple way to implement login and signup without worrying about the details of the protocol. When a user logs into your site, the SDK saves the credentials for the active Facebook user in a cookie on your site’s domain so that you can use the user’s identity easily in both your server-side and JavaScript code. It provides a single, simple callback so your application can automatically handle the complex set of authentication states that exist in a single-sign on system.

    For example, if a user has previously logged into your website, but doesn’t have a cookie for your site in the current browser, the SDK will automatically detect that condition and instantly log the user in to your site without requiring the user to click a Facebook login button again.

    The JavaScript SDK requires that you register your application with Facebook to get an app id for your site. Once you have your app id, add this to the bottom of your page:

    <div id="fb-root"></div>
    <script src="http://connect.facebook.net/en_US/all.js"></script>
    <script>
      FB.init({appId: 'your app id', status: true, cookie: true, xfbml: true});
      FB.Event.subscribe('auth.sessionChange', function(response) {
        if (response.session) {
          // A user has logged in, and a new cookie has been saved
        } else {
          // The user has logged out, and the cookie has been cleared
        }
      });
    </script>

    The auth.sessionChange callback is called every time a user logs in or out of your site. It is automatically called, e.g., when the user is logged into Facebook and has previously logged into your site, but is missing a cookie for your site in the current browser.

    With the API initialized, you can pop up a Facebook authorization dialog by calling the FB.login JavaScript method, or you can include the standard Facebook login button with the <fb:login-button> tag:

    <fb:login-button></fb:login-button>
    

    which renders the standard Facebook login button:

    Authentication dialog

    What do you do once the user is logged in? You can fetch data from Facebook via JavaScript with the FB.api method, but some of the most interesting integrations involve server-side code. The JavaScript API saves the details for the logged in user in a signed cookie named fbs_APP_ID. Here is a complete PHP script that implements single-sign on with the JavaScript SDK, using the cookie so that a Facebook login button is only shown for logged out users:

    <?php
    
    define('FACEBOOK_APP_ID', 'your application id');
    define('FACEBOOK_SECRET', 'your application secret');
    
    function get_facebook_cookie($app_id, $application_secret) {
      $args = array();
      parse_str(trim($_COOKIE['fbs_' . $app_id], '\\"'), $args);
      ksort($args);
      $payload = '';
      foreach ($args as $key => $value) {
        if ($key != 'sig') {
          $payload .= $key . '=' . $value;
        }
      }
      if (md5($payload . $application_secret) != $args['sig']) {
        return null;
      }
      return $args;
    }
    
    $cookie = get_facebook_cookie(FACEBOOK_APP_ID, FACEBOOK_SECRET);
    
    ?>
    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml"
          xmlns:fb="http://www.facebook.com/2008/fbml">
      <body>
        <?php if ($cookie) { ?>
          Your user ID is <?= $cookie['uid'] ?>
        <?php } else { ?>
          <fb:login-button></fb:login-button>
        <?php } ?>
    
        <div id="fb-root"></div>
        <script src="http://connect.facebook.net/en_US/all.js"></script>
        <script>
          FB.init({appId: '<?= FACEBOOK_APP_ID ?>', status: true,
                   cookie: true, xfbml: true});
          FB.Event.subscribe('auth.login', function(response) {
            window.location.reload();
          });
        </script>
      </body>
    </html>
    

    The cookie saved by the API also has an access_token property in addition to the uid. With that token, you can make secure calls to the Graph API to personalize your site’s content to the active user. For example, this line of PHP fetches the active user’s profile:

    $user = json_decode(file_get_contents(
        'https://graph.facebook.com/me?access_token=' .
        $cookie['access_token']))->me;
    


    Account Registration Data

    The Graph API can provide access to all of the basic account registration data you would typically request in a sign-up form for your site, including name, email address, profile picture, and birthday. By using Facebook instead of a web form, a new user can provide all of the information required for site registration with a single dialog (no typing required!). Likewise, the information is more reliable than the information you would get in a web form. For example, the email address provided via Facebook has been verified by Facebook, so it does not need to be re-verified by your site.

    Some of the basic account registration data you might want to collect in your registration process is private, so it requires requesting extended permissions from the user in the login process. Check out the authentication guide for more details about extended permissions. To request the user’s email address and birthday in the login process, use the perms argument to the fb:login-button tag to request the required permissions:

    <fb:login-button perms="email,user_birthday"></fb:login-button>
    

    This login button will produce an authorization dialog that looks like this:

    Authentication dialog

    Once the user authorizes your site, you can fetch those fields from the user’s profile:

    $user = json_decode(file_get_contents(
        'https://graph.facebook.com/me?wrap_access_token=' .
        $cookie['oauth_access_token']))->me;
    register_user($user->id, $user->email, $user->name, $user->username,
                  $user->birthday_date);
    

    A user’s profile picture can always be accessed at the same URL:

    http://graph.facebook.com/UID/picture
    

    For example, Mark Zuckerberg’s profile picture is http://graph.facebook.com/4/picture. The URL will always refer to the most recent profile picture, which ensures that if a user updates his or her picture on Facebook, those changes will be reflected on your site.


    Server-side Personalization

    Once you have hooked up single sign-on, you can increase the engagement on your site by personalizing the content on your site to a user based on her social graph. Every site is different, but the basic structure will likely look something like this:

    // Fetch the user's friends
    $friends = json_decode(file_get_contents(
        'https://graph.facebook.com/me/friends?access_token=' .
        $cookie['oauth_access_token']), true);
    $friend_ids = array_keys($friends);
    
    // Fetch all the content posted by this user's friends
    $result = mysql_query('SELECT * FROM content WHERE uid IN (' .
                          implode($friend_ids, ',') . ')');
    $friend_content = array();
    while ($row = mysql_fetch_assoc($result)) {
      $friend_content[] = $row;
    }
    

    Check out the Graph API for all the data available in Facebook Platform, and check out the Platform showcase for inspiration from other sites who have used Facebook for personalization.


    Analytics

    Once your app is up-and-running, you can get detailed analytics about the demographics of your users and how users are sharing from your application with Insights.

    Insights

    Insights supports analytics broken down by application and by domain. The product includes rich data about users sharing content from your site within Facebook no matter where those shares originated. For example, if a user puts a URL from your site into a Facebook status message, that data is included in the analytics for your domain.

    The data from Insights is also included in the Graph API so you can integrate the Facebook analytics data with your own, in-house analytics systems.


    What’s Next?

    Check out the Graph API. It is the core of the Facebook Platform and includes all the data and functionality available from Facebook.

    If you are considering developing a mobile version of your app, you should also check out the mobile app guide.

    Facebook for Websites – Facebook Developers

    Advertisements

    One thought on “Facebook for Websites – Facebook Developers”

    Leave a Reply

    Please log in using one of these methods to post your comment:

    WordPress.com Logo

    You are commenting using your WordPress.com account. Log Out / Change )

    Twitter picture

    You are commenting using your Twitter account. Log Out / Change )

    Facebook photo

    You are commenting using your Facebook account. Log Out / Change )

    Google+ photo

    You are commenting using your Google+ account. Log Out / Change )

    Connecting to %s