Webinar SignUp

How to Create Facebook iframes

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


Use your preferred program to layout your page tab. Make sure that it is less than 520px wide. Anything wider will give you a horizontal scrollbar and we don’t want that.

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.

Digg This
Reddit This
Stumble Now!
Buzz This
Vote on DZone
Share on Facebook
Bookmark this on Delicious
Kick It on DotNetKicks.com
Shout it
Share on LinkedIn
Bookmark this on Technorati
Post on Twitter
Google Buzz (aka. Google Reader)
Posted in Design & Layout, Developer Tips, Social Media | Leave a comment

Leave a Reply

Your email address will not be published. Required fields are marked *


2 + 6 =

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>