Creating Content for Profile Pages ! Complete information on it !

Creating Content for Profile Pages


In This Chapter Knowing what profile boxes and action links are Setting up default settings for your profile FBML Pushing content to the profile using the Facebook API Working with content in the profile box Creating profile action links Although Facebook applications can be launched from the left sidebar, there is little you can do to distinguish your app from others, unless you can design a killer 16x16 icon! However, a user’s profile page is a different story. Effective use of a profile box and profile action links can do far more than serve as a mere application launcher. Instead, your app can become embedded in a user’s Facebook experience and become indistinguishable from Facebook itself. Back in the initial application development walk-through in Chapter 3, I introduce you to the basics of adding content to an application’s profile box. However, in this chapter, you dive deeper and explore how to use FBML to create worthwhile content for profile boxes and action links. Discovering Profile Boxes and Action Links Outside of the application canvas page and news stories you publish, you can interact with users and potential users through the profile box and profile action links. The next two sections discuss these two features in detail. 15_277959-ch09.qxp 5/5/08 11:28 AM Page 195 Profile box A well-thought-out profile box is a user’s primary point of contact with your application. It should enable the user to provide summary or latest information about the app. It should also provide one-click access to the most common tasks of the app. Consider a few different approaches. Taking the “kitchen sink” approach, iLike (see Figure 9-1) displays personalized content and allows users to perform a wide variety of tasks, such as edit settings, view artists liked by the user, find upcoming shows, play a music challenge, and more. In contrast, Where I’ve Been does nearly the opposite (see Figure 9-2), showing no personalized content inside the profile box. In fact, the profile box merely serves as a gateway to the application itself. If iLike’s profile box throws everything at you and Where I’ve Been throws only a little, Introplay’s Workout Olympiad is an example (see Figure 9-3) of a profile box that fits comfortably in between. It provides up-to-date personalized summary workout data and a quick link to the most common task performed with the app. Figure 9-1: iLike takes the “kitchen sink” approach to the profile box. 196 Part III: Developing Facebook Applications 15_277959-ch09.qxp 5/5/08 11:28 AM Page 196 No matter which option you choose, keep in mind that the content displayed should reflect how your users would want to be represented in their profile boxes. Workout Olympiad, for example, would probably have few users if it added jibes like “This loser has not worked out in a week” or “Jeesh, Rich is ranked 122. Is that his age?” You should also present your application in an attractive light, encouraging viewers to install your app. Profile action links Profile action links are displayed below a Facebook user’s photo on the profile page (see Figure 9-4). These links enable users to quickly access a function of your application. Facebook permits you to add a profile action link to Facebook users who have not installed your app. The action link is not visible to the user who has not installed your app, but is visible to users who have the app installed and view the profile of the user who hasn’t. Figure 9-3: Personalized content displayed in the Workout Olympiad app. Figure 9-2: Where I’ve Been does not display updated data. Chapter 9: Creating Content for Profile Pages 197 15_277959-ch09.qxp 5/5/08 11:28 AM Page 197 Configuring the Default Profile Settings When you configure your application via the My Applications module of the Developer Home (www.facebook.com/developers/apps.php),



 you can set the default settings of your profile box and actions. When you click the Edit Settings link on your application listing, the Edit application page is displayed. In the Installation Options section, the following three options are associated with the profile: Default FBML: This option allows you to supply initial FBML content for your application. This hardcoded method works well if you do not need to display personalized content. However, if you do need to display such content, you will want to use the profile.setFBML API call. Here are three other tips to keep in mind when working with default FBML for your profile box: • The default FBML content is displayed to both application users and nonusers and is generally a good place to add an invitation link. • The default FBML is cached, so when you make changes, content is not updated immediately. You will typically need to wait some time before your new changes appear. Figure 9-4: Profile action links. 198 Part III: Developing Facebook Applications Who sees what? Exactly what is displayed in a user’s profile for your profile box depends on both the profile owner and the viewer. When a viewer who has not installed your app views the profile of an application user, the fb:wide or fb: narrow content is displayed. However, if the viewer is a fellow app user, Facebook will also display any fb:profile-action items on the profile as well. 15_277959-ch09.qxp 5/5/08 11:28 AM Page 198 • Any line breaks placed inside the Default FBML edit box are replaced with
