If you’ve been designing sites for a while, you probably started off designing using tables for layouts. Using tables for page layout has gone against W3C standards for several years now, but it wasn’t until the last few years that browser-support for CSS had really come far enough to give you any choice in the matter.

If you’re newer to designing websites, you’ve probably been taught CSS layout design and it’s already become a part of how you do things, but back in the day, CSS just wasn’t reliable enough to use as primary site layout for sophisticated designs. If you’ve been designing for at least 5+ years, you’ve (hopefully) already been using CSS for quite some time, for typographical formatting, basic page attributes, and so on, but may have still relied heavily on tables for the actual structural layout.

Now that solid, all-CSS layouts are a reality, where does an old-timer start in getting their CSS up to snuff to actually handle complex all-CSS layouts? It can be intimidating to get started, but thanks to the amazing community of design bloggers, you’ve got some great resources at your fingertips.

Note: Everything covered here is making the assumption that you are basically coding by hand and not using a WYSIWYG editor for layout – and that you have at least a basic understanding of how CSS works. If you’re interested in learning how to create CSS-based layouts in Dreamweaver, there is a great tutorial (including source files) available here, and another dealing with CSS layouts by way of Photoshop and Dreamweaver here.

Before You Begin

Making this transition is TOTALLY do-able, no matter how long you’ve been designing with tables – it just requires a little patience. When I first started web design, there were were only a handful of books on HTML (nothing on CSS) and not a web design class to be found. (Yes, and dinosaur’s roamed the earth, and cars were a dollar. Hush.) If I could make this transition, anyone can.

First, I think its important to demonstrate exactly how far CSS has come, and how incredibly robust it is for site layout. One of the best examples out there is CSS Zen Garden, which shows you multiple site layouts that are all very different, that all use the exact same HTML file, swapping only the CSS file. Click through to the different designs, and it won’t take long for you to see just how far CSS has come.

Taking the Plunge

The very first tutorial I would recommend is called Creating a CSS Layout from Scratch, on the Subcide web site. This is a long tutorial, but worth every page if you actually follow the steps. The author does a fantastic job of explaining why you use each and every attribute, how it impacts the design step-by-step, and potential pitfalls you might run into. It actually moves a lot faster than you might imagine, and you can get through it in about 20 minutes if you’re actually making changes to a sample file as you go (which I highly recommend myself, being a visual learner.) Follow the steps, making the changes discussed, and previewing your changes every time, so you get a clear idea of how each little CSS change makes a big impact on the end-result.

Also be sure to check out the Holy Grail article by A List Apart. In one page, you’ll see exactly how to create a liquid 3-column layout with very simple code.

Another great step-by-step, real-world CSS layout tutorial is by Webreference which walks you through a specific layout goal, providing code and explanations along the way.

Or, if you don’t need such a granular approach, SitePoint’s article, Breaking out of the Box with CSS, has a similar step-by-step method.

Also be sure to check out this list of 12 PSD to HTML/CSS tutorials.

An aspect of CSS design that is absolutely critical but can be a bit confusing for newbies is the float. Smashing Magazine does a great job illustrating where floats are appropriate, which ones you need where for a specific end result, and known bugs/workarounds in their article CSS Float Theory: Things You Should Know. Floatutorial is another great step-by-step that walks through how floats work in a very simple and visual manner. That one doesn’t go into quite as much detail as the Subcide tutorial does, which may be better for you if you feel you’ve already got a decent handle on CSS concepts, but might be confusing to someone a little greener.

One way you’ll really get a good idea of how CSS works for layout is by checking out some of the existing, semi-standardized layouts. You can use these as templates for your own designs, or just observe the different ways people have solved similar problems using CSS. There’s a great list of sample CSS layouts available on the Noupe website, and a list of 40 CSS layouts available on Mashable.Com. If those examples are a little too detailed and confusing, be sure to check out the Little Boxes demo, which shows you a small collection of very basic layouts (one box, two box, three column, etc) and then slightly more advanced variations.

