In February Facebook announced they would be switching from FBML to the use of iframes on pages. Previously, FBML allowed limited functionality within a page tab. Now, with iframes, a self-hosted page can provide some interesting elements to a once static page tab. In this post, we’ll go over basic setup and some asp.net-specific issues we ran into when creating our own AspDotNetStorefront page.
First, you’ll need to go to the Facebook Developer website and set up a new app.
If you’ve never created an app in Facebook, you’ll need to verify your account to gain developer status. It’s not as complicated as it sounds.
You’ll need to verify by phone or credit card. Once your account is verified, the fun begins!
Step 1 :: Layout Your iframe – Max Width = 520px Wide
Step Two :: Implement Your Page – HTML -
Implement your page as you would any other html-based document or page. You can link a stylesheet, images, go crazy!! This isn’t FBML anymore, however, so you’ll want to simplify your html doc by just wrapping your code in standard <html>, <head> and <body> tags. Doctype is not necessary here. Save the file as default.aspx
Step Three :: Host Your File
Upload/ftp your files, images, and stylesheet(s) to your hosting account or server in a new directory/folder.
Remember the path (url) as you will need to tell Facebook later where to find your hosted page. You can see the actual page here: http://www.aspdotnetstorefront.com/facebook/
Step Four :: Set Up Your iframe App in Facebook
Go to the facebook developer page and click on the ‘+ Set Up New App’ button in the upper-right hand corner.
Under the ‘Web Site’ tab, paste the url in the ‘Site URL’ input box. Facebook will only allow urls specifying the directory, not the actual filename of your page (default.aspx) . Next, select the ‘Facebook Integration’ tab.
Give your ‘Canvas Page’ a name – this is what facebook is going to use to reference your file, in our case, we just named it ‘aspdotnetstorefront’. Canvas url should be the url where your file is hosted – so, ‘http://www.aspdotnetstorefront.com/facebook/’ in our case. Name your tab, and point the tab url to your hosted file as well. After you save, you’ll be redirected to the app page.
Select ‘Application Profile Page’ from the right-hand menu.
Select ‘Add to My Page’ from the left-hand menu.
Select the page you’d like to add the app/iframe to.
Step Five :: Check to See if it Works
Awesome! There it is! Check out the live version here…
Some Roadblocks We Ran Into :: What is this 405 Error Thing?!?
This where we get into asp.net-specific issues. Without going into confusing details, make sure your file is named default.aspx instead of index.html. Facebook will not post an .html page from an asp.net environment. It may take a little while for Facebook to populate the iframe app to its servers. We got a Facebook logo and a ‘go to Facebook’ link while Facebook populated its servers with our app.