tags. Default Action FBML: This enables you to provide a default action link for users. (Handy if you have a common action that users perform in your app.) Default Profile Box Column: This specifies whether the profile box should be wide or narrow by default. The default FBML you set up in the application configuration page is used inside the profile box unless you specifically update it inside your application. Pushing Profile Content with profile.setFBML You can update a profile box or profile action link using the Facebook API method profile.setFBML. The method in PHP looks like this: $facebook->api_client->profile_setFBML($markup, $uid, $profile, $profile_action, $mobile_profile) Several optional parameters are available: $markup: Is an attribute that is being phased out, so simply set it to null. $uid: Specifies the user ID or page ID. (If null, the logged-in user is assumed.) $profile: Specifies the FBML markup for the profile box. $profile_action: Indicates the content for a profile action link. $mobile_profile: Provides content for mobile devices. Using profile.setFBML, the profile box of the current user can be updated with the following code: $fbml = ‘Welcome to fbRecipe, the way recipes were meant to be.’; $facebook->api_client->profile_setFBML(null,null,$fbml); Figure 9-5 shows the results in the profile box. Chapter 9: Creating Content for Profile Pages 199 15_277959-ch09.qxp 5/5/08 11:28 AM Page 199 I walk you through how to use profile.setFBML to create action links in the section “Adding Action Links to a User Profile,” later in this chapter. To ensure that your profile box is updated, you should tie the updating of the profile box or action links to events inside your application. Consider, for example, the fbRecipe app. When a new recipe is entered, I could add the following content to the profile box: View your new recipe. You now have x recipes in your recipe box. Figure 9-5: Updating the profile box content. 200 Part III: Developing Facebook Applications 15_277959-ch09.qxp 5/5/08 11:28 AM Page 200 You cannot update the profile box dynamically when the profile loads — in other words, you can’t get the profile to call your application when a user loads the page. Instead, you have to push content to users based on events happening in your application, not what’s happening on a user’s profile page. Introplay’s Workout Olympiad, for example, updates its profile box when a user enters workout info through its Facebook app UI. However, because users can also enter workout data from the main Introplay Web site (www. introplay.com) — totally outside of Facebook — Introplay also updates a Facebook user’s profile box at that time as well. In addition to updating the profile based on user-based events, you can also have a background process that periodically performs updates based on external events. For example, five days before a major holiday, the fbRecipe app could add a reminder to the profile box: Thanksgiving is right around the corner. Find the perfect pumpkin pie recipe. If it is an external app, you should trigger the update even if the user is working outside the Facebook implementation. Working with Content in the Profile Box Several FBML tags are specifically for adding content in a profile box. The fb:subtitle tag is used to display a title for the profile box. The fb:action tag, which is normally placed in a canvas page’s dashboard header (see Chapter 8), can also be placed in the fb:subtitle tag. The fb:wide element is used to define content to be rendered when the profile box is displayed in the wide column of a profile. The fb:narrow tag does the same for the narrow column. The fb:user-table element displays a user table, displaying a square thumbnail and name for each user (defined by fb:user-item). Consider a PHP-based example that uses these FBML tags to produce a mock profile box. To begin, I use the << Add new recipe Share recipe fbRecipe box Wide profile boxes rule!
Exchange recipes with your fbRecipe-toting friends:
I want to point out several tags. The fb:subtitle tag defines an optional seeallurl attribute, which specifies a URL to jump to if the user wants to see everything by clicking a See All link in the subtitle bar. Two fb:action links are enclosed in the fb:subtitle element. These links appear on the right side of the subtitle bar (to the left of the See All link). After the paragraph content, the block contains an fb:user-table definition, which specifies to render all the fb:user-item tags in a six-column grid. When the profile box is displayed in the right wide column, all that FBML content will be rendered. However, suppose that I’d like to change the content if the user moves the profile box to the narrow column in the profile. In this case, I specify custom content using the fb:narrow element, with a focus on minimizing width: fbRecipe box Narrow profile boxes rule!
Exchange recipes with your fbRecipe-toting friends:
202 Part III: Developing Facebook Applications 15_277959-ch09.qxp 5/5/08 11:28 AM Page 202
The fb:subtitle tag in this context is stripped down to the basics, offering just a subtitle caption. The additional links have been removed. What’s more, the fb:user-table cols attribute is changed to display user items in a three-grid table. The code for the entire file is shown here: Add new recipe Share recipe fbRecipe box Wide profile boxes rule!
Exchange recipes with your fbRecipe-toting friends:
fbRecipe box Narrow profile boxes rule!
Exchange recipes with your fbRecipe-toting friends:
Chapter 9: Creating Content for Profile Pages 203 15_277959-ch09.qxp 5/5/08 11:28 AM Page 203
EndHereDoc; $facebook->api_client->profile_setFBML(null,null,$fbml); echo “Amazing content was added to the profile box
”; ?> Figures 9-6 and 9-7 display the content in wide and narrow profile boxes, respectively. Consider a second, more refined example in which I want to present the following information and action items in a profile box: Add a new recipe Share a recipe with a friend View a thumbnail listing of the latest recipes of the current user View all recipes of the current user View a thumbnail listing of the friends of the current user who are also app users Figure 9-6: “Open wide, profile box.” 204 Part III: Developing Facebook Applications 15_277959-ch09.qxp 5/5/08 11:28 AM Page 204 Because I am rendering the latest recipes and friends/app users in a tabular structure (which has a fixed width), I need to have both a wide and narrow version to ensure proper display. Looking first at the wide profile box, I begin by defining two fb:action links on the fb:subtitle var, but don’t add a subtitle: Add new recipe Share recipe Next, I want to add a listing of the last seven recipes of the current user. A header is included that adds a thin gray line underneath it:

latest recipes
Figure 9-7: A narrowminded profile box. Chapter 9: Creating Content for Profile Pages 205 15_277959-ch09.qxp 5/5/08 11:28 AM Page 205 An HTML table is then used to present thumbnail images of the last seven recipes. Because of the width of the wide profile box, I can add each of these in a single row. These images are linked to the actual recipe listing in the app. Here’s the table code:
In a real-world setting, this table would be generated on the fly based on a database query. Next, the thumbnail listing of friends who are also app users is displayed using the fb:user-table and fb:user-item tags that I describe earlier: View all of recipes
friends who also cook
206 Part III: Developing Facebook Applications 15_277959-ch09.qxp 5/5/08 11:28 AM Page 206 In the fb:narrow block, the profile box structure is tweaked to account for the narrow width, using three rows for the latest recipes table and changing the fb:user-table cols attribute to 3: Add new recipe Share recipe
latest recipes
Chapter 9: Creating Content for Profile Pages 207 15_277959-ch09.qxp 5/5/08 11:28 AM Page 207 View all of recipes
friends who also cook
This code could then be wrapped inside a PHP function named republish_ current_user_profile(). The code listing below shows the full source for this example: Hello , this is your very own box. You win a free antique recipe box! You are special! Add new recipe Share recipe
latest recipes
208 Part III: Developing Facebook Applications 15_277959-ch09.qxp 5/5/08 11:28 AM Page 208
View all of recipes
friends who also cook
Add new recipe Chapter 9: Creating Content for Profile Pages 209 15_277959-ch09.qxp 5/5/08 11:28 AM Page 209 Share recipe
latest recipes
View all of recipes
friends who also cook
210 Part III: Developing Facebook Applications 15_277959-ch09.qxp 5/5/08 11:28 AM Page 210
EndHereDoc; $facebook->api_client->profile_setFBML(null,null,$fbml); } ?> Figures 9-8 and 9-9 show the profile box in both wide and narrow views. See Chapter 4 for tips on using the fb:visible-to-* tags to display content according to the person viewing it. Figure 9-8: Wide view of the profile box. Chapter 9: Creating Content for Profile Pages 211 15_277959-ch09.qxp 5/5/08 11:28 AM Page 211 Adding Action Links to a User Profile The profile.setFBML API call is also used to add profile action links. The only difference is the parameter you specify: $facebook->api_client->profile_setFBML($markup, $uid, $profile, $profile_action, $mobile_profile) The $profile_action parameter should include FBML content that is enclosed in the fb:profile-action tags. The content inside this tag is then turned into a profile action button under the user’s profile photo. To create a profile action link for the current user using PHP, you can enter the following: Figure 9-9: Narrow profile box. 212 Part III: Developing Facebook Applications 15_277959-ch09.qxp 5/5/08 11:28 AM Page 212 function getRecipeCount($user){ return 10; // Hardcoded example } $total_count=getRecipeCount($user); $fbml =’View my recipes (‘.$total_count.’)’; $facebook->api_client->profile_setFBML(null,null,null,$fbml); The getRecipeCount() function returns the number of recipes that the specified user has in the system and assigns it to $total_count. The $fbml variable contains the fb:profile-action tag and its content. This variable is then used in the call to the profile.setFBML function. The text of a profile action link should no more than 28 to 30 characters. Figure 9-10 displays the profile action link. When a user clicks the link, Facebook adds an id parameter to the target URL, passing along the user ID. Therefore, the following is passed to the app when I click it: http://apps.facebook.com/dummies//myrecipes.php?id=665127078 Figure 9-10: Profile action link. Chapter 9: Creating Content for Profile Pages 213 15_277959-ch09.qxp 5/5/08 11:28 AM Page 213 214 Part III: Developing Facebook Applications
Seamless Styles: Styling Your Facebook Application In This Chapter Adding CSS styles into FBML markup Using external CSS style sheets with your apps Defining styles for profile boxes Using fb:ref for defining style sheets Adding Facebook styles to iframe canvas pages Unlike the styling free-for-all at alternative sites like MySpace, Facebook has always been known for its stricter adherence to design standards and for its refusal to offer style customization for individual profiles. Although some users and even developers may lament for more individual expression, the advantages of structure seem to outweigh the disadvantages of stylistic anarchy. Still, Facebook’s design restrictions don’t mean you can’t have any style at all. In this chapter, you discover how to add styles to your application, including FBML canvas pages as well as profile boxes. And, if you are implementing an iframe-based application, I show you how you can use CSS styles to emulate the look and feel of FBML pages. Adding Styles to Your FBML When you develop an FBML canvas page or render content for a profile box, your application already takes on the base default styles of Facebook, such as fonts. The FBML markup tags (such as fb:tab-item or fb:action) that you add also automatically take on a visual style when they are displayed. As a result, you can actually get a long way without adding style code to your application. 16_277959-ch10.qxp 5/5/08 11:28 AM Page 215 However, if your application has any degree of complexity, you will very likely run into situations in which you do need to apply CSS styles to your content. You can do that either inline (as a style attribute), embedded (as a style tag), or as an external style sheet. Using inline styles Like a typical HTML file, you can add CSS styles to your FBML using the style attribute or the style element. To define a style for a specific element, simply add the style attribute. In the following PHP-based example, using a style attribute, the top margin and font color are specified for the div that is rendered on a canvas page: $uids1 = array( 20715969, 55713606, 696951095); $uids2 = array( 705671487, 55714303, 549572223); $friendsMatch = $facebook->api_client->friends_areFriends($uids1, $uids2); echo “
”; echo “
    ”; echo “
  • Are and friends? {$friendsMatch[0][‘are_friends’]}
  • ”; echo “
  • Are and friends? {$friendsMatch[1][‘are_friends’]}
  • ”; echo “
  • Are and friends? {$friendsMatch[2][‘are_friends’]}
  • ”; echo “
”; echo “
”; Using embedded styles You can also include a style element in your FBML content block and have it used in the rendering of the page. To illustrate, for the following profile box, FBML uses a style element to define the styles for table and td and the :hover pseudo-class: $fbml = <<



HERE; $facebook->api_client->profile_setFBML(null,null,$fbml); Note that you have to implement pseudo-classes like :hover in a specific way for profile box FBML. You cannot add pseudo-class styles as an inline style (using the style attribute). Instead, you need to define their style properties in an embedded style element inside the fb:wide or fb:narrow elements. Chapter 10: Seamless Styles: Styling Your Facebook Application 217 16_277959-ch10.qxp 5/5/08 11:28 AM Page 217 Including external style sheets As shown in the previous sections, FBML supports the use of the style attribute and tag within FBML canvas and profile pages. However, at least at the time of this writing, FBML does not permit the use of the link tag or allow @import rules to include external .css style sheets with your FBML code. However, a work-around is available — embedding the style sheet on the server side. For example, using PHP, you can embed an external style sheet by doing the following: If the .css file is in the same directory as the PHP source file, you can drop the second Boolean parameter (which optionally searches for the file in the included path). Specifying Wide and Narrow Styles for Profile Boxes When you are creating styles for the profile box, you will likely find occasion in which you want to customize the style properties based on whether the profile box is displayed in wide or narrow format. The general rule of thumb is to define generic styles outside the fb:wide and fb:narrow elements and then embed styles inside of them that are appropriate only for those layout contexts. To use different styles for the wide and narrow profiles, you may find it helpful to actually define a narrow and wide class to better organize your code. For example:

Extended content
218 Part III: Developing Facebook Applications 16_277959-ch10.qxp 5/5/08 11:28 AM Page 218
Skinny content
Using fb:ref to Load CSS in a Profile Box You can use the fb:ref tag to load CSS styles into a profile box. The fb:reg tag references FBML from a handle defined using fbml.setRefHandle or from a URL. I have not talked about fb:ref or fbml.setRefHandle, so let me begin by showing you how this works. The fbml.setRefHandle is called with the following syntax in PHP: $facebook->api_client->fbml_setRefHandle(“$handle”, “markup”) The $handle variable is associated with FBML code (the $fbml variable). When you create a handle, you register it with Facebook servers. Then, when the content it points to is requested, Facebook serves up the FBML associated with the handle. You can use the handle in multiple places within your application to reference identical FBML content by referencing it with the fb:ref tag. However, perhaps the principal advantage of using fb:ref is its ability to update all user profiles en masse. You can make one call to fbml.set RefHandle to update all profiles rather than being forced to update each and every user. Additionally, when you are using fb:ref, you can make one call to fbml.setRefHandle to update the profile rather than re-rendering the entire profile using profile.setFBML. For example, if you would like to use fb:ref to load CSS styles, you could begin by registering a handle called my_css_styles: $fbml = << #top { position: relative; width: 100px; margin: 0 auto; text-align: center; } EndHereDoc; $facebook->api_client->fbml_setRefHandle(“my_css_styles”,$fbml); Chapter 10: Seamless Styles: Styling Your Facebook Application 219 16_277959-ch10.qxp 5/5/08 11:28 AM Page 219 You can then add an fb:ref tag to the profile box markup: Extended content Skinny connect Facebook caches the latest update of the my_css_styles handle and renders it when the fb:ref is encountered. When you want to update the my_css_ styles content, simply call fbml.setRefHandle from your app or from a backend process that runs periodically. What’s more, instead of using a handle, you can also assign FBML content by specifying a URL as an attribute of fb:ref: Facebook caches the content the first time it encounters the reference. When you want to update it, you call fbml.refreshRefUrl: $facebook->api_client- >fbml_refreshRefUrl(“http://www.richwagnerwords.com/facebook/ global.css”); Going Native: Emulating Facebook Styles One of the advantages of working with FBML canvas pages is that many of the Facebook styles come along for free — making it easy to create a seamless look and feel simply by adding FBML tags to your code. However, if you need to implement an iframe-based canvas page, you can find your app resembling a second-class citizen — looking much different than the Facebook environs. However, because Facebook is built on top of Web standards, you can use the same technologies to emulate Facebook inside your iframe. In the following sections, I show you how to use CSS and HTML to re-create some of the Facebook elements you will likely want to implement on an iframe page. Even if you are using FBML pages, you may still find these sections useful, because some of the controls I emulate have no FBML equivalent (such as the buttons or two-column lists). In general, I try to follow the naming conventions of FBML tags. So, when a matching CSS style exists for an FBML tag like fb:dashboard, I name the corresponding class style fb-dashboard. When no FBML equivalent is available, I usually fall back to Facebook-style sheet-naming conventions. 220 Part III: Developing Facebook Applications 16_277959-ch10.qxp 5/5/08 11:28 AM Page 220 Alternatively, you can always view the source of a Facebook page and check out the actual Facebook style sheets and see how its pages are styled. You can save time typing in all the code by downloading the pseudo_face book.css style sheet and iframe_example.php at this book’s companion Web site. Setting the basic formatting styles Regardless of the elements you will include on your canvas page, you want to be sure to begin by defining the basic formatting styles for the fonts, sizing, links, and so on. These are shown here: /* Base styles */ body { background: #fff; font-family: “Lucida Grande”, Tahoma, Verdana, Arial, sans-serif; font-size: 11px; margin: 0px; padding: 0px; text-align: left; } h1, h2, h3, h4, h5 { font-size: 13px; color: #333; margin: 0px; padding: 0px; } h1 { font-size: 14px; } h4, h5 { font-size: 11px; } p { font-family: “Lucida Grande”, Tahoma, Verdana, Arial, sans-serif; font-size: 11px; text-align: left; } a { color: #3b5998; text-decoration: none; } a:hover { text-decoration: underline; } img { border: 0px; } select { border: 1px solid #BDC7D8; font-family: “Lucida Grande”, Tahoma, Verdana, Arial, sans-serif; font-size: 11px; padding: 2px; } td, td.label { font-size: 11px; text-align: left; } Chapter 10: Seamless Styles: Styling Your Facebook Application 221 16_277959-ch10.qxp 5/5/08 11:28 AM Page 221 Next, for page content, I define a canvas_content class: .canvas_content { margin: 10px 20px 5px 10px; } The following HTML boilerplate markup is then added to the page to display the basic styles:

This is an h1 header.

This is an h2 header.

This is an h3 header.

This is an h4 header.

This is an h5 header.
This is an h6 header.
This is a normal paragraph.
  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5

Figures 10-1 shows the iframe page. Figure 10-1: Basic text styles with Facebook emulation. 222 Part III: Developing Facebook Applications Looking at the Facebook color palette Facebook uses four major colors in its color palette. As you design your UI, you want to be sure to use these to better emulate the look of Facebook. These include white and four shades of blue. Here are the colors’ hex values: hex values: #ffffff (white), #d8dfea (lightest blue), #afbdd4 (lighter blue), #6d84b4 (darker blue), and #3b5998 (darkest blue). 16_277959-ch10.qxp 5/5/08 11:28 AM Page 222 Emulating the Facebook dashboard On FBML pages, you can use the fb:dashboard element to define a dashboard region on the canvas page that contains the application title and icon as well as any fb:action, fb:help, or fb:create-button tags that you want to include. For this sample page, I am going to re-create a dashboard with three action links, one Help button, and a Create button. I begin by defining the dashboard as a div at the spot in which I want it to appear on the page:
Inside the dashboard div, I begin by enclosing the three action links in a container div called fb-actions. Inside, I add three a links along with span elements to define the pipe spacer. I also add a div named fb-help to house the help link: Don’t worry about the clearfix class style just yet. I explain that later. Also inside the dashboard div, I need to add the series of elements that appear just below the action links and help — the application icon, title, and a Create button. Here’s the code:

My iframe Application

Chapter 10: Seamless Styles: Styling Your Facebook Application 223 16_277959-ch10.qxp 5/5/08 11:28 AM Page 223 The h2 header displays the icon as a background image, which for this example I simply reference a built-in Facebook graphic. Following Facebook style convention, the fb-create-button-wrapper div is used to define the Create button. This wrapper contains a set of divs and a span, each of which is used to emulate the unique look of the button. The following styles transform that HTML markup into a dashboard that closely emulates the kind you would create on an FBML page: .fb-dashboard { padding: 10px 10px 0px; } .fb-dashboard .fb-links { padding: 0px 10px 5px; border-bottom: solid 1px #ccc; } .fb-dashboard .fb-links .fb-actions { float: left; } .fb-dashboard .fb-links .fb-help { float: right; } .fb-dashboard .fb-links .pipe { padding: 0px 7px; color: #aaa; } .fb-dashboard .fb-links form { display: inline; overflow: hidden; width: 0px; } .fb-dashboard .fb-titlebar { padding: 10px 10px 12px; } .fb-dashboard .fb-titlebar h2 { background-repeat: no-repeat; background-position: 1px 8px; float: left; font-size: 14px; padding: 7px 0px 7px 24px; } .fb-dashboard .fb-create-button-wrapper { float: right; margin: 7px 0px 0px 10px; background: url(http://www.facebook.com/images/new_media_button_active.gif) no-repeat bottom; /* fb-create-button */ .fb-create-button { display: block; float: left; color: #777; text-decoration: none; background: url(http://www.facebook.com/images/new_media_button.gif) norepeat; } 224 Part III: Developing Facebook Applications 16_277959-ch10.qxp 5/5/08 11:28 AM Page 224 .fb-create-button .tr { background: url(http://www.facebook.com//images/new_media_button.gif) norepeat top right; } .fb-create-button .bl { background: url(http://www.facebook.com//images/new_media_button.gif) norepeat bottom left; } .fb-create-button .br { background: url(http://www.facebook.com//images/new_media_button.gif) norepeat bottom right; } .fb-create-button span { background: url(http://www.facebook.com/images/new_media_button_plus.gif) norepeat 9px center; color: #333; font-size: 11px; font-weight: bold; display: block; padding: 3px 9px 5px 22px; text-shadow: white 0px 1px 1px; } .fb-create-button:hover { text-decoration: underline; } .fb-create-button:active, .fb-create-button:active .tr, .fb-create-button:active .bl, .fb-create-button:active .br { background-image: url(http://www.facebook.com/images/new_media_button_active.gif); } Note that I am referencing a Facebook image to match the look and feel of the Create button. In each of the cases in which graphics are used in the styles, I reference the Facebook URL of the actual resource. I also define the clearfix class, which is used by the fb-links and fb-titlebar div elements. The clearfix class is a utility class used by Facebook to achieve subtle formatting tweaks. Here’s the code: .clearfix:after { content: “.”; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } .clearfix { display: inline-block; } html[xmlns] .clearfix { display: block; } * html .clearfix { height: 1%; } Chapter 10: Seamless Styles: Styling Your Facebook Application 225 16_277959-ch10.qxp 5/5/08 11:28 AM Page 225 Figure 10-2 shows the homemade dashboard on an iframe page. Creating your own navigation tabs The familiar blue, gray, and white navigation tabs are one of the more ubiquitous visual elements of any Facebook application. You can re-create them in your iframe by using a combination of HTML and CSS. The fb:tabs container can be re-created using a div, and then left- and right-aligned tabs are placed inside separate div elements (usually added to the page just after the dashboard code):
The individual tabs are then re-created using bulleted list items. For example, the following code defines three left-aligned tabs and two right-aligned tabs:
Figure 10-2: The dashboard — Is it live or is it Memorex? 226 Part III: Developing Facebook Applications 16_277959-ch10.qxp 5/5/08 11:28 AM Page 226
Note that the first tab item is assigned to the selected class, which indicates that it will be the selected tab when the page is rendered. The following CSS code is used to emulate the Facebook look and feel: .fb-tabs { border-bottom: 1px solid #898989; padding: 3px 0; } .fb-tabs .left_tabs { float: left; padding-left: 10px; } .fb-tabs .right_tabs { float: right; padding-right: 10px; } .fb-tabitems { display: inline; list-style: none; margin: 0; padding: 0; text-align: center; } .fb-tabitems li { display:inline; padding: 2px 0px 3px; background: #f1f1f1 url(http://www.facebook.com/images/components/toggle_ tab_gloss.gif) top left repeat-x; } .fb-tabitems li a { border: 1px solid #898989; color: #333; font-weight: bold; padding: 2px 8px 3px 9px; } .fb-tabitems li a small { font-size: 11px; font-weight: normal; } .fb-tabitems li a:focus { outline: 0px; } .fb-tabitems li.first a { border:1px solid #898989; } .fb-tabitems li a.selected { background: #6d84b4; border: 1px solid #3b5998; border-left: 1px solid #5973a9; border-right: 1px solid #5973a9; Chapter 10: Seamless Styles: Styling Your Facebook Application 227 16_277959-ch10.qxp 5/5/08 11:28 AM Page 227 color: #fff; margin-left: -1px; } .fb-tabitems li.last a.selected { margin-left:-1px; border-left:1px solid #5973a9; border-right:1px solid #36538f; } .fb-tabitems li.first a.selected { margin: 0; border-left: 1px solid #36538f; border-right: 1px solid #5973a9; } .fb-tabitems li.first.last a.selected { border: 1px solid #36538f; } .fb-tabitems li a.selected:hover { text-decoration: none; } Figure 10-3 shows the newly created dashboard and navigation tabs. Creating a subtitle region Beneath the navigation tabs region, some Facebook apps provide a subtitle region, which usually contains a caption or perhaps links to other pages if you are displaying multipage listings (such as in the Photos app). No FBML tags exist to render this section in an FBML page, but here’s how you can define it in HTML:
This is a place for captions and subtitles.
Figure 10-3: Navigation tabs on an iframe page. 228 Part III: Developing Facebook Applications 16_277959-ch10.qxp 5/5/08 11:28 AM Page 228 The CSS for these two div elements is as follows: .subtitle { border-bottom: 1px solid #D8DFEA; clear: both; padding: 11px 20px 0px; color: black; font-weight: normal; line-height: normal; } .subtitle .caption { color: #333; float: left; padding-top: 3px; padding-bottom: 4px; } As Figure 10-4 shows, the iframe page now contains a full header section that looks like an FBML-generated page. Emulating Facebook buttons Facebook uses several different sizes or styles of buttons throughout its UI, but I show you how to emulate two of them: A standard input button and a “link button” are used, for example, on the Register for Facebook startup page. The input button is defined using the standard HTML element: Figure 10-4: Adding a subtitle header to a page. Chapter 10: Seamless Styles: Styling Your Facebook Application 229 16_277959-ch10.qxp 5/5/08 11:28 AM Page 229 The CSS class inputbutton defines the border and font settings for the button: .inputbutton { border-style: solid; border-top-width: 1px; border-left-width: 1px; border-bottom-width: 1px; border-right-width: 1px; border-top-color: #D9DFEA; border-left-color: #D9DFEA; border-bottom-color: #0e1f5b; border-right-color: #0e1f5b; background-color: #3b5998; color: #ffffff; font-size: 11px; font-family: “Lucida Grande”, Tahoma, Verdana, Arial, sans-serif; padding: 2px 15px 3px 15px; text-align: center; } The link button is slightly more involved, because it uses a set of divs and an a link to re-create the Facebook look: The CSS used to style the link button uses a set of selectors to format the div, link, and span elements: a.link_btn_style { color: #fff; font-size: 13px; outline: none; display:block; height:25px; } html[xmlns] a.link_btn_style { display:table; } a.link_btn_style div, a.link_btn_style span { cursor:pointer; float:left; 230 Part III: Developing Facebook Applications 16_277959-ch10.qxp 5/5/08 11:28 AM Page 230 line-height:15px; padding: 0px 0px 2px 0px; background-repeat: no-repeat; background-position: bottom left; } a.link_btn_style div div { padding:0px 2px 0px 0px; background-position: top right; } a.link_btn_style div div div { padding:0px; background-position: top left; } a.link_btn_style span.btn_text { display:block; margin:2px -2px -2px 2px; padding:2px 19px 5px 17px; background-position: bottom right; } * html a.link_btn_style span { position:relative; } a.reg_btn_style div { background-image: url(http://www.facebook.com/images/welcome/btn_register_signup_ active_bg.gif); } a.reg_btn_style span.btn_text { color:#fff; font-weight:normal; } a.reg_btn_style:link div, a.reg_btn_style:link span, a.reg_btn_style:visited div, a.reg_btn_style:visited span { background-image: url(http://www.facebook.com//images/welcome/btn_register_signup_ bg.gif); } a.reg_btn_style:active div, a.reg_btn_style:active span { background-image: url(http://www.facebook.com//images/welcome/btn_register_signup_ active_bg.gif); } Figure 10-5 shows these two buttons on the iframe page. Chapter 10: Seamless Styles: Styling Your Facebook Application 231 16_277959-ch10.qxp 5/5/08 11:28 AM Page 231 Creating two-column lists Facebook makes use of a two-column list structure inside some of its apps. Even if you are using an FBML page, no FBML tag equivalents exist, so to recreate this look on your canvas page, you need to go the custom route. The two-column list can be created using a table structure in HTML. Check out the code:

List 1

See All

List 2

See All
Aenean felis purus, ullamcorper sed, laoreet quis, porttitor et, mauris. Donec blandit dictum dui. Cras magna erat, sagittis vitae, ornare quis, dignissim eget, orci. Sed viverra nisl nec erat. Ut vulputate. Sed vitae elit sed nisi condimentum fringilla. Proin dapibus dui ac tellus.
Figure 10-5: Facebooklooking buttons. 232 Part III: Developing Facebook Applications 16_277959-ch10.qxp 5/5/08 11:28 AM Page 232
Nulla in tellus tempor mauris euismod bibendum. Vestibulum metus quam, tincidunt sed, gravida pretium, vulputate a, augue. Maecenas tempus metus a nulla. Nullam sollicitudin, lorem ut ultricies ultricies, est ipsum vulputate nunc, vel feugiat mi sem in erat.
See all List 1’s See all List 2’s

The following CSS styles define the look for each of the various list elements: .lists th { background: #6d84b4; text-align: left; padding: 5px 10px; } .lists .spacer { background: none; border: none; padding: 0px; margin: 0px; width: 10px; } .lists th h4 { float: left; color: white; } .lists th a { float: right; font-weight: normal; color: #d9dfea; } .lists th a:hover { color: white; } .lists td { margin:0px 10px; padding:0px; vertical-align:top; width:306px; } .lists .list { background: white none repeat scroll 0%; border-color: -moz-use-text-color #BBBBBB; border-style: none solid; border-width: medium 1px; } .lists .list .list_item { border-top:1px solid #E5E5E5; padding: 10px; } .lists .list .list_item.first { border-top: none; } .lists .see_all { background: white none repeat scroll 0%; border-color: -moz-use-text-color #BBBBBB rgb(187, 187, 187); border-style: none solid solid; Chapter 10: Seamless Styles: Styling Your Facebook Application 233 16_277959-ch10.qxp 5/5/08 11:28 AM Page 233 border-width: medium 1px 1px; text-align: left; } .lists .see_all div { border-top:1px solid #E5E5E5; padding:5px 10px; } The full listing of the CSS/HTML source code is available on this book’s companion Web site. Figure 10-6 displays the two-column list. 


No comments