Next Steps

Once you’ve mastered the basics, you should try creating some simple layouts from scratch using your newly acquired powers. Once you’ve got those nailed, you can create more sophisticated samples, or convert an existing table-based site into a CSS-based site, with a little help (or maybe more than a little help) from this tutorial from Liquid CSS. Incidentally, that tutorial does a great job of illustrating how the z-axis works in CSS, a concept that can be a sticking point for some people. Doing a table-to-CSS conversion will be time-consuming (and at times, possibly more than a little frustrating), but it will be great practice (since you already know what the site is supposed to look like) and will give you a practical reason to go back and update some of your old, bloated table-based layout code. Win win!

Soon you’ll be ready to check out some more advanced concepts in CSS, including fancy lightbox image effects and graphs, navigation menu image rollovers, prettier form buttons, reliable image-based buttons, sexy image buttons, and CSS speech bubbles. You may already be using some of these within your table-based layout, but how they work (or occasionally don’t work) may make a little more sense to you once you’ve gone through the process of learning CSS layout. Two more gems for great tips and techniques are Using CSS to Do Anything and 101 CSS Tips of All Time, both from Noupe.

I strongly recommend checking out Smashing Magazine, Noupe.Com, and CSS-Tricks.Com for some of the most thorough and advanced tips, tricks and tutorials you’ll find online. Add their RSS feeds to your newsreader if you haven’t already.

Best Practices

Like any other new technology (and by new, I mean new to you), reading up on and implementing established best practices will go a long way. There is an outstanding breakdown of best practices in the Smashing Magazine article 70 Expert Ideas for Better CSS Coding. Seventy may sound like a daunting number, but many of these tips address workflow, naming conventions and other aspects that are less confusing as learning the actual CSS, but will save you tons of time as you begin to make CSS more of a workhorse in your own designs. (I’m a big fan of having strong fundamentals, planning and workflow, so I may be a little biased here, but its served me well over the past fifteen years of developing websites professionally.)

Many of these tips are not for the faint of heart, and will require a pretty solid understanding of CSS before they will be meaningful, so you may want to get some practice in before tackling this article.

CSS Frameworks

Now that you’ve got a decent handle on CSS layout principles, you may want to look into using a CSS framework. (I leave this part for the end because understanding the fundamentals is key, and it’s tempting to skip right to using a framework instead of teaching yourself how to do it right on your own.) There are several decent CSS frameworks out there, each with their own pros and cons.

If you’re not sure what a CSS framework is, the Wikipedia entry says it well:

A CSS framework is a pre-prepared library that is meant to allow for easier, more standards-compliant styling of a webpage using the Cascading Style Sheets language. Just like programming and scripting language libraries, CSS frameworks (usually packaged as external .css sheets inserted into the header) package a number of ready-made options for designing and outlaying a webpage.

Wikipedia also has an extensive list of available CSS frameworks. Before you jump head-first into the CSS framework shortcut, Smashing Magazine has an excellent overview of CSS frameworks, including pros and cons (of which there are many on both sides), and a brief review of some of the more popular ones. The article is from 2007, but the principles remain important and valid today. If CSS franeworks interest you, you may also want to check out the blog post and comments on this article on the Monday by Noon website.

I personally almost never use CSS frameworks, for many of the reasons outlined in the Smashing Magazine article, but that absolutely doesn’t mean that I discourage you from investigating them and using them as a tool where appropriate.

Conclusion

Not that I necessarily agree with this website, but it makes me chuckle every time I see it. Obviously, there may be times when you’re under deadline, and you just don’t have the luxury of learning under the gun.

Realistically speaking, if you were to devote your full attention and effort to the basics tutorials here, making sure to actually follow along and do the code step-by-step, you would have a pretty decent grasp on pure CSS layouts within several hours. Several hours might seem like a long time to spend on this, and you might be looking for a shortcut, but if you really want to understand it, it’s worth investing the time, especially if this is what you do for a living. Find the time. It’s important.

Possibly related posts:

