« Previous post Next post » April 26, 2008 Widgets: The Marketer’s Recession Survival Tool Mark Hendrickson 53 comments »

This guest post about the widget economy was written by Michael Jones, an angel investor, the CEO of Userplane and a Senior Vice President of AOL.

Userplane, which was acquired by AOL in August 2006, is a communications widget provider (add chat and other services to sites) and a large advertising network.

Mike Jones’ personal blog is here.

Companies facing a slowing economy are looking for more cost-effective ways to reach customers. Forrester’s recent post on the role of social media during economic recessions supports the idea that social media can help companies survive and thrive in tough economic times. And Josh Bernoff’s full report on the subject calls for an end to “toe-dipping” by interactive marketers and advises a more serious look at cost-effective and measurable social marketing programs. A key take away:

…since interactive marketing programs are now fueled by measurable results, not dot-com madness, we believe that they can thrive in a recession. Social applications in particular, such as communities and social networking sites, are cost-effective and have a measurable impact on prospects’ decisions in the consideration stage, which will be important to companies under recessionary pressures. Interactive marketers should stop toe-dipping and invest only in programs that can deliver on measurable metrics.

Additionally, Forrester analyst Jeremiah Owyang points out that social marketing costs far less than traditional marketing. So when purse strings are tightened, marketing execs will become more excited about social media’s potential of reaching exponentially more people with fewer dollars.

While the recession-proofness of social media is a case study in the making, the idea that social applications can thrive in tight economic times because they are a cost-effective, precise way for companies to interact with customers and prospective customers, is right on the money – quite literally.

Widgets: The Macro Promise of Micro-markets

The top widget providers are proving that widgets can be big business. Slide and Userplane, of which I’m CEO, are two successful providers of distributed applications. Slide’s recent $500M valuation gives credence to the huge potential of these small attention grabbers. The success of today’s widgets is largely a function of the hundreds of millions of ad views they garner each day.

In April 2007, comScore estimated that widgets reach 177M people every month, or 21% of the worldwide online audience. Currently, only a fraction of widget traffic – perhaps as little as 0.5% – is being monetized. And that 0.5% is being monetized most frequently through traditional CPM models. In order for widgets to pay off in the long term, however, new models are required that will drive revenue beyond the top few widget providers and generate significant returns for all customers investing ad dollars.

Brands are changing the way they view online advertising and are becoming more concerned about reaching audiences based on their interests and actions, through so-called behavioral targeting. Traditional brand affinity concerns are taking a back seat to a willingness to meet users on their own terms. And, it doesn’t stop there. Marketing will align with individual social graphs as well.

The idea of a brand’s squeaky-clean “image” appearing next to a porn star would have been cause for reprimand in the old school of media buying. Yet in online advertising, it seems to slide. The new model of advertising, which is focused on customer behavior, makes it not only okay but necessary to meet customers within their preferred areas of interest, or “micro-markets”.

Widget providers are gathering the kind of intelligence that allows for this sophisticated behavioral targeting. They can assure brands before investing ad dollars that particular users are interested in their product or service. If behavioral intelligence demonstrates that a particular consumer is effectively engaged by the brand in proximity to MySpace vampires with blood-coated fangs, the new breed of media buyers will be more willing to put their old placement fears aside.

The Changing Nature of the Media Buy

The convergence of behavioral intelligence, distributed advertising models, and micro-markets is helping to create a sweet spot for widgets. eMarketer predicts an increase in the behavioral targeting market to $3.8B by 2011 from $350M in 2006. This is the kind of market that is driving activity in companies like AOL with its acquisition of Tacoda, as well as companies like Revenue Science and Lotame.

The very definition of CPM is also changing as new models for media buying emerge. New ways to purchase and monetize connections between brand and consumers will emerge, including opportunities to move the point of purchase to these distributed applications. Not only will widgets incorporate ads based on individual behavior and areas of interest, but widgets will likely become e-commerce services as well. There is no reason why a social marketing program for a specific product can’t incorporate distributed shopping carts across sites where likely buyers congregate. The revenue opportunity for a widget-based checkout function distributed across social mega sites is already there.

