Cross-Promote Apps from Your About Page!
February 25, 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 & gameplay videos, rate the latest games, and read & 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.
Comments
Got something to say?
