How To Create A Dynamic Fanpage Tab Using The New Iframe Application

Creating Dynamic Facebook Fanpages Tab with Iframes

1. Make a html, php, flash or other type of web page and then upload the document to you server (make sure all the files sits within the same directory). Instead of pasting the code directly into the Static FBML app, the iframe application will be pulling or streaming if you like the page that sits on your server to Facebook. This page will still need to be the correct Facebook size limit of 520px wide.iframe facebook fanpage set up
2. Go to the Facebook Developers website.
3. Create a new app by clicking on the 'Set Up New App' button.
4. Give the new app a name. I recommend naming it what you want the name of the tab to be. Agree to the Terms of Service and click on the 'Create App' button.
create facebook fan page image
5. Now for the fun part - the security check with the annoying unreadable captcha.
6. Next fill in your application profile details.
7. Facebook FanpagesGive your new application a description and upload your own icon or log if you choose to. I recommend at least using the icon because in the list of tabs on your page, your icon will appear rather than the iframe or static fbml icon. This is all we *have* to fill in on the About Tab.
8. The next tab we fill out is VERY important. This is integrating your application into Facebook Fanpages.facebook_fanpage_integration_image
9. Canvas URL - fill out the directory where the file you uploaded is located. This DOES NOT include the name of the file. The URL must have a trailing slash Example: http://www.creative-websolutions.com/creative-fanpage-template/
10. Canvas Type - select, iframe.
11. Iframe Size - unless you want ugly scroll bars select auto re-size. Removing the scroll bars completely requires additional steps.
12. Tab Name - this is the name you want your tab to be called, such as Welcome, About, Products, etc. The first time I tested this my tab name was ignored and the name of the Application was used, which is why I recommended naming the application what you want the tab to be called. I'm not sure why this happened or if I did something wrong the first time so if someone can clarify this, please let me know.
13. Tab URL - this is the name of the page file you uploaded. In my example it is index.html
14. The Click on Save Changes.
15. You will now be on the screen with information about your new application. You do not need to submit it to the directory. Actually, you probably don't want to do this because than anyone could add you custom iframe tab to their page - I don't know why anyone would want to do this but you just never know.final_facebook_fanpage_image
16. Click on the link on the right of the application information page that says 'Application Profile Page'.
17. You now need to add the application you created to your page. This is like adding any Facebook application, such as Static FBML. Click on the link on the left under the profile image that says 'Add to My Page'. If you are an admin for multiple pages, you will need to select the correct page to add the new iframe page application to.
add_new_iframes_app_to_facebook_fanpage
18. Go to your page and you will see the new tab in the list under the page photo and, if you uploaded your own icon, you will see that next to the name of the new iframe page tab.
19. new_facebook_iframes_tab
Click More> Edit at the bottom of the list and you can move the tab higher up the list but it can't go higher than Wall and Info.

new_facebook_fanpages_with_iframes
20. You can make this the default landing tab by going to Edit Page > Manage Permissions.