Introduction

"'Facebook is a social utility that connects you with the people around you.'"

This article hopes to unravel some of the aspects of creating a Facebook application; promoting it and developing a good viral uptake. It also hopes to sway you in using Triangle Solutions Ltd to build your application for you!

Additionally it will help clients in understanding the terminology used with certain aspects of a Facebook application, for example the "About Page" is a Facebook driven page that promotes the application and accessible to users when they click on the application from the directory.

Facebook Applications, What Are They?

I think many people confuse the complexities of a Facebook application with the very popular MySpace widget. Although similarities can be drawn in terms of what the general public see on a user's profile, the mechanics behind both are very different. Facebook offers a rich platform of tools and API's to empower the developer to create content rich applications (though there is some debate as to whether these tools have been used to there full potential as yet).

Basically anything is possible inside the pages of your application; restrictions are only applied as to what can be output to your application profile box. The beauty of Facebook is that these inside pages can be commercially driven.

Facebook Application Anatomy

About Page

Navigation

Canvas Page

Profile Box

A Facebook application can be broken down into several distinct parts.

• About Page - The application owner has control over the description and optional use of an image to describe the application to potential users. The rest of this page is Facebook driven; including a discussion board and application wall. Please click on the Facebook About page thumbnail to the right.

• Left Navigation - Applications can have their icon and Application name added to the left hand Facebook navigation. This can link to any internal application page.

• Canvas Pages - Canvas pages are presented within the Facebook frame and can either be FBML or an external HTML site presented within an iframe. These pages are 100% hosted by the client and as such Facebook allows almost any type of monetization to happen within them.
  • The canvas pages are the nuts and bolts of the application, allowing the user to perform actions such as adding a photo, inviting friends, commenting on an item etc. These actions can be geared in a way to enhance the viral nature of the application.
  • Take the popular Vampires application, the user can bite their friends; so not only is this biting action reported in the user's news feeds, but also the action has initiated an invite to the bitten friend. So in one swoop the application has broadcast itself to potentially hundreds of users.

• 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. Looking at Triangle's Love Football application the user simply chooses the team's they support and the application displays these on the Profile box, but again to enhance viral activity Triangle added in Discussion point links. External user's who view these profiles may be drawn to investigate and then hopefully convert into a user themselves.
  • One thing to note about the profile is that it cannot be dynamically updated through database queries. The only way to update content that is tailored to each user is to PUSH the new content to every single user's profile box. If the content is static among every user then certain Facebook tools can be used to require only one push to update all.

• 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.

• Requests / Invites
  • 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.

• Message Attachments
  • Applications can create attachments that appear in a drop down 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.

• 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.

Development Cycle and Estimated Costs

As Facebook provides some very good structure in terms of what can be done via their platform the development costs can be cheaper than developing a full blown xHTML site. However if the client wishes to use the IFRAME options then this is essentially what needs to be developed.

It can be a bit of a myth that Facebook applications are straight forward, the truth is that they require just as much coding time as normal web sites, but if you utilise any FBML components then testing time can increase as this can only be done through a Facebook application page. Triangle in parallel also produces an optional development application for clients, this way code can be tested thoroughly before pushing live, but again this increases test time.

Triangle has put together a solid Framework for Facebook applications so hopefully we can be more competitive than most other companies. We pride ourselves on being very detailed in every aspect of production, from planning to execution; even our code looks pretty!

Below is a break down of the main cost elements:

• Creating the application on behalf of the client - 2hrs.
  • This involves completing an application request form. Uploading some images for the about page and creating the HTML needed for the application description.