New Media, New Optimism

Even with the less than positive economic news of the day, there is room for continued optimism about social media. What better way to navigate wavy financial waters than with low-cost, high-reach, targeted platforms that bring companies and consumers closer? Widgets are the conduits to our markets, and ultimately, people that matter to our business. Leveraging them humanizes not only the brand but interactions with the customer as well.

Product Directory

Many users may find your application by browsing the Facebook Application Directory. This is where beautiful imagery and concise, descriptive text pay off.

Message Attachments

Applications can create attachments that appear in a dropdown menu on the message composer. When the user selects that action, content is fetched and placed inside an attachment box below the message text in the composer.

About

The about page tells users about the application and is accessed from the Facebook Application Directory. It should inspire users to install the application.

Left Nav

Applications can have their icon and name added to the left hand Facebook navigation. This will link to that application’s homepage.

Privacy Settings

Users will be able to set who can see your application’s profile box from Facebook’s privacy page. Any other privacy settings you wish to incorporate should be built into your application’s privacy/settings page.

Anatomy of a Facebook Application

A Facebook application can take on many forms. However, to fully utilize the suite of integration points and deliver a full user experience, we recommend using the following application structure:

• Product Directory
• About
• Left Nav
• Facebook Canvas Pages o Home o User Dashboard
• Profile o Profile Box o Profile Action Links
• Privacy Settings
• News Feed
• Alerts
• Message Attachments
• Requests

Below you will see all these various components as they are applied to our own Photos Application. It should be noted that none of these pages are mandatory but the more you include in your application the richer the experience becomes (for example, no one is going to install your app called “Lefty” that is only a left nav link)

Facebook Canvas Pages

Facebook Canvas pages are presented within the Facebook frame and can either be FBML or an external html site presented within an iframe.

Home

An application’s homepage is accessed from the Facebook Left Nav. Ideally this homepage would aggregate friend data to create a page worth coming back to quite often. For example, the photo homepage shows your friends’ recently created albums.

User Dashboard

The user dashboard is usually accessed from the top right drop-down menu in the user’s profile. This is where users manage their own content within an application or see information about another user’s content within that application.

Profile Box

The profile box is usually the place to show the most recently updated information or the most recent actions of the user. This information should reflect how the user would want to represent their identity through your application on their profile.

Profile Action Links

Under a user’s photo in their profile you can display a quick link to more info about that user’s presence within your application. You can install these links even for users who haven’t installed your application; have added your application (or, in the case of the profile of a user who has added your application, it will show up for all viewers).

News Feed

Applications can access News Feed and post stories to it. Each user has a maximum number of News Feed stories that they can see from all applications. Once that maximum is reached they will no longer see any more application stories during that sweep. For example, the Photos application publishes News Feed stories about photos your friends have uploaded recently.

Alerts

Applications can send notifications to a user through email. The user of the application who triggers this action must approve of the email, and users can opt out of receiving the email for any application that has ever sent them emails.

The Facebook profile is the online representation of the user’s real world identity. We have included many integration points on the profile. This enables you to empower the user to express themselves through your application.

the time log can become a facebook widget FAST because of the iframe method (scroll right).

Integrating Hello World

1. Go to http://developers.facebook.com/

2. Click on 'Get Started'

3. Click on 'Add Facebook Developer Application'

4. A link to 'Developer' should appear in the left nav on Facebook now. Go to the Developer App.

5. Click on the button that says 'Setup New Application'

6. Here are the steps for filling out the form:

1. Application Name: for our app, we put 'Tutorial Application' - you should put in a different name.

2. Check the Terms of service box.

3. Click on the Optional Fields link - this will bring up more options.

