The next few posts will examine how I will integrate a Facebook application into one of my sites: stephenhird.com. If you have browsed to this site, you will see there is already a Facebook platform there. And while it does show some of the great things to do with the API, it is very basic and really does nothing. So In this post I will examine what I want to do with it, how to set up an initial application on Facebook, and then go from there. This will likely happen over the next few weeks/months and will be a little more drawn out depending on how much time I have to document this process. This is step one, and step one will always include planning.

First I need to figure out what I want to have on my site. Since it is my name that is on the URL, I will need to create a way that this site will be an online portfolio, biography and information repository. When doing this for any site, it is important to remember your brand. Even for individual sites like this, it is important for branding, because this is who I am, I do not want it to be a classic case of slop on the web. This site before was mainly just a testing ground and now will need to be more.

A side note here, my name is the same spelling as a famous photographer based in London. His site is well put together with good descriptive links and a great example of combining minimalist ideas with styled presentation. He keeps his brand on the pages and the site does not confuse or mislead with extra peripheral items, or overuse of Flash or other heavy web technologies loading down the page. His site is located at: http://www.stephenhird.co.uk/

OK, now on to the planning and setting up the Facebook Application.

First I will list out my goals with the site, and why put it in a Facebook application. I am choosing to do this myself, however, these may not really warrant a full blown Facebook application with every site/web application.

1. Describe who I am
2. Display samples of my work, all work: code, art, etc
3. Provide a theme/question for comments and research
4. Provide contact information
5. Online Resume with ability for download (never hurts to have a resume handy)
6. Share my images from different travels and experiences
7. A place where I can see where I have been, where I am going and how to get there

This is the base ideas behind my site. This is for a more personal reflection tying into the other interests in my life.

I am planning on building the base in CakePHP, and adding the Facebook API in to the application. Which means this will also generate more posts on CakePHP application development. The back end will be a DB driven application, with all frontend interaction via Facebook login. All Admin functionality of the site will be outside of the Facebook authentication.

Now since I already have the site up, I need to create the application side in Facebook.

1. Log in to Facebook, or go to this URL: http://www.facebook.com/developers/apps.php
2. New policies for Facebook insist that you either enter a mobile number or a credit card to validate you are a real person. The phone number is what I would suggest to use.
3. After you enter the confirmation code, return to the main window to enter the name of the application and agree to terms
4. Put in the security check code
5. This will take you to the first part of the form

Now the form, it is a quick and easy form to fill out. There are four tabs and I will highlight each and a few items on each that I usually do:

1. About
   • Enter the application name, upload images, icons, etc.
   • Enter the support email or page, and put in a privacy page, very important if you want to have this application take off.
2. Web Site
   • Site url would be the site you are creating to work with the API
   • Domain is important if you want subdomains (for things like mobile domains, etc) to be authenticated using the same key
3. Facebook Integration
   • Canvas will determine how you want the page top appear inside Facebook.
   • This is also where you decide to do a FBML (their markup) or an iFrame. I usually choose iFrame mainly because in my applications the bulk of interactivity is done on the domain and not Facebook. However, you can always do FBML to keep everything in Facebook.
   • Profile tabs will enable new tabs on the app page that can be added/used on individual profile pages
4. Mobile and Devices
   • If you are developing for mobile users, enter the type of core markup to use, and the id for the iTunes app store. Important to read here if you plan on making a mobile app
5. Advanced>
   • Each section in this page holds a very important piece that may affect your application.
   • Authentication holds the sandbox keys, and where Facebook looks if a user takes your app off
   • Migrations holds the areas for callbacks, empty strings and OAuth
   • Security will allow you to enable only a few select IP addresses to access your application on the Facebook platform
   • Advertising and Advanced can do different things for ads, preloading, etc.

Above all else, read the side information if you get stuck, that is why it is there.

Once you are done, click the “Save Changes” button and it will save your data and create your application.

There, you have now just created a shell application on the Facebook platform and ready to enable the client side application.

In order to submit this application, Facebook posts this:
“Your application must have at least 5 total users or 10 monthly active users before you can submit it to the Application Directory. We cannot showcase any applications that are under construction or do not utilize the Facebook Platform.”

So do not expect to create an application and then suddenly have it spread like wildfire. It has to provide useful or entertaining “stuff”, it has to work, and it has to be used. Once it is, then it can be submitted. So we have accomplished step one of the integration. Next up is to get the API on the site, and start developing the site.