• Creating the application structure - 2days
  • If clients wish to use the layout that is deployed on Triangle applications then this can reduce costs e.g. Love Football. This layout includes an Advertisement space at the top, header links, logo dashboard and discussion link, tabs, then the body content which is organised in blocks of content and lastly a comments block where users can comment on the page, this is great for quick and dirty feedback. This layout not only keeps the Facebook theme but allows for rapid prototyping of modules across the application.
  • From this point on the application can be installed and used.
  • Included is a default invitation page that tracks sent invites and installs.
  • Google analytics set up as standard.
  • Triangle utilises the standard Facebook PHP client code with a slight modification to allow certain pages to run in multi-threaded mode, this allows for very fast updates of elements such as the profile box.

• Database Integration - 1day
  • This involves creating and normalising the database for its intended use on the application. This may included logging who has installed / removed the application. Tracking who has sent invites and who installed the application through an invites. Logging comments etc.
  • The time allocated here also includes setting up more bespoke tables and views for the application.
  • Constant monitoring and testing of queries are also included during development.

• Profile Layout - 1day
  • One thing many other developers overlook is the need to create a scalable profile box, this means dissecting every element that is required and building the box to be future proof. Triangle utilises Facebook handles and references to create this.
  • Included in this are scripts to update all users profiles and scripts to update any reference handles needed.

• PHP Development - 2 - n days
  • Depending on the complexities of the application this can vary dramatically. But if the client wishes to have an average application where the user performs standard actions such as selecting their favourite team and adding this onto there profile, then we are looking at approximately 2days of development. Extra coding may be required to perform logic like deleting, ordering etc, but should all be achievable within this time frame.

• Feeds / Notifications - 1/2day
  • Creating these elements for persistent use throughout the application.

So for an average application the development time will likely be 7 days. This includes thorough testing of all the code for SQL injection, testing of queries for performance and any other needed testing.

Facebook Development Checklist

Triangle Rates

Triangle charges £350 per day development fees, and requires a 30% deposit. If we can do the application faster then we are honest enough to state this and will reduce the overall cost.

What we do require is a full specification of what is needed in the application, this should include wire frame mock-ups of each page, and detailed instructions on what actions the users can take and the positive and negative outcomes of these actions.

Triangle can also be employed for consultation at the same daily rates, if you wish our lead Facebook developer to visit your office and chat about anything related to Facebook then please let us know. Minimum charge out is 1/2 day.

Hosting Requirements

• PHP5
  • PHP Extensions
  • OpenSSL, so HTTP connections can be done correctly to HTTPS sites.
  • CURL
  • MySQLi
  • MySQL
  • PDO
  • POD MySQL
  • MBString
  • MCrypt
• MySQL5
• Apache 2.x
  • Required Mod Rewrite module.

Triangle utilises the Zend Framework to build applications for clients.

Triangle can host your application on our dedicated servers, these are supported 24/7 by Rackspace, a cost of £39.50 will be leveraged.

Marketing Your Application

Facebook has its own internal marketing application, Ads.

• Facebook Ads

Creative Dimensions & Colours

• See Facebook Styling
• See Facebook Styling

• Canvas page dimensions - 760px Wide
• Profile Narrow column dimensions - 180px
• Profile Wide column dimensions - 380px
• Application icons - JPG, GIF or PNG file. If the file is not a 16x16 GIF, it will be resized and converted.
• Application image - JPG, GIF or PNG file. If the file is not a 75x75 GIF, it will be resized and converted.
• Images for Feeds - JPG, GIF or PNG file. 75x75, it will be cached by Facebook.

Embedding Flash

Facebook will pass through several parameters as FlashVars the important ones are as follows:

• allowScriptAccess => never // Always set
• wmode => transparent
• fb_sig_user => 668010822
• fb_sig_api_key => 26e1a9675cecc3408bb5f4a09a3ac790
• fb_sig_added => 1 or 0
• fb_sig_session_key => 198c49145e391389a53b7b9a-668010822

External Links

• Facebook
• Facebook Developers
• Facebook WIKI
• Facebook Bugs
• Facebook Colours

Navigation

• Introduction
• Portfolio
• Checklist
• Tracking
• Reviews

Edit Navigation