Facebook Page Tabs with Iframes: Stage 2

Apr 15, 2011 // by Jennie Excell // Blog, social media // No Comments

Once you have built the content for your custom tab, you need to create an iframe app in order to display that content within your Facebook Page. You’ll need to follow the same process and create an app for each new tab that you want to add.

Let’s get started:

* Note – on the 29th June 2011 the interface changed. The below still applies, but the navigation to various sections is different. See this post on the new Facebook Developer App interface.

1. Go to the Facebook Developers site and register.
2. Click on “Set up New App” in the top right hand corner of the screen.
3. Name your application.

4. In the about section, give your tab a description and upload an icon and logo. The icon will be displayed next to your tab name in your Facebook Page menu on the left hand side.

5. Now for the important bit. The Facebook Integration tab:

Canvas URL – this is the address for where the page that you created is uploaded. DO NOT include the name of the file here.
Iframe Size – select auto-resize to avoid scrollbars. To completely remove scrollbars you’ll need to add some extra code to you HTML page which Kim Woodbridge provides here. If you kept to 520 pixels by 800 when creating your page, you shouldn’t have a problem.
Tab Name – the name of your tab.
Tab URL – here is where you put the name of the page that you uploaded to your FTP.

Save your app.

If you want your app to be available to be downloaded by others then sumbit it to the directory by clicking the “sumbit it” link.