Archive for February, 2008

How would you like to cross-list the applications you own within the about pages of one another? Or have you ever considered selling realty on your about page for other complementing apps to purchase? This simple feat can be done with Facebook’s own Static FBML application!

First, within your application’s about page, click the “Edit Application” link located near the top-right. From the edit application page, scroll all the way down to the bottom, where you should see a link for “More Applications”. Click the “Browse More” link, as seen in the screenshot below.

This link will lead to recent applications available to Facebook Pages. Instead of sorting by most recent, click the “By Facebook” link located to the right. Scroll down once this page loads, and you should eventually see a link for “Static FBML”.

Add this application to your desired application, then navigate back to your applications’s about page. Find the box labeled “FBML”, and click the “Add FBML” link within it. You’ll then be presented with a simple 2-input form.

The first input allows you to enter a title for the box appearing on the profile. You might choose something that will attempt to grab the user’s attention, such as “More Fun Apps!”

The second input is a multi-line text box, which is used to enter the contents of the body FBML that should be rendered within the box on the about page. For this, you’ll want to create a list of applications you which to promote. You’ll likely want to include an image of the application to provide visual stimulus to the user in hopes of converting them into users of these other apps. This can be done using an infinite number of approaches, but a general outline has been provided below to give you a head start. This FBML outline simply defines a product region that includes left-aligned application icon, a linked application title, and a short description below the title.

