How to Create IFrame-Based Facebook Pages

1. On your Facebook page, click on “Edit Page” (in upper right corner).

2. Click on “Apps” at the left hand side navigation. This will show a list of  any tabs that you currently have along with other installed applications.

3. At the very bottom of the Apps page, click on “Browse More Applications”.

4. In the search box, enter “developer” to search for the Facebook  Developer app.  Use the smaller search box on the left and not the main Facebook search bar at the very top of the page.

5. Click on the Developer app, then select “Add to my Page” under the logo at left. A box will pop up to show which pages you can install the app on. If you do not already see your page listed there, the app is likely already installed. If your page IS listed, click on “Add to Page” (left navigation towards the bottom) to install. After you have installed the app or if it is not listed, close the pop up window and click on the “Go to App” button under the logo on the left.

6. Click on the “Set Up New App” button at the top of the page. 

7. You’ll need to have a name for your page. This name will be what displays on the “tab”, so choose wisely.

There are now three screens that you will need to fill out to properly set up the app.

• The About screen contains basic information about the page/app. You can upload a logo for the page and will need to add your privacy policy and terms URLs to this page. NOTE: You MUST add either a trailing slash or a ‘?’ after your URLs for privacy and terms.  This is required by Facebook to submit the form.
• The Web Site screen contains information about your own company domain. NOTE: Like on the About screen, you will need to enter a trailing slash on your website URL.
• The Facebook Integration screen is where many of the setup details are entered.  
• Canvas Page: Should be something short and memorable as part of the URL for the app you are creating. This will become the URL for the Facebook app that will appear in your iFrame.
• Canvas URL: The actual page on your server with the content designed to appear in the iFrame, e.g., ‘Thanks for visiting our Facebook Page’. The Canvas Page will grab this URL and place it in the iFrame. Must have the ‘/’ at the end or a ‘?’. You can also supply a secure (https) version.Once you have completed these three screens, click “Save Changes”. You will be able to come back later and edit these settings as needed.After saving , click on the “Application Profile Page” (right hand navigation column, 2nditem from the top) link to add the new Facebook tab page to your Facebook page.
• Once on the Application Page, click on “Add to My Page” (left hand navigation column) to add the new content to your Facebook Page. A pop up window will appear. Click on the “Add to Page” button adjacent to your Facebook page name.
• Go to your Facebook page. If you don’t see the new Tab Page listed under the logo, you may need to change the order. Simply click on More” then “Edit” and drag your Tab page higher in the order to ensure it is a page that shows in the menu there by default, if you prefer.
• Preview the tab page by clicking on it. Make sure that the layout works the way you want. If it doesn’t, you can always edit your style sheet or page on your own website to ensure it fits properly.