In Making A Custom Facebook Landing Page – Part 1, we looked at the changes Facebook has made to their Developer program, some quick and easy, yet not as flexible solutions for a custom Facebook page, and that we will be utilizing Facebook Apps to create our page.

Today, we will be looking at setting up that Facebook Apps process, including hosting our app on a SSL secure page and installing it on our Facebook Fan page.

Creating Your Facebook App

In the first part of this series, I asked you guys to come up with a strategy of what you want your Fan page to do and consequently what this customized landing page would do. For the purposes of being consistent, the name of this subpage and app will be called Welcome. At the same time, before we create our app, we need to get in and be apart of the Facebook Developers group. This is where we will come to tweak, edit and add new apps in the future. Go to the Apps tab > Click “+ Create New App”.

The App Display Name should be “78P Welcome” and the App Namespace should be a unique name. Think of the namespace as a username for this specific app. We put sep-welcome so you will need to put something else. After a security measure, you will be taken to the basics. Add your company’s logo to the icon, select the category your company would be under, and change the name if need be. Notice the left hand sidebar navigation. The section Settings has three subsections: Basic, Auth Dialog, and Advanced. This is where we will focus our attention.

Initializing the App

Before we make any further changes or add it to the Facebook Fan Page that should already be created, we need to put this app into “Sandbox Mode”. In the left sidebar, select Advanced, taking you to a screen full of radio buttons. In the Authentication section, set Sandbox Mode to Enabled. This ensures that while we will be able to see how the app will look on the Facebook page, all non-administrators or developers of this app will see nothing. When the application is finalized, we will come back here to Disable Sandbox Mode.

Once you have set all of the settings to how you want, we will need to define where we will be pulling the webpage code to display on the Facebook Page. This means that you will need to find a server that will be able to host your web pages, images, and databases. One new policy that Facebook has required for developers to implement is SSL. The fear is that Facebook Apps will become hijacked, viruses installed, Facebook Pages vandalized, or private information of users stolen. SSL ensures that all information pulled from the hosting server will be encrypted and security measures put in place for any possible hacking. If you do not know how to set up SSL for your web servers, you can use Heroku, a free SSL cloud service that meets Facebook standards and integrated into the Developer platform. Setting up the Heroku platform is outside of the scope of this series, but you can find more information here.

Installing The App On Your Fan Page

Now that we have created and configured our Facebook App, let’s install it onto the Facebook page. Go back to Facebook and search for your app. (Hint: Search for whatever App Display Name) In the left sidebar, below the monthly active users, click the link to “Add to My Page”. A popup window will display for you to add to one or more of the Facebook Pages you manage. Now, when you visit your Facebook Fan Page, you will have a link in your left sidebar, under the Wall and Info buttons. Because we have not created any content to show up, obviously it should display blank. Also, because we are in Sandbox Mode, no one else will be able to see this link. Finally, if you give your app an image for the icon, it should display for you.

In the next part of the series, we will create the content to display.

The final part of this series, we will look at the Facebook API and how we can customize this app to maximize usage, including incorporating fangate.

In preparation for these two posts, know what content you are going to want to post as well as the CSS design of these pages.