4. Support E-mail: your Facebook contact email may be filled in automatically, but you might not want to give out your personal email to everyone who adds your app! You do have to put a valid email address that you can check, however.

5. Callback Url: for our app, we put 'http://tperry256.dreamhost.com/f8/tutorialapp/' - you should put something DIFFERENT - in particular, you should put the url of the directory on your server where you will create your application.

6. Canvas Page URL: http://apps.facebook.com/: for our app, we put 'tutorialapp' - you must put in a different name.

7. Use FBML: keep this setting.

8. Application Type: leave this set to 'Website'.

9. Can your application be added to Facebook: set to 'yes' - this will bring up more options.

10. TOS URL: you can leave this blank.

11. Post-Add Url: for our app, we put 'http://apps.facebook.com/tutorialapp/' -- you should put something DIFFERENT - in particular, you should put your full canvas page url.

12. Default FBML: type in the text 'hello'.

13. Leave everything else under Installation Options blank.

14. Side Nav Url: for our app, we put 'http://apps.facebook.com/tutorialapp/' -- you should put something DIFFERENT - in particular, you should put your canvas page url here as well.

15. Leave everything else under Integration Points blank.

7. Click on the 'Submit' button.

8. Go the the 'My Applications' page and check that your application was created. There are a couple ways to get here depending on where you are in the Developer application.

9. Copy the latest version of the php5 client library into your application's directory on the server.

10. There are some links to the client library in the downloads section. If you are using a unix shell and are currently in that directory, these commands will work:

wget http://developers.facebook.com/clientlibs/facebook-platform.tar.gz
tar zxvf facebook-platform.tar.gz
cp facebook-platform/client/facebook.php .
cp facebook-platform/client/facebookapi_php5_restlib.php .
rm -rf facebook-platform.tar.gz facebook-platform

11. Create an 'appinclude.php' file that you will include at the top of all the php pages in your app. Paste this code into the file:

<?php
require_once 'facebook.php';

$appapikey = '[your api_key]';
$appsecret = '[your secret]';
$facebook = new Facebook($appapikey, $appsecret);
$user = $facebook->require_login();

//[todo: change the following url to your callback url]
$appcallbackurl = 'http://tperry256.dreamhost.com/f8/tutorialapp/';

//catch the exception that gets thrown if the cookie has an invalid session_key in it
try {
  if (!$facebook->api_client->users_isAppAdded()) {
    $facebook->redirect($facebook->get_add_url());
  }
} catch (Exception $ex) {
  //this will clear cookies for your application and redirect them to a login prompt
  $facebook->set_user(null, null);
  $facebook->redirect($appcallbackurl);
}

12. Replace '[your app_key]' and '[your secret]' with the 'app_key' and 'secret' for your application that are shown on the 'My Applications' page of the Developer app. You should also replace our callback url with your callback url.

13. Create a 'index.php' file which will be your application's home page. Paste this code into the file:

<?php
require_once 'appinclude.php';

echo "
hello $user
";

14. Type YOUR APP's callback url into your browser's address bar. You could also type in your canvas page url because going here will also cause your 'index.php' to run. Either way, the only way to get your application added at this time is to type a url into your browser's address bar.

here is OUR APP's callback url:

http://tperry256.dreamhost.com/f8/tutorialapp/

here is OUR APP's canvas page

url:http://apps.facebook.com/tutorialapp/

15. Click 'I agree' to accept the terms of service for your application and then click the button to 'Add [your application name]' to add it.

16. You should then be redirected to a canvas page which contains the output of your 'index.php' file.

17. Go to your profile and look for a profile box for your application which contains the 'hello' -- this is the default FBML that you set before.

18. Finally look for a left-nav link that will take you back to your canvas page.

Requests

Applications can create requests that show up at the top right of a user’s homepage. These requests are usually initiated by a user’s friend and often require the user to take some form of action. An example of this in the Photos application is a photo tag request confirmation.