1. Photoshop Tutorials That Will Change Your Life Photoshop tutorials are a dime a dozen, and simply googling...
2. Compare Website Stats Using Google Trends Google Trends has a newly-added ability to show unique visitor...
3. Creating A WordPress Theme If you’ve already got some design chops and a WordPress...

Delivering content relative to the physical location of your users is an excellent (and fairly easy) way to fine-tune the content you’re delivering to be most relevent to the people visiting your site. Two simple ways of doing this are to use an IP-based geolocation lookup, or to do a manual radius search (like a “store finder” type of functionality), where the user manually enters a postal code. Both function on the same logic – the real difference is that one requires a third-party service that can fetch the user’s latitude and longitude based on IP address. This functionality can be used to show content such as local news, local store branches, etc – as soon as the user visits your page.

The nuts and bolts of IP-based geolocation is as follows:

1. User lands on the web page
2. User’s IP is captured and posted to a third-party geolocation service, which returns a latitude and longitude for the IP address
3. Website performs a radius database search using the latitude and longitude provided by the third party service and returns content relative to that location

Bear in mind, your database must contain data that is stored with a latitude and longitude for this to work. You cannot compare a user’s latitude and longitude to the lat/long of a piece of data if you have no lat/long associated to your content.

Also, please note: the services mentioned here – and the code provided – is intended for US-based geolocation. The code will remain basically the same for non-US lookups, but you may need to use alternate third-party services if your country is not covered by the ones mentioned here.

1. Getting Latitude/Longitude for Your Database Data

The first part of this process starts with you tagging your existing or newly added database data with the correct latitude and longitude. Each item you wish to include in the radius search should have a valid lat/long value in the latitude and longitude fields. If you are modifying an existing database, you would execute an alter table command to add the new lat/long fields. For this example, we’ll be using a table called stores:

CREATE TABLE `stores` (
`store_id` INT NOT NULL AUTO_INCREMENT ,
`store_address` VARCHAR( 40 ) NULL ,
`store_city` VARCHAR( 40 ) NULL ,
`store_state` VARCHAR( 2 ) NULL ,
`store_country` VARCHAR( 2 ) NULL ,
`store_phone` VARCHAR( 15 ) NULL ,
UNIQUE (`store_id`));

And then we add the new latitude and longitude fields to our stores table, using the DOUBLE datatype:

ALTER TABLE `stores` ADD `latitude` DOUBLE NULL ,
ADD `longitude` DOUBLE NULL ;

Now our table is set up to store the latitude and longitude data, but from where do we actually get the data, short of manually looking it up for each row of data in our stores table? Easy. There is a fabulous free service available at rpc.geocoder.us that lets you post an address to their API, to which it responds with the latitude and longitude values for that address. The easiest way to handle this process is to set up a cURL request in the admin area where you’re managing your data – otherwise you’ll need to write a script to cycle through the rows of data, fetching the latitude and longitude.(You will, of course, need to have PHP configured with cURL support for this to work.) Using this service, free lookups are throttled by your IP address to one request every 15 seconds – this may cause issues when you’re initially trying to get the lat/long data into your database for existing records, but shouldn’t be much of an issue afterwards.

First let’s set up a small function to handle the cURL request:

