Facebook Connect for Web Startups Design Guide

8/14/2019 Facebook Connect for Web Startups Design Guide

1/11

Facebook Connect:A Feature WalkthroughAn overview of what you can do withFacebook Connect and examples of good

implementations.

The Facebook Platform Team

Facebook Connect allows you to bring a more social experience toyour website. This guide talks about Facebook Connects differentfeatures and gives examples of great Facebook Connectimplementations from across the Web.


2/11

Authenticate using Facebook Connect

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

Extend Facebook Connect to gather other pieces of information thatwould be useful for your company (such as email address, personalpreferences etc). Frintro.com is an example of a company that usesFacebook Connect as its login system, but also asks for additionalinformation.

Use Connect as a complement to your existing registration system.Companies likeJibJab.com allow both methods of login.

By leveraging Facebook Connects trusted brand you give yourselfaccess 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 helpmore people share more laughs than any other company in the historyof the world".

JibJabs main page gives users the option on the top right to log in withFacebook Connect.

Facebook Connect: Design Idea
http://www.frintro.com/http://www.jibjab.com/http://www.facebook.com/video/video.php?v=630563174283http://www.frintro.com/http://www.jibjab.com/http://www.facebook.com/video/video.php?v=630563174283


3/11

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

below.

Once a user clicks Connect with Facebook the following FacebookConnect dialog (generated by Facebook) appears.



4/11

Once a user completes the above, JibJab shows the user as logged in, inthe top right of the page.



5/11

Connect Authentication: Frintro

Frintro is a new dating site that uses Facebook Connect exclusively forits login. Users connect by clicking the button on the left side of theintro page.



6/11

After accepting the Connect with Facebook dialog, Frintro asks the userfor some more customized information.



7/11

Use Facebook Connect to increase site traffic and engagement

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

Two quick ways to implement sharing and engagement on your site arebelow

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. Thiscreates more virality for your content.

Add a Share button to your content and allow users to share yourcontent 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 contentand things to do on your site

Sharing your content: PopCap Games

PopCap games is a popular gaming site that publishes bestsellers such asZuma and Bejeweled. When a user plays Zuma, PopCap uses FacebookConnect to publish the user's game scores and to the user's News Feed inFacebook.

http://vimeo.com/3289354http://facebook.com/video/video.php?v=636853997423)http://vimeo.com/3289354http://facebook.com/video/video.php?v=636853997423)


8/11



9/11

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.



10/11

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

Facebook Connect also provides you great opportunities to customize yoursite based on your users information.

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

Find out who your user's friends are and give your user a more socialexperience around a friends activity.

Some further ideas you may want to consider:

Provide location and network based content or suggestions to yourusers

Provide friend information and suggestions to your users based onactivity on your site

Access your users 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 youmay want to consider caching the information. More information oncaching policies can be found here.

Facebook Connect: Design Ide
http://wiki.developers.facebook.com/index.php/Storable_Informationhttp://wiki.developers.facebook.com/index.php/Storable_Information


11/11

Customizing your site: Lala.com

Lala.com, a music sharing site, provides friend information on their site tobring a more social and customized experience for their users.

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

Facebook Connect: Design Ide

Documents

Facebook Connect for Web Startups Design Guide