<style>
div.app { border-bottom:1px solid #d8dfea; margin:3px 0px; padding-bottom:3px; }
div.app img { padding:3px; float:left; }
div.app div.detail { padding-left:25px; }
div.app div.detail a { font-weight:bold; }
</style>

<div class="app">
	<a href="http://apps.facebook.com/ad-libs/">
		<img src="http://photos-a.ak.facebook.com/photos-ak-sctm/v43/52/7714537540/app_2_7714537540_9111.gif"/>
	</a>
	<div class="detail">
		<div><a href="http://apps.facebook.com/ad-libs/">Ad-Libs!</a></div>
		<div>Create hilarious stories to share with your friends!</div>
	</div>
</div>
<div class="app">
	<a href="http://apps.facebook.com/favorite-games/">
		<img src="http://photos-c.ak.facebook.com/photos-ak-sctm/v43/22/5739766474/app_2_5739766474_1763.gif"/>
	</a>
	<div class="detail">
		<div><a href="http://apps.facebook.com/favorite-games/">Favorite Games</a></div>
		<div>Watch trailers &amp; gameplay videos, rate the latest games, and read &amp; write reviews!</div>
	</div>
</div>

The resulting output can be seen below, with an example of how it appears in the wide column to the left, and an example of the narrow column to the right.

While the above example does make use of application images stored on Facebook’s servers, Facebook has recommended in the past that, because they may change their server configurations at any time thus resulting in changing URL’s for images, applications should not directly reference these image URL’s. As such, it is recommended that you store whatever images you intend to use within your Static FBML at a remote location that you know will continue to be accessible by Facebook.

One additional consideration is to add a reference to the querystring of your target URL’s in order to track conversion success. In the above example, one of the URL’s used is http://apps.facebook.com/ad-libs/. If instead, the URL were http://apps.facebook.com/ad-libs/?ref=static-fbml, the click could be tracked through a traffic analysis tool such as Google Analytics.

Share This

Invite forms are one of many opportunities available in the Facebook Platform that enable application growth. They allow users to share applications with their friends who might not have otherwise known about them. Because invitations are enacted by users (as opposed to the application or Facebook itself), friends receiving these invites are likely to view each invite request, providing them an opportunity to be converted into an application user as well.

A Bit of Invite History

Inviting friends has been a controversial spot amongst Facebook application developers. The act of inviting friends is not specifically what all the controversy is about; instead, it’s how some developers have chosen to integrate their invite forms. In an attempt to create a multitude of application invitations in hopes of drawing many new users, numerous developers have made it mandatory for new users to invite a minimum number of friends to an application before the user can even interact with the application themselves. Clicking the “Skip” button on the invite form simply returned the user to the invite form once again until they either invited the minimum number of friends, or left the application altogether.

Because Facebook applications are relatively new, this technique has proven successful. Many did not realize (and some still do not realize) that this is not the way Facebook’s invite form was intended to be used, and as a result, many applications found a large number of users by implementing this design. However, over time, it resulted in a backlash from much of the Facebook community, as such a design can generally be considered to result in a poor user experience. After many complaints in various forms — including a Facebook group entitled “No, I will NOT invite 20 friends just to add your application!” that garnered much attention — Facebook has modified its platform policy such that forced invites are strictly forbidden from use.

Parts of an Invite Form

Creating an invite form consists of several key pieces. First, you must create an fb:request-form, which is processed in order to create an HTML form that is used to invite friends. Second, an fb:multi-friend-selector is needed. This is used to render the interface that enables the end user to select his or her friends that they’d like to receive an application invitation. Finally, at least one fb:req-choice is required. This creates an action button that is used by the recipient to determine what should occur (e.g. adding the application).

Basic Invite Form Implementation

The following is a very basic invite form. Please note that $facebook represents the initialized Facebook API client object, and $user represents the user ID of the currently logged in user.

<?php
// Prepare the invitation text that all invited users will receive.
$content = <<<FBML
<fb:name uid="$user" firstnameonly="true" shownetwork="false"/> wants to know what your Favorite Games are!
<fb:req-choice url="{$facebook->get_add_url()}" label="Add Favorite Games to your profile!"/>
FBML;
?>
<fb:request-form action="http://apps.facebook.com/myapp/" method="POST" invite="true" type="Favorite Games" content="<?php echo htmlentities($content);?>">
	<fb:multi-friend-selector max="20" actiontext="Here are your friends who haven't added Favorite Games to their profile. Invite them to share their Favorite Games today!" showborder="true" rows="5"></fb:request-form>

The above code creates the following output.

And, once your user clicks the “Send Invitation” button, they’ll be presented with a window similar to the following, which demonstrates how the invite request will appear when their friends receive it. Take note of the data (specifically the messages defined within the code) being populated within the form and invitation itself.

But He Already Uses This App!

If your users are going out of their way to invite their friends to use your application, it would be mutually beneficial for them to only invite friends who aren’t already using the application. Since Facebook limits the number of daily invites a user can send to friends, it would be a waste for them to invite existing users.

In order to prevent this scenario, you can take advantage of the fb:multi-friend-selector’s exclude_ids attribute. This attribute accepts a comma-delimited list of user ID’s. Any ID’s that are provided will not be available for selection to the user within the invite form.

To take advantage of this field, you’ll need to capture the list of friends who have already added the application to their profiles. This can be done with a simple FBML call, as per the following example.

<?php
// Retrieve array of friends who've already added the app.
$fql = 'SELECT uid FROM user WHERE uid IN (SELECT uid2 FROM friend WHERE uid1='.$user.') AND has_added_app=1';
$_friends = $facebook->api_client->fql_query($fql);

// Extract the user ID's returned in the FQL request into a new array.
$friends = array();
if (is_array($_friends) && count($_friends)) {
	foreach ($_friends as $friend) {
		$friends[] = $friend['uid'];
	}
}

// Convert the array of friends into a comma-delimeted string.
$friends = implode(',', $friends);
?>
...
<fb:multi-friend-selector exclude_ids="<?php echo $friends;?>"></fb:multi-friend-selector>
...

Once we combine this new code with the previous example, we’ll have a complete invite form that allows users to invite their friends without having to worry if their inviting current application users.

<?php
// Retrieve array of friends who've already added the app.
$fql = 'SELECT uid FROM user WHERE uid IN (SELECT uid2 FROM friend WHERE uid1='.$user.') AND has_added_app = 1';
$_friends = $facebook->api_client->fql_query($fql);

// Extract the user ID's returned in the FQL request into a new array.
$friends = array();
if (is_array($_friends) && count($_friends)) {
	foreach ($_friends as $friend) {
		$friends[] = $friend['uid'];
	}
}

// Convert the array of friends into a comma-delimeted string.
$friends = implode(',', $friends);

// Prepare the invitation text that all invited users will receive.
$content = <<<FBML
<fb:name uid="{$user}" firstnameonly="true" shownetwork="false"/> wants to know what your Favorite Games are!
<fb:req-choice url="{$facebook->get_add_url()}" label="Add Favorite Games to your profile!"/>
FBML;
?>
<fb:request-form action="http://apps.facebook.com/myapp/" method="POST" invite="true" type="Favorite Games" content="<?php echo htmlentities($content);?>">
	<fb:multi-friend-selector max="20" actiontext="Here are your friends who haven't added Favorite Games to their profile. Invite them to share their Favorite Games today!" showborder="true" rows="5" exclude_ids="<?php echo $friends;?>"></fb:request-form>

Voila! Your users can now invite their friends to try out your application!

Share This

The much anticipated MySpace Developer Platform has officially opened up, allowing third party developers to create custom applications for the most popular social network much like Facebook’s Platform has permitted since last May.

While many social networks have been launching development platforms in recent months, this launch will be considered especially important to many developers. On top of MySpace being the most popular social network, the site has also launched to all developers at the same time. Other social networks — such as Facebook and Bebo — first provided access to their platforms to the likes of Slide, RockYou, and similar development companies, giving them what many consider to have been an unfair advantage in the playing field.

Although developers can begin creating and testing applications, MySpace’s user base does not yet have access to applications. Once the platform publicly launches next month, all published applications will become accessible to MySpace users.

According to the official MySpace Developer Platform documentation, here’s how the company defines an application and summarizes how it all works.

A MySpace Application is any software the utilizes the MySpace Developer Platform (MDP) to access user data, perform actions, and to integrate this data and associated actions into MySpace pages. MDP supports the development of applications based on the OpenSocial model of acces to data and functionality on participating networks.

The documentation explains that there are six parts to a MySpace application.

• Application Profile: the page where members come to learn about and install your application.
  (Facebook Equivalent: About Page)
• Application Canvas: a new page on MySpace that is dedicated to applications.
  (Facebook Equivalent: Canvas Page)
• Apps Module: provides links to the Application Profiles of the apps members have installed.
  (Facebook Equivalient: Left Navigation Bar)
• Applications Manager: allows users to view installed apps, change application settings, and uninstall applications.
  (Facebook Equivalient: Application Privacy Page)
• Profile Modules: display information, content and functionality generated by your application directly on a member’s profile.
  (Facebook Equivalent: Profile Box)
• Homepage Modules: display information, content, and fuctionality generated by your application directly on the left-hand column (300px) of a members’s homepage.
  (Facebook Equivalent: Profile Box*)

Application monetization sounds very promising according to Mashable.

In terms of monetization, the revenue share hinted at last week won’t be available initially. Instead, developers will be able to control 100% of ads on their “canvas page,” where most of the main functions of applications will live. In the future, developers will be able to utilize the same tools currently being beta tested by MySpace, which allow advertisers to place “hyper targeted ads” based on user’s profile characteristics.

MySpace has had many significant improvements to its site recently. It will be interesting to see how applications affect the popular social network in addition to observing how its users react.

* The MySpace Profile Module is only viewable to the profile owner. While Facebook does not have specific regions that are exclusively accessible to profile owners, third party developers can utilize the fb:visible-to-owner FBML tag within a Profile Box to display content only to the profile owner.

Share This