We will be creating a custom Facebook application that displays different content based on whether or not the user is a fan of your page. The basic skeleton of everything you need is provided in the source files. We will be working through the process of creating the app from a first timers point of view. There are three stages that we will work through. In the first stage we will be creating the app in Facebook. In the second stage we will add the app to the correct page. In the third stage we will be working with the files that power your app.

Here is what we will be creating: Facebook App

Source Files: facebookapp.zip

Stage 1: Create an app in Facebook

1. Log into your Facebook.
2. Go to the bottom right of the page and select “developers”.
   
3. Go to the top and click on “My Apps”.
   
4. Facebook will ask permission to acces your information. Click on the “Allow” button.
   
5. Select the “+ Set Up New App” button from the upper right of the page.
   
6. Verify your account by entering in your telephone or credit card information. Sometimes this can be a little tricky. If it doesn’t work, just try again in a few hours.
   
7. Fill in the “App Name” field, agree to the terms, and then select “Create App”.
   
8. Complete the Security Check field and click submit.
   
9. Select the “About” tab on the left. Fill the description field in, add icons for your app, and fill in your email information.
   
10. Select “Facebook Integration” from the left.
    
11. Fill in the “Canvas Page” filed. This will be the extension that you want to use to navigate directly to your app. It might take a few tries since each name can only be used once.
12. Fill in the “Canvas URL ” field. This is the folder on your server where all of the files are stored. We will talk more about the files later on.
13. Fill in the “Tab URL” field. This is the exact URL to the file that you want to load. This should be the same as the “Canvas URL” except it ends with the files you want to load. For us, it will end with /example.php.
14. Save the changes at the bottom.

Stage 2: Adding an app in Facebook

1. After saving your changes, you will be directed back to the “My Apps” page.
2. Next, you need to become an administrator of the page that you want to place the app on. You can do this by liking the page and then having the admin for that page make you an admin as well.
3. After you are an admin, go back to the “My Apps” page.
4. Select the app on the left that you want to add.
5. Select “Application Profile Page” from the right side.
   
6. Select “Add to My Page” from the left sidebar.
   
7. A pop-up will appear and give a list of pages to choose from. Find the page you want to add the app to and select “Add to Page”. Then click the “Close” button.
   
8. Select “Account” in the top right corner, then choose “Use Facebook as Page”.
   
9. A pop-up will appear and give a list of pages that your an admin of. Choose the account that you want to add the app to and then click on the “Switch” button.
   
10. Your app will be listed in the left sidebar .
    
11. To edit the name or status of the app, click on the “Facebook” icon in the to left.
    
12. Select “Edit Page” in the top left.
    
13. Select “Apps” from the sidebar on the left.
    
14. Find your app in the list and select “Edit Settings”.
    
15. You can add or remove the app from the page. You can also change the app name for your page.
16. Click “Save” if necessary. Click on the “Okay” button.
    
17. Leave the account that you are in by selecting “Account” in the top right and then selecting “Switch back to Your Name“.

Stage 3: Creating the App Files

1. Make sure you have the example files downloaded and unzipped.
2. Go back to the “My Apps” page.
3. Select the app that you want to setup.
4. Select “Edit Settings” from the right.
5. Select the “Facebook Integration” tab on the left.
6. You will need the “Application ID” and “Application Secret”.
7. Open the downloaded files and open example.php.
8. Copy the ”Application ID” and “Application Secret” from Facebook and place them in the corresponding places labeled in the top of example.php.
   ex: $app_id = “151325125784561″;
   $app_secret = “fb4364361462k235235ko252313252bd”;
9. This file works with the src folder and tells your app whether or not a user is a fan or not of your page. At the bottom it directs the user to content-fans.php and content-non-fans.php.
10. Build each of these php files as a regular html page, dependent on what you want the user to see whether they are a fan or not. You can do pretty much anything that is possible on a normal site.
11. You should now have a basic functioning like or not app for Facebook.
12. Put the folder on your sever. Make sure it is in the same directory that you specified in the “Canvas URL” field.