A little earlier in the year, Facebook announced that they would now fully support iFramed applications for use with pages (fan pages, company pages, etc). Despite some support for iFrames previously, you were forced to use their more complicated canvas app support, and viewers had to give permission for the iFrame to load – not the best setup really!
However, now things have got a whole lot easier. Setting up some external content and design for your Facebook page is incredibly simple. While some web designers will turn there nose up at the very mention of an iFrame (they are pretty old school, and can be misused big time), I think they work perfectly with the Facebook page setup. They allow you to use your own HTML and CSS designs, with dynamic functionality (PHP, ASP, etc), JavaScript, basically any kind of web language you require, as ultimately your Facebook page is just displaying a web page elsewhere via a frame.
A few examples… (click screenshot for page link)
Creating the iFrame App
To get started, you’ll need to create a directory on your web host for the Facebook page design. Then design and code your layout, don’t forget that you can use any CSS, JavaScript, etc, that you need.
The only major requirement is that you give your design a body width of 520px. If your layout is any wider that than, it won’t fit within the iFrame on Facebook, causing some ugly scrollbars to appear.
Once you’ve got your design developed, looking all pretty, and essentially complete, you can head over to Facebook. Click here for the “Create a Page” section.
Once you go through the process of creating a page, you’ll end up with the classic generic Facebook stuff. A wall, info section, photos… you know what I mean. What we need to do now is set up the app page.
Click here for the Facebook developers section.
You’ll need to give permission for the development app to access your profile, and then you can start setting up the app by clicking “Set Up New App” at the top right corner on the following page. Give the app a name, accept the terms and conditions, and click submit. Once you’ve finally deciphered what the security code is, you can move on to the next stage.
On the options page that appears, give your app a name (e.g. “Company Name” Facebook) and a description, then upload two icons, one small (16px by 16px), and one large (75px by 75px). You can add the additional details, or skip to the Facebook Integration page (halfway down the left navigation).
The only two things you really need to look at are the “Tab Name” and the “Tab URL”. Just enter a simple name for the tab/page, and then enter the URL where you Facebook Page design is located.
Save those changes, and you’ll be taken to a new page. On the listed navigation to the right hand side, click “Application Profile Page”, where you can customise your app page to the max. The only thing we need to do for now however, is click the subtle “Add to My Page” link to the left. Press the “Add to Page” button next to your profile page, and then the “Add to Page” button next to the app itself.
Potential Problems
If you now head back to the profile page, your app page should now be listed in the link section underneath the profile picture. Click that linkage, and (hopefully) your fully working iFrame should appear, looking nice and tidy. Alternatively, you may have the following problems…
1. There’s nothing there!
Double check that your iFrame “Tab URL” is correct in the app settings. If you’re not linked up correctly, then it won’t work…
2. Some ugly scrollbars are appearing?
As mentioned previously, your design needs to be under 520px wide. However, if the height of the design ends up being over 800px, you’ll find that scrollbars appear again. To fix this, I like to put the ideal height on the body’s CSS, and then overflow: hidden. If this isn’t suitable, you may want to check out this method – click me right now.
Setting the iFrame/App as the Main Profile Page
With your iFrame based app fully working, the final thing you’ll likely want to do is set the app tab as the main landing page for the Facebook profile (instead of the wall).
If you visit the profile page, there should be a nice fat button titled “Edit Page” to the top right. Click that, then on the next page, click “Manage Permissions” to the left. On that settings page, you can choose your new app to be the “default landing tab” instead of the wall. Save those epic changes, and that’s a job well done.
If you just can’t get it work, then there’s the slim possibility that I may be able to help. Comment me below…
