Facebook Connect:

A Feature Walkthrough
An overview of what you can do with
Facebook Connect and examples of good
implementations.

The Facebook Platform Team

Facebook Connect allows you to bring a more social experience to

your website. This guide talks about Facebook Connect’s different
features and gives examples of great Facebook Connect
implementations from across the Web.
 Facebook Connect: Design Ideas| 2

Authenticate using Facebook Connect

Build your site from the ground up using Facebook Connect as your
authentication system. By using Facebook Connect you get access to
over 250 million authentic users.

Extend Facebook Connect to gather other pieces of information that

would be useful for your company (such as email address, personal
preferences etc). Frintro.com is an example of a company that uses
Facebook Connect as its login system, but also asks for additional
information.

Use Connect as a complement to your existing registration system.

Companies like JibJab.com allow both methods of login.

By leveraging Facebook Connect’s trusted brand you give yourself

access to wide pool of users. Learn how to add connect to your blog.

Connect Authentication: JibJab

JibJab.com is a site that shares original content – its mission is “to help
more people share more laughs than any other company in the history
of the world".

JibJab’s main page gives users the option on the top right to log in with
Facebook Connect.
 Facebook Connect: Design Ideas| 3

When a user clicks the “Login” or “Login with Facebook” button, JibJab
displays the dialog below. JibJab uses two registration systems as seen
below.

Once a user clicks “Connect with Facebook” the following Facebook

Connect dialog (generated by Facebook) appears.
 Facebook Connect: Design Ideas| 4

Once a user completes the above, JibJab shows the user as logged in, in
the top right of the page.
 Facebook Connect: Design Ideas| 5

Connect Authentication: Frintro

Frintro is a new dating site that uses Facebook Connect exclusively for
its login. Users connect by clicking the button on the left side of the
intro page.
 Facebook Connect: Design Ideas| 6

After accepting the “Connect with Facebook” dialog, Frintro asks the user
for some more customized information.
 Facebook Connect: Design Ideas| 7

Use Facebook Connect to increase site traffic and engagement

Facebook Connect offers several powerful and simple ways to make your
site more social. By increasing the social aspects of your site you can
increase traffic and engagement at your site.

Two quick ways to implement sharing and engagement on your site are
below

• Learn how to quickly implement comments on your site

• Learn how to share comments to your users' Feed

In addition to the above you can also do the following:

Publish stories to a user's News Feed based on a user's actions. This

creates more virality for your content.

Add a Share button to your content and allow users to share your
content with their friends

Allow users to invite their friends to your site

Allow users to interact with their friends on your site

Send your users reminders, updates, and notifications around content

and things to do on your site

Sharing your content: PopCap Games

PopCap games is a popular gaming site that publishes bestsellers such as
Zuma and Bejeweled. When a user plays Zuma, PopCap uses Facebook
Connect to publish the user's game scores and to the user's News Feed in
Facebook.
Facebook Connect: Design Ideas| 8
 Facebook Connect: Design Ideas| 9

Sharing your content: RunThere.com

RunThere.com allows a similar way for users to publish and track runs. A user can log runs at
RunThere and then publish it to News Feed.
 Facebook Connect: Design Ideas|
10

Tune your site to your user based on his or her information

Facebook Connect also provides you great opportunities to customize your

site based on your user’s information.

Use user information such as location and picture to tune your site to
your user.

Find out who your user's friends are and give your user a more social
experience around a friend’s activity.

Some further ideas you may want to consider:

Provide location and network based content or suggestions to your

users

Provide friend information and suggestions to your users based on

activity on your site

Access your user’s photos for further customization

As you pull more data from Facebook, be sure to design for latency.
Sometimes accessing photos or information can take some time so you
may want to consider caching the information. More information on
caching policies can be found here.
 Facebook Connect: Design Ideas|
11

Customizing your site: Lala.com

Lala.com, a music sharing site, provides friend information on their site to

bring a more social and customized experience for their users.

These are just some of the great features that you can integrate with
Facebook Connect. Want to learn more? Make sure you read the documents
in the download on business reasons to adopt Facebook Connect and on how
to rapidly prototype Facebook Connect.