Step-by-step Guide to Creating an Application Contents

1. Introduction

2. Integrating Hello World

3. Pushing FBML to the profile box

4. Using mock-AJAX in the profile box

5. Using MySQL to create a counter

6. Putting the examples together

7. Downloads

Introduction

This tutorial describes how we created a platform application called ‘tutorialapp’ that you can use as a template when creating your own platform app. The tutorial assumes that you have access to a web server running php5.

The final version of ‘tutorialapp’ is hosted at http://tperry256.dreamhost.com/f8/tutorialapp/. If you follow this link it will ask you to login to Facebook and add the ‘tutorialapp’ application. You can get access to a server like this from a variety of hosting companies for just a few dollars a month.

When you create your own app, you will using a different application name and a different server. We have highlighted these things that will be different for your application.

Using mock-AJAX in the profile box

1. This code pushes a form into the profile box that uses the mock-AJAX feature of FBML to give the illusion that you can dynamically update the content of the profile box.

2. Notice how the if statement at the very top of this 'index.php' file handles the mock-AJAX call.

Using MySQL to create a counter

1. This example assumes that you have a way to create a mysql database which the php scripts on your server can connect to.

2. If you don't already have a database, create one.

3. Create a table in the database called 'counter' which has a single integer column called 'count'.

4. Create a new file called 'dbappinclude.php' and paste the following code into the file. Don't forget to replace the items in brackets with your actual db host, user, pass, and name.

Pushing FBML to the profile box

1. Here is an extended version of 'index.php'. When the user submits the form, this code puts the text they submitted in the profile box.

2. Note that submitting the empty string causes the profile box to disappear!

<?php
require_once 'appinclude.php';

echo "<p>hello $user</p>";

if (isset($_REQUEST['profiletext'])) {
  $facebook->api_client->profile_setFBML($_REQUEST['profiletext'], $user);
  $facebook->redirect($facebook->get_facebook_url() . '/profile.php');
}

echo '<form action="" method="get">';
echo '<input name="profiletext" type="text" size="30" value=""><br>';
echo '<input name="submit" type="submit" value="Display text on profile">';
echo '</form>';

<?php
if (isset($_REQUEST['mockfbmltext'])) {
  echo $_REQUEST['mockfbmltext'];
  exit;
}

require_once 'dbappinclude.php';

echo "<p>hello $user</p>";

$rs = query("select count from counter");
if ($row = mysql_fetch_assoc($rs)) {
  $count = $row['count'];
  query("update counter set count=count+1");
} else {
  query("insert into counter values (1)");
  $count = 1;
}

echo "<p>the count is $count</p>";

if (isset($_REQUEST['profiletext'])) {
  $facebook->api_client->profile_setFBML($_REQUEST['profiletext'], $user);
  $facebook->redirect($facebook->get_facebook_url() . '/profile.php');
}

echo '<form action="" method="get">';
echo '<input name="profiletext" type="text" size="30" value=""><br>';
echo '<input name="submit" type="submit" value="Display text on profile">';
echo '</form>';

$fbml = <<<EndHereDoc

<form>
<input name="mockfbmltext" type="text" size="30">
<br />
<input type="submit" 
  clickrewriteurl="$appcallbackurl" 
  clickrewriteid="preview" value="Draw text below" 
/>
<br />
<div id="preview" style="border-style: solid; border-color: black;
  border-width: 1px; padding: 5px;">
</div>
</form>
EndHereDoc;

$facebook->api_client->profile_setFBML($fbml, $user);

echo "<p>the following form was added to the profile box:</p>";

echo $fbml;

far out – it is kind of fun.

i hope john gets privacy in there. it’ll be so much fun to announce that. c’mon brother.

anyway i know we are going to be stoked on facebook widgets and facebook connect.

what fun !

there’ll be notes hiding in corners all over METANOTES !

• they made the photos app. you can make something like that see ?