function curl_string ($url){
$ch = curl_init();
curl_setopt ($ch, CURLOPT_URL, $url);
curl_setopt ($ch, CURLOPT_HEADER, 0);
curl_setopt ($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt ($ch, CURLOPT_FOLLOWLOCATION, 1);
curl_setopt ($ch, CURLOPT_TIMEOUT, 120);
$result = curl_exec ($ch);
curl_close($ch);
return $result;

The format you will be sending the query to the rpc.geocoder.us API is: http://rpc.geocoder.us/service/csv?address=1600+Pennsylvania+Ave%2C+Washington+DC

// set the url of the API using the address, city and state we want to query

$url_page = "http://"."rpc.".".geocoder".".us/service/csv";
$url_page .="?address=".urlencode($address).",".urlencode($city).",".$state;

// execute the cURL request
$string = curl_string($url_page);

// turn the comma separated csv data turned into an array,
// so we can easily see that a match was found and use the pieces
$address_pieces= explode(",", $string);

// make sure the array contains data
if (count($address_pieces) > 0) {

// update the database
$sql = "update stores set latitude='".$address_pieces[0]."', ";
$sql .="longitude='".$address_pieces[1]."', ";
$sql .="zip='".$address_pieces[5]."' where id='".$store_id."'";

if ($update_latlong = mysql_query($sql)) {
echo 'Lat/long updated!';
} else {
// if the query failed, print out an error
echo mysql_error();
}

// if the array does not contain data, no match was found in geocoder.us, so suggest using google maps to find the lat/long manually
} else {
echo 'No geolocation match.';

}

The code above will help you update your existing data if you were to use it in a script that cycles through your database records, or you can use it as part of your store administration area, doing the cURL request every time a new store is saved to the database.

2. Getting the Latitude and Longitude of the User

Now that you have base lat/long data for the data in your database, you have to obtain the lat/long for the user visiting the site. For this next part, you will again need to access a third-party service, this time to get the latitude and longitude based on the user’s IP address. I use a commercial service available from MaxMind.Com. It’s not free, but their prices are very reasonable ($20 per 50,000 queries) – and by using a cookie to store whether or not the user’s lat/long has already been returned, you can save on the number of accesses you use up on a busy site.

// begin the session
session_start();

$expireTime = 60*60*24*30; // 30 days
session_set_cookie_params($expireTime);

if ((!isset($_SESSION['geo_country'])) || ($_SESSION['geo_country']==''))    {

// enter your MaxMind license key here
$license_key='XXXXXXXXXXXXXXX';
$ip = $_SERVER['REMOTE_ADDR'];

$query = "http://"."geoip1."."maxmind".".com/b?l=" . $license_key . "&i=" . $ip;
$url = parse_url($query);
$host = $url["host"];
$path = $url["path"] . "?" . $url["query"];
$timeout = 1;
$fp = fsockopen ($host, 80, $errno, $errstr, $timeout)
or die('Can not open connection to server.');

if ($fp) {
fputs ($fp, "GET $path HTTP/1.0\nHost: " . $host . "\n\n");

while (!feof($fp)) {
$buf .= fgets($fp, 128);
} // endwhile

// split the output into an array
$lines = split("\n", $buf);
$data = $lines[count($lines)-1];
fclose($fp);

$geo = explode(",",$data);
$user_geo_country = $geo[0];
$user_geo_state = $geo[1];
$user_geo_city = $geo[2];
$user_geo_lat = $geo[3];
$user_geo_lon = $geo[4];

$_SESSION['geo_country'] = $user_geo_country;
$_SESSION['geo_state'] = $user_geo_state;
$_SESSION['geo_city'] = $user_geo_city;
$_SESSION['geo_lat'] = $user_geo_lat;
$_SESSION['geo_lon'] = $user_geo_lon;

setcookie("geolocCookieCountry", $user_geo_country, time()+$expireTime, "/");
setcookie("geolocCookieCity", $user_geo_city, time()+$expireTime, "/");
setcookie("geolocCookieState", $user_geo_state, time()+$expireTime, "/");
setcookie("geolocCookieLat", $user_geo_lat, time()+$expireTime, "/");
setcookie("geolocCookieLon", $user_geo_lon, time()+$expireTime, "/");

} // endif $fp

} // endif session set

Now, you’ll only be querying MaxMind if the user hasn’t already accessed the site before and had their latitude and longtude stored in the cookie. Note the $license variable in the code above. When you sign up for the MaxMind Web Service, you will be given a license number, which you’ll insert there.

3. Putting the Two Together to Return Results Within X Miles

To tie the two together and query the database, returning only results that are within a specified number of miles of the user’s IP address, we’ll need two classes:

class RadiusCheck {

var $maxLat;
var $minLat;
var $maxLong;
var $minLong;

function RadiusCheck($Latitude, $Longitude, $Miles) {
global $maxLat,$minLat,$maxLong,$minLong;
$EQUATOR_LAT_MILE = 69.172;
$maxLat = $Latitude + $Miles / $EQUATOR_LAT_MILE;
$minLat = $Latitude - ($maxLat - $Latitude);
$maxLong = $Longitude + $Miles / (cos($minLat * M_PI / 180) * $EQUATOR_LAT_MILE);
$minLong = $Longitude - ($maxLong - $Longitude);
}

function MaxLatitude() {
return $GLOBALS["maxLat"];
}
function MinLatitude() {
return $GLOBALS["minLat"];
}
function MaxLongitude() {
return $GLOBALS["maxLong"];
}
function MinLongitude() {
return $GLOBALS["minLong"];
}

}

and

class DistanceCheck {

function DistanceCheck() {
}

function Calculate(
$dblLat1,
$dblLong1,
$dblLat2,
$dblLong2
) {
$EARTH_RADIUS_MILES = 3963;
$dist = 0;

//convert degrees to radians
$dblLat1 = $dblLat1 * M_PI / 180;
$dblLong1 = $dblLong1 * M_PI / 180;
$dblLat2 = $dblLat2 * M_PI / 180;
$dblLong2 = $dblLong2 * M_PI / 180;

if ($dblLat1 != $dblLat2 || $dblLong1 != $dblLong2)
{
//the two points are not the same
$dist =
sin($dblLat1) * sin($dblLat2)
+ cos($dblLat1) * cos($dblLat2)
* cos($dblLong2 - $dblLong1);

$dist =
$EARTH_RADIUS_MILES
* (-1 * atan($dist / sqrt(1 - $dist * $dist)) + M_PI / 2);
}
return $dist;
}

}

And then, to perform the actual query:

// set a default number of miles to search within
$Miles = '50';

// set the user's latitude and longitude as the one to search against
$Latitude = $user_geo_lat;
$Longitude = $user_geo_lon;

$zcdRadius = new RadiusCheck($Latitude,$Longitude,$Miles);
$minLat = $zcdRadius->MinLatitude();
$maxLat = $zcdRadius->MaxLatitude();
$minLong = $zcdRadius->MinLongitude();
$maxLong = $zcdRadius->MaxLongitude();

$sql = "SELECT store_address, store_city, store_state, store_phone, ";
$sql .= "SQRT((((69.1*(latitude-$Latitude))*(69.1*(latitude-$Latitude)))+((53*(longitude-$Longitude))*(53*(longitude-$Longitude))))) ";
$sql .= "AS calc FROM stores where  ";
$sql .= "latitude >= '$minLat' ";
$sql .= "AND latitude <= '$maxLat' ";
$sql .= "AND longitude >= '$minLong' ";
$sql .= "AND longitude <= '$maxLong' ";
$get_data = mysql_query($sql);

// loop through the matching database results
while($storedata = mysql_fetch_assoc($get_data)) {

// calculate the number of miles away the result is
$zcdDistance = new DistanceCheck;
$Distance = $zcdDistance->Calculate($Latitude,$Longitude,$storedata['latitude'],$storedata['longitude']);

// and for the non-US people, here's the km calculation
$calc_km = round(($Distance * 1.609344),2);

echo '<li>'.$storedata['store_address'].'<br />'.$storedata['store_city'].', ';
echo $storedata['store_state'].' '.$storedata['store_country'].'<br />';
echo $storedata['store_phone'].'<br />';
echo 'Distance: '.$Distance.' ('.$calc_km.' km)';
}

And that’s really all there is to it.

Store Locator Only

If you want to create a store-locator style script without automagically getting the user’s current location, you’d use the code above, almost verbatim. The difference is that you’d need an additional table of zipcodes with associated lat/long, available for purchase (again, not very expensive) from ZipCodeDownload.Com. The process would go as follows:

1. User arrives at your site, and enters a zip code and mile radius they wish to search using your search form – clicks submit
2. The script queries the zip code table to find the latitude and longitude associated with the postal code the user has entered, and uses THAT latitude and longitude as the values for $Latitude and $Longitude in the code above, and uses the user-entered values for $Miles from the search form.

Everything else stays exactly the same. Naturally, you’ll probably want to add some sanity checks in your own code (gracefully displaying default content if no latitude and longitude is returned, etc) but I decided to skip that here so as not to confuse anyone.

Enjoy, and if you end up using this anywhere, let me know how it works out.

Possibly related posts:

1. Alternating Row Colors in PHP/mySQL Using alternating row colors in a PHP database application is...
2. Creating a Multi-Level Listbox in PHP/mySQL This lets you create a nested multi-level category menu through...
3. PHP/mySQL Breadcrumb Trail This lets you automatically create a breadcrumb trail navigation through...

This is part one of a series – the technical how-to of creating the application will be discussed in a separate article. This article is intended to help you plan out your application to best prepare for coding and best leverage the new aspects of Facebook for exposure and social interaction.

Having created several Facebook applications, I had this article in the back of my head for quite some time now.

The code and Facebook functionality mentioned in this series is current as of September 26, 2008, and deals primarily with the “new” Facebook. I will try to keep it updated in the future as they continue to change things.

The planning phase is absolutely critical and directly relates to the success of your application. This is especially important in Facebook applications, since good planning can literally make or break the popularity of your application. If you overlook one of the profile boxes, or fail to implement social actions such as inviting friends or posting actions to the user’s newsfeed, you’re going to lose out on some of the key viral aspects that make Facebook applications become popular in the first place.

Application Canvas Page

The application canvas page is the standalone page that your application lives on. It has the widest available page real estate, since the application doesn’t have to share the page with anything else, other than a narrow column of ads on the right-hand side (not shown).

Facebook application canvas page

You can use a few built-in features of Facebook’s scripting language, called FBML, to easily create the ability for users to invite their friends to the application. We’ll go into more of the built-in tab tags in the next article, but its important to make it easy for users to get their friends engaged. Here’s some sample code:

<fb :tabs>
<fb :tab-item href="invite.php" title="Invite Friends"/>
</fb>

NOTE: Never require that your friends invite people in order to use your app. It’s lame, and although it may boost the number of people who install the application, your number of active users will not benefit as much as if you use honest methods to encourage people to involve their friends. Its a lousy business practice, and you will drive away users who don’t enjoy being forced into spamming their friends with an application that they haven’t even been able to try yet.

Genuine, organic interaction is what will provide you with long-term active users, not underhanded tricks. When users trust your application, they will be more likely to stay active and invite all of their friends, instead of just the ones they are required to invite to check out your application.

Since FBML will also allow you to deliver specific content based on whether or not the user has added your application to their profile or boxes page (discussed below), be sure to include a button that prompts the user to add it. Many users are still confused by Facebook’s new layout and functionality, so the easier to make it for people to add your app to their profile, the better.

To create this button, simple include the following code where you want the button to appear:

<fb :if-section-not-added section="profile">
<fb :add-section-button section="profile" />
</fb>

Application Content Boxes

Let’s get started by discussing the various places your application content can live on Facebook. The main application lives on a canvas page in Facebook – that’s the page at http://apps.facebook.com/<yourappname> – but that’s not the only place your application can appear. There are several content boxes available to you – or more specifically, to your potential application users – and each one serves a slightly different purpose. To further complicate (or arguably improve) matters, the content you deliver in those boxes can be customized for the user who has added the application AND for a user who is looking at the box on someone else’s profile or fan page, delivering specific content for each state.

1. Application Profile Boxes – Old Vs. New

Application profile boxes are the boxes where your application has a presence on the profile of the user who has interacted with it.

With the “new” Facebook launch, the location and specs of these boxes have changed drastically. Prior to the Facebook redesign, when a user added an application, it would appear on their profile page, either as a wide box or a narrow box, depending on the application settings. Users could move the box from its default location into the opposite column if they so chose. When a user added an application, the application’s profile box would show up by default in the user’s profile. They always had the option to remove the box, but it showed up by default.

Old Facebook application profile box

This layout has since changed – in fact, if you use Facebook at all, you’ll have noticed that the entire profile layout and interface has changed. The change has resulted in a reduced presence of applications on the profile pages. On the new Facebook, users no longer “add” an application, they “allow” it – and the application doesn’t show up anywhere in their profile without them deliberately going out of their way to add it. This means that you have more of an obligation to give the user a compelling reason to add your application to their main profile page.

Additionally, the old wider boxes in old profiles are no more. Profile application boxes are 200 pixels, with 8 pixels of padding on each side for an actual usable width of 184 pixels – and are limited to 250 pixels in height. If your application box is longer than 250 pixels, everything below the 250 mark will be hidden from view, so plan around these dimensions.

New Facebook application profile box

If your application is created properly, the user will also have the option to move the application box to their (new) “Boxes” screen.

2. User Profile “Boxes” Screen

The new Facebook includes a tab labeled “Boxes”, that serves as a shortcut to the applications they choose to include in that area. Applications that the user frequently interacts with might be added here, so the user can get to them quickly. Users can opt to drag their box to the wide or narrow column in the boxes screen.

New Facebook Boxes tab

Because the user has the option of narrow or wide, you should make sure you account for both wide and narrow views for the boxes tab. As you’re designing your application, take into consideration that there are dramatic size differences between the wide and narrow layouts, and design appropriate displays for both versions.

3. Fan Pages

Fan pages and application pages also received an overhaul in the new Facebook design. Previously, application’s “about” page – the page that shows the user information about your application, the developers, and allows users to leave reviews of your application – did not allow you to add external applications to an existing application about page. The new design allows you to do so. Previously, if you were running a marketing effort that included a Facebook application to advertise a product or event, you needed to create a separate fan page where users could upload photos and video, “fan” the page, and so on. Because Facebook has changed this format to allow application administrators to add external applications to application fan pages, you may decide to use the application fan page as the one destination for fans. This can cut out confusion on the part of the user, who may not understand why there are two fan pages for the same product or service.

To encourage engagement, you can enable discussion boards, reviews, photo and video galleries, wall posts and more, allowing your application fan page to be a community portal for the people who interact with your application.

4. Application Tab

In the new Facebook, users have the option of adding a shortcut to their favorite apps right on their profile. This allows them to jump right to the application, without having to dig through their application menu. You MUST set this option up in the application settings page. (It will ask you for a url for your tab page. If you leave this blank, the user will not be able to add your application as an application tab.)

Application tabs

The contents of the tab page (for example, tab.php) are not unlike the contents of your main canvas page. No special code is required, so you can basically just copy the code from your canvas page (minus the wide and narrow specs) and echo it out to the page.

Social Actions

The user’s mini-feed (or newsfeed) is a critical aspect of your Facebook application. Many people never browse the application directory, but instead primarily learn about new applications solely by seeing what their friends are interacting with. Some will be more apt to accept a direct invitation, and others won’t even need an invitation. They will see social actions posted to their friends newsfeed, and if they are compelled by the action or message, they will frequently add the application based simply on the fact that their friends are using it, and they trust their friends, so “it must be good”.

Social actions are displayed in the user

Social actions are displayed on the user’s profile “wall”, and also in the mini-feed page of their friends.

Facebook does have some restrictions on social action messages. For example, every application is limited to 10 social newsfeed messages per user per 24 hour period. If the user interacts with your application in a way that triggers newsfeed messages more than 10 times in a day, the subsequent newsfeed messages will simply not be displayed.

Additionally, the user must take an action that triggers the social action newsfeed item. For example, you could not have an application that adds a newsfeed item every 4 hours regardless of whether or not the user has interacted with the application that day. In the Mr. Right application, which was the source for many of the screenshots in this article, we wanted the fictional “boyfriend”, Mr. Right, to send the users gifts. Those gifts would then be inserted into the user’s minifeed, encouraging social actions. However since it would be against the Facebook terms of service to automatically fire off newsfeed items, we had to create a button in the application that allowed users to request that Mr. Right send them a gift. When they clicked on the “Let me give you something” button, the newsfeed was allowed, since the user took a specific action in the application to trigger it.

When planning your newsfeed items, be sure to make them interesting, relevant and FUN. If users feel as though your application is spamming them or their friends, they will be quick to uninstall it and never look back.

Conclusion

So in conclusion, there are a total of 6 application views you should be planning for:

1. Widest – application canvas page
2. Narrow – profile box (184 x 250)
3. Wide – boxes tab (380 wide, can expand in height)
4. Narrow – boxes tab (184 wide, can expand in height)
5. Wide – fan page
6. Widest – application tab

Additionally, each of these application views can deliver content based on:

1. Whether or not the user has added (or “allowed”) the application
2. Whether or not the user has added the application to their profile box

Ideally, you’ll want to tailor each of the box view variations based on the user states mentioned above. This potentially means designing 12 different box display variations. This may seem like a lot of work, however by taking the time to plan this out in advance, you’ll be sure to deliver truly tailored content to your users, making it more compelling for them to interact with your application and add it to their profile, putting it in a place where their friends will see it.

Customizing the view will deliver meaningful messages to users who have already allowed the application, and perhaps more importantly, can deliver a call to action for users who haven’t. For example:

• The user who has allowed the application will see a leaderboard of their friends, or information directly related to the way they have previously interacted with the application. (“Friends Leaderboard”, or “This is your Mr. Right”)
• The user who has not allowed the application and is viewing it on a friend’s profile will be given a call to action. (“To get your own Mr. Right, click here”)

Including social actions into the user’s newsfeed will also be a very effective way to leverage the viral aspects of Facebook applications. Carefully planned social action messages will pique the curiosity of the friends of the user who is interacting with it, making it far more likely that they will interact with it themselves.

And of course, you should make it as easy as possible for users to invite and engage their friends by integrating built-in “invite your friends” functionality, and (if it makes sense for your application) leaderboards or galleries that invite friendly competition between friends.

For more information on application planning, visit the Anatomy of an Application page on the Facebook Developer’s website. The Anatomy of an Application page also addresses some additional functions such as a media publisher that allows user to publish rich content to their profiles, although it may not be appropriate for all applications.

Don’t miss part two of this series, where we walk through creating a simple Facebook application based on the dicussion in this article.

Possibly related posts:

1. Planning a Facebook Application: Part Two I know I promised you that we’d get into some...
2. %$#^%$* Facebook Application Tabs So this is new. And by new I mean painfully...
3. Static FBML: Not Every Facebook Fan Page Needs An Application You don’t always need a custom application for your Facebook...

If you develop software for a living, or if you moderate any online forums, you may have found yourself in the situation where you need a list of banned or blocked words. The problem is, what works for one application doesn’t work for another. A forums targeted at adults can probably have a little more latitude than a game designed for children.

Rather than maintaining multiple lists for multiple audiences, check out BanBuilder.Com, a website that lets you generate a list of banned words based on rating (PG, PG-13, R), location (US swear words versus UK, etc) and export them into various formats including csv, text, sql insert statements and more. The service is free and there’s nothing to sign up for. Just use it when you need it.

Note: the export function isn’t working just yet – but you can help the project by adding your own swear words to the database. Check back in a day or two for the export feature.

And if you have suggestions, post them here, since this is my own little pet project!

Possibly related posts:

1. Identify and Fix SQL Injection Vulnerabilities in Web Applications Scrawlr is a free software for scanning SQL injection vulnerabilities...
2. Truncate text to x number of words This code will truncate given text to a certain length,...
3. Advertising on Facebook Applications – An Experiment This article has been deprecated, and has been replaced by...