Facebook for Websites - Facebook developers http://developers.facebook.

com/docs/guides/web

Documentation Forum Showcase Blog Search for documentation

Facebook for Websites

Home › Documentation › Facebook 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

Single sign-on
Account registration data
Server-side personalization
Analytics
What next?

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:

1 of 4 30/10/2010 21:28
Facebook for Websites - Facebook developers http://developers.facebook.com/docs/guides/web

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. 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. In
general, you should use only one Application ID for your base domain; a single Application ID allows you to create
a full-featured application. 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>

2 of 4 30/10/2010 21:28
Facebook for Websites - Facebook developers http://developers.facebook.com/docs/guides/web

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']))->id;

Account 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
Registration Data 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 need 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:

3 of 4 30/10/2010 21:28
Facebook for Websites - Facebook developers http://developers.facebook.com/docs/guides/web

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?access_token=' .
$cookie['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 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
Personalization look something like this:

// Fetch the user's friends

$friends = json_decode(file_get_contents(
'https://graph.facebook.com/me/friends?access_token=' .
$cookie['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 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 © 2010 About Principles & policies Privacy policy

4 of 4 30/10/2010 21:28