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.

Social Media 101

Mediabistro Course

Social Media 101

Get hands-on social media training for beginners in our online boot camp, Social Media 101! Starting September 4, social media and marketing experts will teach you the best practices to be successful on social. Hurry, this boot camp starts next week! Register now!

 

Leave a Reply

20 Responses to “Overview: Integrating Facebook Connect With Your Website”

  1. Join me on Facebook! (plus 119+ Must See Facebook Resources including Marketing, Education, Security, Apps and more!) » Barbara Ling says:

    [...] Overview: Integrating Facebook Connect With Your Website [...]

  2. Social Marketing Journal says:

    Looking forward to seeing this in full action!

  3. Jamie says:

    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

  4. David says:

    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.

  5. Lololol Momoo says:

    fdf

  6. Noah Laux says:

    indeed nice

  7. Moses Tuanakotta says:

    Happy New Year to all of You

  8. Chad Pursley says:

    Interesting…

  9. Chuck Owen says:

    Awesome…

  10. Adam Kilshaw says:

    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!!!

  11. Jermaine Wells says:

    test

  12. Chris Bewry says:

    test

  13. Squidge Website Design says:

    Hi, Just getting started with facebook connect and really enjoying it! Thanks for a frank article!

  14. Fenya Su says:

    nice article!

  15. M.Bazlamit says:

    Cool, thx

  16. Kadeem Best says:

    hey

  17. Gringo says:

    I want to integrate it to my website! thanks for the informations.

  18. Sadjere clement says:

    Nice development by facebook. Look forward to integrating it to my site

  19. Mark - Internet Business says:

    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

  20. Internet retailers miss opportunities by not using Facebook login, Sociable Labs says says:

    [...] 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 [...]

Get the latest news in your inbox
interested in advertising with inside facebook?

Social Media Jobs
of the Day

Senior Social Media Strategist

Current
Chicago, IL

Community Manager

Uncharted Play
New York, NY

Social Media Editorial Fellowship

Brooklyn Magazine
Brooklyn, NY

Assistant Social Media Editor

The Daily Dot
New York, NY

Communications Specialist

National Nurses United
Oakland, CA

Featured Company

Join leading companies like this one and recruit from the nation's top media job seekers on the Mediabistro Job Board. Every job post comes with our satisfaction guarantee. Learn More
 

Our Sponsors

Mediabistro A division of Prometheus Global Media home | site map | advertising/sponsorships | careers | contact us | help courses | browse jobs | freelancers | content | member benefits | reprints & permissions terms of use | privacy policy Copyright © 2014 Mediabistro Inc. call (212) 389-2000 or email us