Anatomy of a Facebook Connect Site
From Facebook Developer Wiki
Facebook Connect is about integrating Facebook into other Web sites. There are many creative ways to do that, but we've noticed some common themes found among most sites and listed them here. Many of these examples use our sample application, The Run Around. For in-depth explanation of the source, see The Run Around.
Contents |
[edit] Connect Button
The Facebook Connect button is typically placed either on the home page or login page of a site. It is also sometimes run as an ad, or can be available via Account Settings.
[edit] Sample XFBML
See Defining Your Login Button for more details on how to get a button you can use.
[edit] Facebook Presence Indicator
When a user connects with a site, they want to know what actually happened. The recommended way to indicate that they are acting in the context of Facebook is to show their real name and profile picture, with a Facebook favicon embedded in the corner of the picture.
" border="0" alt="EditingMySpace.com - Betty Boop"></a>[edit] Connect Request Link
When a user is browsing your site, Facebook can tell you how many of the user's friends are already members of your site. You can put a link somewhere that says, "Three of your friends already use the site - invite them to connect." This can dramatically increase engagement of your existing users by drawing them back to your site.
Note: This only works if you use connect.registerUsers to share email hashes with Facebook.
[edit] Sample XFBML
" border="0" alt="EditingMySpace.com - Betty Boop"></a>[edit] Friends Page
Once a user has several friends who have connected with the site, the activity of those friends becomes an important part of their experience. Typically there is a page for Friends' Activity - for instance, on Yelp you could see Friends' Reviews, or on Digg you could see Stories Friends Have Dugg.
Tying it together into a page is helpful.
[edit] User Profile
You can publish stories on Facebook that mention the actions the user took on your site. For example, if you recorded a run on The Run Around site, you could post the run to Facebook.
Clicking Add Run pops up a Feed form that prompts the user to publish this story on his Facebook profile.
Clicking Publish publishes the story on his Wall almost immediately.
[edit] User Actions and Content
Many sites display user actions throughout the site. On Digg, you can see people who've dugg stories; Yelp will show you people who have written reviews. For sites like that, you can use XFBML to display the names and profile pics of Facebook users who have contributed content.
[edit] Sample FBML
Depending on how frequently they show up and what the context of the site is, you may choose to display a Facebook favicon in the corner of the photos to mark the users as Facebook users.
[edit] Example Connect Site
[edit] Ready to Code?
Then try out Facebook Connect >
In additon, Devtacular offers a bare bones Facebook Connect integration and provides some sample code. It's a great starting point to understand this wiki entry. Read How to Integrate with Facebook Connect.


