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

Mashable has a nice collection of 16 tools for designers and developers for plugging into Firefox. I’m personally a fan of Web Developer Toolbar and Y!Slow which are both great. The original Mashable article included the other two tools I find indispensable, ColorZilla and Firebug.

Doing some reading this morning lead me to this site which has a collection of 10 bits of code that you can tweet. Reading this reminded me of the 5Kb website challenge. The premise was to create a functional website in 5Kb of code. That included all images, javascript, css, html… EVERYTHING! I recall there were a number of very complex graphic manipulation tools and even a shopping cart. Today I’m building out a new design for a client and my CSS include alone is already 3,197 bytes. This got me to thinking, we need a new 5Kb website challenge.

So here it is! What can you make in 5Kb?

Rules:

• All HTML, CSS, JavaScript, Images and any initial httpRequest() content loaded at startup must be less than 5Kb
• Content loaded via AJAX (if used) must be less than 5Kb per load request. In other words, it it loads a json object that references an image, the image + json must be less than 5Kb in size.
• The site must “do” something.

Prizes

I’ll give the three (3) best entries a 512Mb Memorex Mini USB Thumb Drive. Entries must be submitted by June 16, 2008 to be eligible for a prize. Submit your site and description in the comments below.

Judging and all that good stuff is subject to participation. If we have enough entries, I’ll open it to the community - otherwise, I’ll be the judge. I’m off to get started on my (non-eligible) project.

Saw this posted on Digg and found the idea facinating for 2 reasons. First, that cartoon characters can obviously be rendered by colors and letters. The second is the number of technology hours spent creating content based on the Simpsons!

Fox did a great job with the Avatar creator which they launched with the movie last summer and since then I’ve seen Simpson’s avatars everywhere online. A version of me is right.

See the original animated CSS version (mine is just a screenshot) so you can see the composition take shape or the original author, Roman Cortes’ work.