Thanks for this excellent tutorial. At first it looks intimidating, but when I go through it a second time, it's not too bad. What's your opinion of taking an existing landing page and making that your FB tab?

Awesome article and very informative. My question is, What if your facebook fan page is your main website? Once fbml is dissolved is there any way to edit and add your own code to create a new tab and/or landing page?

Excellent tutorial. I just followed the whole thing and successfully added a custom welcome tab to my page. Question: do we know yet if FB will continue to support existing FBML tabs?

Thanks for that. I hope you would do something like this :) 
 
Could you provide additional information how to send those Facebook-queries to get the "fan-status" of a visitor?

Oh, another question. I use HubSpot for a bunch of clients' sites. How do we get a completely blank page within HubSpot in which to create the content for a custom tab? Meaning, if I create a page in HubSpot, even a landing page, there will still be the branding from the logo/header graphic, right? How do I start with a completely blank page in which to enter the content for the custom tab? (Hope this makes sense, and I realize it might be a stupid question!)

Great Tutorial, thanks! I wonder what restrictions Facebook will have on this new iFrame capability... FBML was restrictive (for a reason), and they might not be able to go to a wide open policy in one step, I wouldn't think.

I agree, totally cool tutorial. 
Have one problem. I add the app I created to my page. it shows up. But, I can't make it my landing page and it disappears. See at the end of your video at the 4:30 mark, I don't have the "Edit Page" link at the top of my page. 
 
Thanx 

Can you do the same thing by building a custom Wordpress (or any CMS) website and using it in your iframe?

@Robyn Bradley. In order to have a blank page on our and CMS, go to the page and click Page properties. Under layout, choose "blank_iframe".

@Ron - With existing tabs I would copy and paste the FBML code into a txt file just in case you needed to recreate the page later as an iframe.  
 
 
@Jason - Not sure on that one. I would 100% recommend not using facebook as your main websites page and have a domain and site of your own that you have complete control over. 
 
@Robyn - I will give Mark Zuckerberg a ring and ask (a.k.a. not sure how FBML will be supported in the future) =). As for the Iframe content page in hubspot you would have to make a new page and add an html module at the top and create the html content within it. That should work. 
 
@Jens - Not sure what you mena by your question "Could you provide additional information how to send those Facebook-queries to get the "fan-status" of a visitor?" could you elaborate on this? thanks! 
 
@Pete - Thanks for the commment. I believe you are right, there are soo many things you can do with an iframe that I wouldn't be surprised if they limited it somehow. 
 
@Bob- There is an edit page and edit info button any way to get to any of the setup menus of the page will lead you to the right manage permissions page. 
 
@Paul - You could indeed iframe in a custom build wordpress theme. I don't see why that wouldn't work and is actually a good idea! Need to make it 540px wide though.

How do you edit an App (tab) once you have created it?

great tutorial, I'm new to this site...what a great way to be introduced with an excellent tutorial on facebook and iframes... 
awesome...you just took the fear of mr. mean iframes away...thanks

@Amy - Go to http://www.facebook.com/developers/ and click on the app you want to edit and then click edit setting! =) 
 
@franklin - I'm glad I helped take your fear of Mr. Mean Iframe away! =) Welcome to the blog.

Thanks for this tutorial! It seems pretty simple. I think I'm ok to setup of the app on Facebook. I'm really not tech savvy when it comes to coding outside basic stuff and can't figure out how to create the iframe page on my server assuming that I can create it on my own Wordpress site?? A basic tutorial or explanation on that might be helpful.

Thorough tutorial - thanks you. I actually understand it now. Also, in response to a comment from a user that asked, "What if Facebook is your main website?". If that is the case, it would be good practice to develop your own site. That way you will have total control over it.

I can't believe that Facebook would prefer to have thousands upon thousands custom apps created over the FBML app. I can see them switching to an "iframe" app in favor of the FBML app that would allow you to enter a URL for the tab instead or registering a completely new app every time I need another page. There has got to be another (better) way to accomplish this.

Thanks @Peter. Of course, what would an FB update be without a bug? Have you heard about the fact the iFrame custom page doesn't load properly if you're logged out of FB? See more here: http://bugs.developers.facebook.net/show_bug.cgi?id=15166 
 
Ah, well.

Everything went fine until the end when I tried to access the new tab and got this: HTTP Error 405 - The HTTP verb used to access this page is not allowed.

