Facebook Connect How To - Workshop with Ryan Merket at FOWA : Remote Synthesis

Facebook Connect How To - Workshop with Ryan Merket at FOWA

Posted on Mar 02, 2010

My morning workshop on the second full-day of FOWA Miami 2010 covered Facebook connect. The room felt a little like a basement with a very odd L-shaped configuration and there was a relatively small attendance at first, perhaps with many people still recovering from the party the night before at the Clevelander (not surprisingly, people streamed in late as the session was ongoing). Ryan Merket (@merket), the speaker, used to work at Facebook (left weeks ago I believe) and co-founded ping.fm. He also built the first site that utilized Facebook Connect.

Why Facebook Connect?
There are many other solutions including OpenID and Twitter Connect. However, Facebook has 400 million active users of which 60 million people have used Connect (i.e. clicked the button on some site to log in with Connect). Everything that you put into Facebook, a developer can pull out via Connect - Ryan shows a huge scrolling list of things you can pull including surprising items like religion, sexual orientation and television shows they watch (users can decide what they are willing to share but by default most things are open).

Another reason to use Facebook Connect is because its a real "social graph" - Facebook can take the real-life connections people have and make them available to your application. You have access to things like who someone's mother or wife or husband is, for example. You can pull someone's entire stream and run queries on them. You can also run ads on any Facebook content as long as its your own inventory (you can't supply it to a 3rd party).

Late in the presentation after the code demo below, Ryan shows some statistics about how news feed optimization (NFO) is replacing SEO. He says that may sound ridiculous but then shows how many major sites like JibJab.com, NBC.com, CBS.com and more get dramatically more referrals from Facebook than from Google (of the stats he shows the minimum disparity was 15% - as in 15% more users coming from Facebook than from Google).

Basics of Facebook Connect

1. Authentication
Facebook now allows you to get a users email (via a request for special permission form) which means that Facebook users are your users. You can determine what information you require before a user can continue. You can store the users data and even write it to your database but you need to make sure data older than 24 hours is refreshed.

2. Permissions
These dialogs are apparently being redone but there are different levels of permissions you need to ask for such as stream.read and stream.write. Since there are different prompts for each permission, the rule is don't ask for the permission until you need to use it. Many of the prompts can seem "scary" to a user outside the context of a specific action request. Here are the permissions available (everything else you don't need a permission to access):

publish_stream
read_stream
email
read_mailbox
offline_access
create_event
rsvp_event
sms

Users can edit the permissions but otherwise they persist and you do not need to re-request them once approved.

3. Sharing
Sharing allows you post links and other information into the user's stream.

4. Privacy
Facebook just released a way for users to set granular permissions on certain pieces of information. You need to respect users privacy settings. You should also never show old data (thus the requirement to refresh the data every 24 hours). Facebook also believes you should never surprise the user.

What Can I Do with It?
He showed Thread.com which is a dating website that Facebook invested in that uses Connect. He showed how they make Facebook connect a prominent part of their site since its key to their application. He also shows GirlsGuideTo which uses Facebook connect to log in but also to ensure that users are only women. Next he shows NutshellMail which connects to communications on Facebook, Twitter and MySpace. He also showed Farmville which he called the "game everybody loves to hate" and which recently moved off the Facebook platform and moved to their own site using the API's (which he says you will likely see more Facebook applications do).

Some things not to do, in Ryan's opinion, are:

Make it unclear that the site uses Facebook Connect by obscuring the button;
Use the Connect button but not making it clear why its there;
Hide the connect button by making it small and/or hard to find;
Follow Connect authorization with a long registration process or force people to create an account before connecting to Facebook (use Connect to "lower the hurdle").

He shows Netflix and Plancast as an good example of how you make it clear and obvious what using Facebook Connect on your site will do and how you plan to use the data. He also showed Digg as an example of how you can use Connect to make it easier to register.

Use Connect to create a "social context." Social context is about taking the data you already have and wrapping a social layer around it. He shows TVGuide.com as a good example. They take yours and your friends favorite shows and share those with you, allowing you to interact. Lala.com, recently purchased by Apple, allows people to share music they discover with friends (and even play music straight in the Facebook stream). He shows how Lala also uses the API to allow users to invite friends to join Lala. Another example is My Zappos (my.zappos.com) that does a good job or showing the context of the permissions they want you to enable. CNN created a live stream widget which apparently was created with one line of JavaScript that calls the API.

How to Get Started
You can start by going to http://facebook.com/developer or http://developers.facebook.com/setup.php and set up a new application into your account. You will be required to create a name and get the API key and secret key. The description is important and the logo shows up on the directory (but you don't need these if you are just testing). Your Connect URL must be a straight domain name or a directory name and set your base domain to your domain without the "www." Your development environment must be able to send and receive data from api.facebook.com (if you want to work locally, you'll have to create an SSH tunnel for example).

The things you need in your code include:

the Facebook namespace ("fb") added to your HTML tag (http://www.facebook.com/2008/fbml). This allows you to use tags like <fb:login-button /> or <fb:profile-pic>;
the JavaScript libraries from Facebook (apparently there is a new library in beta about to be released in a few weeks but the current method will continue to work);
a call to the FB.init() function with your API key and a cross-domain receiver file (which is provided to you when you register your application);
once the user logs in you can set a callback function that can begin making API calls.

Live Coding a Connect Example
Much of what Ryan is doing is described on his site at http://ryanmerket.com/connectdocs/. Begin by adding the Facebook XML namespace (if you don't want to use FBML you don't need the namespace). Next you need to add the JavaScript before the body tag. Once you register your application on Facebook, upload the cross-domain receiver file to the directory location you specified in your application registration (one note, if your site has multiple domains you will need to register the application under each of these domains due to browser security restrictions). Facebook even offers you examples via the "Connect Playground" that shows you example code for how to add a login button or list friends. After adding the init() function, he adds a function that is called when the user is logged in and displays the users profile picture and name. All of this is done with minimal code (probably 50 lines including all HTML).

Next he moved on to the server-side portion (using PHP in his examples). You call the REST API for server side calls which always returns JSON. He shows how you can use the API Test console to test any API call you want to make and make sure they return what you expect.

Tools
Facebook has a lot of tools that aren't always marketed that well, so aren't that well known, including:

Facebook Connect Wizard (http://developers.facebook.com/setup.php)
API Test Console (http://developers.facebook.com/tools.php)
Connect Playground (http://developers.facebook.com/tools.php?connect_wizard)
Facebook Widgets (http://www.facebook.com/facebook-widgets)

Ryan says that he will be posting this deck on SlideShare (http://www.slideshare.net/ryanmerket) and will update his Twitter feed (@merket) with the URL.

Comments

Posted By iaman / Posted on 02/08/2011 at 5:20 PM

remote
synthesis

Cool stuff in Flash, Flex, HTML5, JavaScript, Mobile and more.

Facebook Connect How To - Workshop with Ryan Merket at FOWA

Comments

Write your comment

About