Connect/Building profile boxes
From Facebook Developer Wiki
Learn how to send profile boxes to Facebook.com user profiles from your Facebook Connect-enabled website.
Contents |
Benefits
What a person sees and learns about you the first time they meet you can make or break a relationship. A first impression is what sets in motion a person’s feelings about what type of person you are, or at least who they think you are. Therefore, it’s important that users ensure they express themselves correctly when they set up their Facebook profiles.
Over 300 million users visit Facebook every month, and over half of those users visit every day. The user profile is one of the most trafficked locations on Facebook. A user’s profile is the first thing most people see when searching for new friends on Facebook. Since users take a lot of action on your website, a profile box is a great way to better help users share their activity and represent themselves on their profile. And this allows them to promote all of the cool things they do on your site. A profile box is one of the best ways to give your website a presence on your users’ Facebook profiles.  Here are some great ways, using real-life communities, users could identify themselves:
- They could identify their favorite songs through iLike.com, giving possible recommendations to their friends, and expressing more about their music choice.
- They could share their most recent reviews using Yelp.com to reveal their taste in food, and where you can expect to find them on a Friday night.
- Digg.com users could identify their latest Diggs from the website.
- Like Coffee? Starbucks customers could identify their favorite coffees through a simple profile box on their profile.
As a website owner or developer, you’ll want to find ways to better identify your users as they use Facebook. The first step you’ll want to take is create a profile box for your website that users can install on their Facebook profile. Now, let’s go over more about what a profile box looks like, and how you can create one for your own website.
How It Works
What Is a Profile Box?
A Profile box is a small, application-generated box which users can choose to display on their main profile Wall tab, or separately on a “Boxes” tab designated specifically for profile boxes. As mentioned earlier, they are intended as an additional way for users to identify themselves around your brand on Facebook.
The Profile
Your profile is where your friends and other Facebook users can go to learn more about you. It is where all of your activity on Facebook resides. It is where your interests, your work history, education, and more are shared (via the "Info" tab). On your profile are multiple tabs, the default being the “Wall” tab, where you can share more information about yourself in an organized way. To get to your profile, just click “Profile” or your name in the upper navigation menu at the top of Facebook after you log in. 
User Wall Tab
The Wall tab is the default tab your friends see when visiting your profile on Facebook. This is the ideal location for your website to have a presence, because it’s what users are most likely to see when visiting that individual’s profile. Your website’s profile box, when installed on the Wall tab, appears in the left column on that tab. Each profile box on the Wall tab is 200 pixels wide and up to 250 pixels tall. Users can re-arrange the boxes to any position below the Friends box.
The Boxes Tab
The Boxes tab is where all of the other applications’ profile boxes go when a user chooses to add them to his or her profile. This is where the user can share all of the applications or websites they use, in one place. It consists of two columns - a narrow, 200 pixel wide column for smaller boxes, and a wide, 388 pixel wide column for wider boxes. The user can, if your website supports it, move boxes from one column to the other. (see the fb:narrow and fb:wide FBML tags to learn how to specify different versions for your website).
Because this is not the default page people look at when visiting a user’s profile, you will want to come up with an interesting app that easily identifies an individual, so they want to install it on their Wall tab. Users often install applications that truly identify themselves better on their Wall tab. Everything else is shared on the Boxes tab.

Adding the Profile Box
The process of adding a Profile Box from your website to a user’s profile is simple:
- Your website sends a snippet of FBML to Facebook, storing what will appear in a user’s profile box for your website when they add it to their profile.
- Your website displays an “Add to Profile” button (via the fb:add-section-button FBML tag).
# The user clicks the button, and a dialog appears, asking if the user wants to display the box on the Wall or Info tab (default), or on the Boxes tab.
- The user is then given the option to confirm where the profile box is displayed.

For example, a user decides to display the list of their most recent SocialToo SocialSurveys on their profile for others to see. The user visits SocialToo.com to log in (via Facebook Connect - see the Getting Started Guide to learn how to set this up) and an “Add to Profile” button appears (the FBML for which has already been posted to Facebook via the profile.setFBML API call). The user clicks the button, and a dialog appears, asking the user where they want to share their recent SocialSurveys. The user confirms the action, and the box now displays on their profile in the location they chose.

How Users Can Edit Where their Profile Box Is Displayed
You may find it useful to educate your users to move their profile boxes to their Wall tab, if they have accidentally or purposefully added them to their Boxes tab. To edit the settings for a user’s profile box, they have to:
- Click the little pencil icon in the upper-right corner of the Box.
- A drop-down menu appears, giving the option to either remove the box, or move it to either the Wall tab or the Boxes tab (depending on which tab the box is already on.)
- If the user wants to move the profile box, have the user select the move option.
- If the user wants to remove the box entirely, have the user click the remove option.

Different Ways Your Profile Box Will Render
When designing your profile box, you should consider the different ways it can appear on a user’s profile. Presenting your website’s brand in a manner that appropriately fits the type of user visiting a profile can draw attention to your profile box and in return, bring more attention to your brand. It’s important to remember that profile boxes are generated from Facebook’s servers, so you will need to control most of this via FBML tags.
1) Friends and who have already authorized your site view a user’s profile
If users have already authorized your website, you know they are already familiar with your brand. Why not present your profile box differently for those users so they feel more comfortable with their environment? This is your opportunity to tell their friends about that user using your brand. Use the fb:visible-to-app-users and fb:visible-to-friends FBML tags to display this type of content.
2) Friends who have not authorized your site view a user’s profile
These are people that are possibly not yet aware of your website. While Facebook does not provide tags to show content only to these users (this is so the user is always aware of what is displayed on their profile), you should still account for these users by adding a link somewhere in the profile box that takes the user back to your website to register or learn more.
3) A user visits his or her own profile
If a user is visiting his or her own profile, you may want to display different content for the user than what the user’s friends see. This is your opportunity to give that user a portal into his or her settings for your website, or share personal information you only want the user to see. Keep in mind that this information is visible in the source HTML for the website, regardless of whether the viewer is the owner, so don’t display anything too private!