Excellent How-To. I just hope FB has safeguards to prevent another round of clickjacking of the kind the BBC recently experienced with malicious iFrame injection. http://community.websense.com/blogs/securitylabs/archive/2011/02/15/bbc6-website-injected-with-malicious-code.aspx

Hi, 
 
I meant: How can i determine if a user is already a fan of the page? This was quite simple in FBML but I think I read about a way to send some AJAX-query or getting a snippet of XML, in which even witout any authorization the fan-status of the visitor is included. 
 
regard 
 
Jens

Very nice idea for branding...

The image seemed to cut off a bit at 540px, other websites I've seen recommend 520px?

I applicate your idea for branding... Thanks

How do you remove the custom app from your Page (or add it back again if you've already deleted it)? I've checked under the "manage apps" section of my Page, and the new, custom app is not there. Any help appreciated!

Maybe it's just me, but when I click the video it says "An error occurred, please try again later".

Need help, when I click on permissions to set as default page and changes are saved, it still does not make my custom tab the default landing page, any suggestions? Thank you!

I am trying to set this up now and having problems. We are a Country B&B Inn, and I'm trying to set up a custom tab to take visitors to our online availability calendar. We use Resnexus, a web-based reservations system. When I put our direct link to Resnexus in the canvass URL field, what shows up on the fb page is Resnexus' HOME page, not our availability calendar. I tried putting a redirect page on our own web site & server that would send them to the availability screen, but now I just get an error message when I click on the tab. :(

@Mark That's what I'm getting too. There must be something that I'm missing which has to do with setting up the iFrame and html file on my server?? Hubspot...help please!!

Thanks for a great tutorial. I am getting the following error, though. Anyone that can help on that? 
 
App temporarily unavailable 
Parse errors: 
 
CSS Error (line 13 char 8): Unrecognized at-rule or error parsing at-rule. 
 
FBML Error (line 20): illegal tag "body" under "fb:tab-position" 
 
Runtime errors: 
 
HTML error while rendering tag "link": There is a hard limit of 2 css link tags on profile tabs in order to remain under the IE 31 tag limit. 
 
HTML error while rendering tag "link": There is a hard limit of 2 css link tags on profile tabs in order to remain under the IE 31 tag limit. 
 
Cannot allow external script

@Genevieve, I got mine fixed (see facebook.com/RittenhouseInn. What I had to do was convert the html page on my server to a php page. Good luck, Mark

Great tutorial, however, neither my html or php file will show up on my facebook page.  
 
 
 
All data is correct on formatting, my html and php file displays perfectly on "go to my app" but website error message on specific facebook page.  
 
 
 
help! thank you!

The tutorial is great and straight forward BUT I am also getting the "SERVER ERROR: 405 - HTTP verb used to access this page is not allowed." 
 
Can someone help, please? 
 
Thank you, 
 
~Greg

Shannon, I am having the same issues. Does anyone have an answer? Thanks!

No resolution posted to FB error messages.  
 
Could it be that HUBSPOT only posted a partial tutorial and there's a step missing? 
 
 
 
If so, Hubspot - could you repost the tutorial so we can make it work/? Thanks

Great work. I appreciate your effort. I use a CMS for my website. Apparently, Facebook doesn't recognize the tokens in the cms code. Any ideas on how to get around this?

There's some erroneous info in this post. It's 520px wide for page tab, NOT 540px! 
 
Facebook is NOT shutting down FBML on March 14 (and the date for the changeover is March 10, NOT March 14!). 
 
Rather, Facebook is not allowing the Static FBML app to be added to Pages, if they haven't yet added it, after March 10.  
 
However, Facebook has said it will continue to support existing installations of Static FBML and allow users to add and edit custom tabs. 
 
FBML is NOT shutting down. Facebook says it is "deprecating" FBML and, as Web folks know, deprecation means gradual diminishing support, not termination. The process can take years. HTML tags that were deprecated 12 years ago still work. 
 
I'm not saying the supported FBML tags will be supported for 12 years, but they certainly won't be terminated in months. 
 
Otherwise, a very information post :). 
 
Folks are welcome to read our tutorials on creating an iFrame Page tab app, and adding the Reveal/fan-gating feature to an iFrame tab. 
 
 
 

Really appreciate the tutorial and comments. So far, here's what I've seen: 
width is not a big deal. I used an existing page at first and it just cut off at the 520 / 540 mark. 
 
David Wells did mention that FBML wasn't just going to disappear. 
 
I'm not the only one with the "SERVER ERROR: 405 - HTTP verb used to access this page is not allowed." But, so far, no body has an answer (not even Tim). 
 
Right now I'm trying to find out why my first page (which was actually 800px wide) worked but the one I really want to work did not! Any help would be welcomed. 
 
Thank you, 
 
~Greg 

OK - I've got it working, but I need someone to explain why (please). 
 
I opened the file that I want displayed in FB (myfile.html) with DreamWeaver (or any editor, I assume). I saved the file as an asp file (myfile.asp) in the same location. I then changed the extension in the "Facebook Integration, Tab URL" section from html to asp. Et Voila, it worked! 
 
I'm sure part of this is that I have a Windows server, but I still don't get why the html file didn't work. 
 
Anyone have an explanation (that we all can understand). 
 
Again, thanks, 
 
~Greg

Just to salvage my reputation :-) 
 
I believe David went in and modified his post after my comment. The issues I called out in my comment are no longer in the post. 
 
I appreciate that David did this. Heck, I've certainly had to jump in to one of my posts and fix an error or misstatement someone points out in the comments. I'm just trying to make sure we all have the best and latest info!

OK. Actually, that 540 error is still in the post! 
 
"Try and make this content 540px wide." 
 
This is NOT OK. Sure, you can make your iframed page 540px wide BUT that will pop a horizontal scrollbar and that's not a good thing. 
 
I hope David checks the comments on his post and modifies them to reflect accurate info. 
 
But I no longer see the "Facebook is shutting down FBML" and I'm glad about that!

I can't make it work. When I've added the app to my page and tries to see it, it just shows a blank page in the iframe. Eny ideas??

i press SET UP NEW APP button and it takes me a to page that states "Your account must be verified before you can take this action. Please verify your account by adding your mobile phone or credit card." what in the world is this?

I found a solution to create an iframe application without being a facebook developer . It's very powerful: 
http://www.facebook.com/iframe.apps

Facebook has a bug right now that causes the blank white page when you are using https. iframes are currently broken. Please vote for the bug so they get in gear! http://bugs.developers.facebook.net/show_bug.cgi?id=15200

Awesome tutorial. It cleared up some questions I had. I appreciate the help.

Ya i have a question about the first screen setup "my basic information" who I'm I sending all that to! And why! What does this mean to all of my friend list etc... ???? Is this the only way to do this send all my info out? 
Thanks 
Drifter

I also get the 405 - HTTP verb used to access this page is not allowed. Any ideas?

I think I have the solution to 405 - HTTP verb problem. 
 
I am using IIS. I was setting up my canvas as http://www.myserver.com/Content. 
 
The default page there was an html page (index.html). 
 
Facebook calls the canvas with a POST verb, not with GET. 
 
An static html page is not registered in IIS as a script and therefore can not be called with a POST. Therefore it returns a 405 error. 
 
Try setting your canvas to a directory where a script (aspx, asp, ashx, etc, etc, etc) can get the POST

I thought for sure that I posted this solution earlier. My server is a Windows server and I was getting the "SERVER ERROR: 405 - HTTP verb used to access this page is not allowed." Anyway... here it is. Just save your .html file and change the .html to .asp instead. When I (thought I) posted this before I was asking why this works. I don't know for sure, but it does. Anyone know why? 
 

@Greg: From our iFrames 2011 Tutorial: 
 
If your server returns an error when Facebook tries to load the HTML page into the iFrame, you may need to change the file extension from .html to .php or .aspx (depending on the server platform you are using). When Facebook loads the iFrame, they do a POST to the index page in order to pass some data to your application and it looks like some servers are set up to not allow a POST to a file with the .html extension. We will be taking a look at how to access the data that Facebook passes in the next tutorial, but I wanted to mention this now since it caused issues for some people. 
 
 

nice work.. it's so easy to follow, I did it but my website width is so big.. how can I change it?

One part of this post saved me - thank you!!

Thanks Very helpful info.I'll try out to st my new page now.

Hi, 
 
Thank you for the great video. Unfortunately when I click on Create a new app, I get an error notification. My account needs to be verified before I can use this app. But how does this work? Does it matter that i'm situated in the Netherlands? 
 
Hope to hear from you 
 
Best, 
Renske de Bruine 
rdebruine@virtual-affairs.com

When I click SET UP NEW APP button, it takes me a to page that states "Your account must be verified before you can take this action. Please verify your account by adding your mobile phone or credit card." Is this right?