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
There is always a fine balance between K.I.S.S. and giving users the flexibility they really need. I’ve been working on configuring a number of Windows Server machines over the last few days getting ready for a major shift in architectural design and philosophy that will happen tonight beginning at 6pm. On numerous occasions when dialing in the configuration I’ve found myself overwhelmed by the un-necessary complexity of the windows wizard interfaces and underwhelmed by the advanced setting panes of many services.
Right now I think I’d rather have a 
Mashable has a nice collection of 
Saw this posted on 
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.
Recently I needed a color picker for a 
Perspective screenshots seem to be all the rave in the Web 2.0 world these days. What follows is a quick primer on how to create this effect in Photoshop CS3. In order to create the effect, you need a screenshot of your website, document or other item you wish to distort. For this demo, I’m using the New York Times website.
