Overview: Integrating Facebook Connect With Your Website
Last week at Facebook’s f8 developer conference, CEO Mark Zuckerberg formally announced Facebook Connect, Facebook’s new program that extends the Facebook Platform to any website that wants to integrate Facebook APIs for user authentication, sharing website content with friends, and publishing feed stories to generate traffic.
Here, Inside Facebook explains what steps webmasters need to tale to integrate Facebook Connect on your own website:
1. Authenticating Users
Facebook has provided a sample implementation of Facebook Connect that fully demonstrates the lightweight authentication process. Rather than mandate a standard login button for websites using Connect, Facebook is encouraging developers to create their own login buttons (you can also use the default).
When a user clicks the login button, one of three dialog boxes will appear:
- If a user isn’t logged into Facebook, the login/TOS popup dialog appears. If the user then authorizes Facebook Connect, Facebook gives a session for this user on your site and generates a callback to your site.
- If the user is logged into Facebook but hasn’t authorized Facebook Connect for your site, an AJAX dialog appears. After authorizing Connect, the dialog closes.
- If the user is logged in and has already authorized Connect for your site, Facebook generates a session for this user and provides a callback to your site.
2. Connecting Your Users’ Accounts with Facebook Accounts
Connecting accounts can be completed either when a user logs into Facebook from your site, or by accepting a Facebook Connect request from another already-connected friend.
When a user logs into your site, you can encourage that user to connect to her Facebook account by “calling connect.registerUsers, passing an email hash with it.” If the hash matches the user’s address on Facebook, Facebook will automatically return that “hash in the user’s email_hashes property.” This hash is then used as a key for merging your user’s account on your site and her account on Facebook. Once a user accepts, you can then determine which of that user’s friends are on your site.
Additionally, authorized users can generate Connect Requests for their friends, which appear alongside all other requests on the Facebook homepage. When a friend receives a request, that friend can visit your site, and can then return to Facebook to accept the request.
3. Publishing Feed Stories
Depending on a user’s login state and their authorization of Facebook Connect on your site, there are three possibilities:
- If the user has authorized Facebook connect and is logged in, you can publish one line stories automatically, or you can implement feed forms to allow your users to post short or full stories.
- If the user is logged into Facebook but has not authorized Connect on your site, an approval message will be displayed to the user when your site tries to publish a one line story. For other story sizes previews are displayed which the user can then approve.
- If the user is not logged in, nothing can be published.
Launch Timetable
After f8, the Facebook Connect sandbox opened for developers. It is slated for a late summer/fall launch. For more, see the Facebook Developers Wiki.
August 1st, 2008 at 1:39 pm
[...] Overview: Integrating Facebook Connect With Your Website [...]
August 1st, 2008 at 7:02 pm
Looking forward to seeing this in full action!
August 1st, 2008 at 7:22 pm
i can get the connect the working running example to mu account and is abit fun publishing silly runs like going down the street and running after the bus (which i had done for ‘testing’ / fun purposes there is a friend section of the runaround but do not know if my friends got connect requests LOL
August 2nd, 2008 at 4:08 pm
I *really* dislike that log in form. By default it suggests providing your log in details to, for all the user knows, a third party. It’s only if you click “If you do not trust this site, you can connect on Facebook.com directly” that you get a safe log in screen.
It’s not an issue of not trusting the site, you should never be asked to, and Facebook certainly shouldn’t encourage people, to trust any other other site with their log in details.
December 4th, 2008 at 11:51 pm
fdf
December 21st, 2008 at 5:45 pm
indeed nice
January 1st, 2009 at 2:52 pm
Happy New Year to all of You
January 3rd, 2009 at 2:22 pm
Interesting…
January 26th, 2009 at 10:19 am
Awesome…
January 30th, 2009 at 6:56 am
I am not a Developer nor a designer but this is a fantastic application. Problem is I cant find any video or information to add to my website (not word press or blog) just my website. Could any of you experienced fellas gice me more information on how I can do this. Currently I have downloaded the fbconnect folder and uploaded to my directory on my server, but that is where I have lost what to do next. Please somebody help!!!
March 30th, 2009 at 7:49 pm
test
April 16th, 2009 at 1:47 pm
test
May 15th, 2009 at 9:42 am
Hi, Just getting started with facebook connect and really enjoying it! Thanks for a frank article!
August 21st, 2009 at 2:52 am
nice article!
September 10th, 2009 at 12:33 am
Cool, thx
October 28th, 2009 at 8:28 am
hey
November 2nd, 2009 at 1:53 pm
I want to integrate it to my website! thanks for the informations.
February 17th, 2010 at 9:53 pm
Nice development by facebook. Look forward to integrating it to my site
December 20th, 2010 at 4:09 am
I have integrated facebook connect however there is where I have stopped. Adding everything together including a fanpage, creating an app etc is about as clear as mud!
Cmon facebook team, your documentation is really all over the place.
if as a wordpress/blogger I wish to implement FB connect and integrate all the comments and stories onto my fanpage feed, where is the clear guide?
Mark
September 24th, 2012 at 6:07 am
[...] only 6 percent of the top online retailers making use of a feature the social network launched in 2008. Sociable Labs says it’s not because Facebook login isn’t useful. The option simplifies account [...]