Facebook Cookbook - Jay Goldman [20]
Solution
There used to be a Left Nav, which was the area that ran vertically down the left edge of Facebook’s main content area and included the Facebook logo, search box, users’ installed Applications, and a “skyscraper” format ad. That was removed in the Profile redesign of mid-2008, in favor of a site-wide Applications menu in the blue bar at the top of each page, as shown in Figure 2-10.
Figure 2-10. Page header with Applications menu
Clicking on Applications opens the menu shown in Figure 2-11.
Figure 2-11. Applications menu open
The menu is divided into three sections: the top contains commands related to the current app or to all apps; the second lists the five most recent apps in which you’ve viewed at least one Canvas page; and the third lists all of the apps you’ve “bookmarked,” which includes all of the apps you’ve added to your Profile.
Selecting “Bookmark [App Name]” opens a pop-up dialog (shown in Figure 2-12) with a checkbox indicating the current state of the bookmark.
Figure 2-12. Bookmark application dialog
This is slightly confusing because the menu item should really be something like “Add Bookmark for [App Name]...” and should change to “Remove Bookmark for [App Name]...” if it’s bookmarked. Selecting “Edit [App Name] Settings...” opens the same dialog but on the Wall tab instead of the Bookmark tab, as shown in Figure 2-13.
Figure 2-13. Edit Application Settings dialog
Finally, selecting “See All My Applications” goes to the full application listing page shown in Figure 2-14, where you can reorder your bookmarked apps.
Figure 2-14. All Applications page
As a developer, this menu is of little interest to you, because you have no control over whether your application appears in it (you used to have an integration point on the Left Nav bar if users allowed it). That said, consider that your app’s name and icon are still primary real estate because they will at least turn up on the “Recently Used” list, and you want to make sure that your entry is memorable.
Facebook Canvas Pages
Problem
Where do users go when they’re actually using my application?
Solution
Every artist needs a canvas, and you’re no exception. The Facebook Canvas is the area you work in when you’re crafting your masterpiece of interface design and elegant code creation. App developers have the choice of building their apps as Canvas pages, which reside within the Facebook navigation frame, or as iFrames, which pull content from a different server and display it in place. Unless you have a make-or-break reason to use an iFrame, always go with the Canvas page option because then you’ll be able to take full advantage of things like FBML and FBJS. The Canvas page, shown in Figure 2-15, is the blue square in Facebook’s Deep Integration diagram (although it shows the old Profile design with the Left Nav rather than the newer design, which has a wider Canvas).
Figure 2-15. Facebook’s Deep Integration diagram showing the Canvas page
Discussion
The most important thing to remember here, especially if you’re building a Facebook version of something that already exists elsewhere on the Web (and especially if you’re adapting a Flash movie), is that the Canvas area is only 760 pixels wide (up from 646 pixels in the old Profile design), so you may have to play with your layout to get it to fit. Calling this an integration point is a bit of a stretch, since Canvas pages are really only seen by users who are using your app (rather than their friends who are being exposed to it through the social graph), but you’ll also spend the vast majority of your time building them, so pay close attention.
Think Outside the Profile Box
Problem
How do I get all this awesome data I have about my users out of the Canvas page and into their social graph?
Solution
One of the best ways to leverage the social graph is to show information about your users to their friends in a way that inspires them to install your app as well. The best place to find information about a person is on their