New Facebook app - FBML or iFrame?

FacebookApi

Facebook Problem Overview


We're starting a new facebook app (incidentally in Rails), and are faced with the decision to use FBML or to use IFrames. It seems like in the past the consensus generally was that FBML was the better way to go, as it made things more inherently Facebook looking, however it seems now like things on the iFrame side are starting to improve, with one of their main engineers saying we should use iframes

So I'm wondering what have people found to work best. What benefits and drawbacks have you seen with either the iFrame approach, or the FBML approach.

Or, are people using a mix of both. I see there's a way you can override the setting in specific places.


> UPDATE:
For new readers, Facebook has stopped allowing new FBML applications. All new Apps should use IFrames.

Facebook Solutions


Solution 1 - Facebook

I have been developing a facebook app for the past several months, and recently switched our canvas page from FBML to an IFrame. The main reason for doing so has to do with these posts and features:

Lead Facebook Engineer Recommends Developers Use IFrames for Speed, Convenience

XFBML - Facebook Developer Wiki

Basically, you can now embed FBML into an IFrame canvas using the XFBML features that were implemented to support Facebook Connect. IFrames may have performance improvements (although those are probably trashed by the client-side requests required by XFBML, which are a little tedious to set up at first), but the main advantages for me are:

  1. The ability to use jQuery or any other stuff I want.

  2. Useful, relevant ads from adsense, since I no longer have to embed the adsense javascript in its own IFrame.

Once I made this switch, I realized that I was able to get all the facebook data I needed through the API, and take advantage of memcached to improve performance. So, now my canvas is just plain old HTML, without any XFBML.

Hope this helps.

Solution 2 - Facebook

I find FBML easier if you want to make your app look just like Facebook with less effort in duplicating their styling.

Iframes of course give you more control.

So which do you prefer - quicker development or more precise control over the results?

Solution 3 - Facebook

The answer is iFrame for sure. Facebook has phased out the usage of FBML by the end of this year 2010

Solution 4 - Facebook

Seriously, you need to refer to this link before you decide to go with FMBL any further. Facebook will stop allowing new FBML applications by end of 2010. All Tabs Page and Canvas Application will be transition to iFrame apps, no more FMBL, and say GoodBye to FBML! http://developers.facebook.com/roadmap

Solution 5 - Facebook

Well, I'll have to agree with the poster above me and say that FBML makes it much easier to create a facebook-ish style to your application without having to rip off CSS pages ;}

Its also quite great working with the fb tags instead of creating makeshift solutions at times.

Both ways are good, but FBML tends to contribute to more effective and efficient development for Facebook. So, in the general case, I would probably go ahead and use FBML, unless you have some specific need for IFrame fine tuning.

Solution 6 - Facebook

To sum up: FBML makes better and more integrated applications. IFrame is easier to use and gives you more freedom with development (If your application is already sort of completed and you just want to add a "facebook leg" to it - it's very easy.

Solution 7 - Facebook

IFrames seem to work better if you have a client side using Flash or Silverlight. I couldn't get FBML working with a Silverlight client but when I switched to IFrames it worked fine.

Solution 8 - Facebook

I've developed about 30 Facebook apps over the past few years, almost all FBML based. I've also done some Facebook Connect implementations, which is really what you are doing with an iframe app.

By creating an iframe based app, it's not too much extra work to implement Facebook Connect for the main website, if there is one. Your content also isn't sanitized, so you can used standard html, css, and javascript without worries.

On the flip side, you can still only use FMBL/FBJS for the tab content for any application. FBML apps also have the added advantage of being able to do server side processing on initial page load. With an iframe, you need to gather the information client side, then pass it to the server. For example, Preload FQL is a bit more complicated with iframe apps than with FBML apps.

Solution 9 - Facebook

Facebook has announced that they will discontinue the support for FBML sometime soon. So, if you're thinking about developing a long a term project I would definitely start with iFrame. You don't want to go through a change from FBML to iFrames later, it's just a pain.

However, I personally think that iFrames are a lot more buggier than FBML currently, so I'd assume it'd be a while before facbeook stops supporting FBML.

In theory, iFrames is better, because you don't technically lose anything. In addition you can do a lot more things in iFrames that you can't do in FBML. But in practice, like I said, iFrames still contains a lot of bugs.

Solution 10 - Facebook

Using FBML gives you much deeper integration with Facebook as a whole.

Solution 11 - Facebook

mum. With all that said, how come no one has tackled/reacted to the fact that FBML will be obsolete in less than 2 month, no more applications will be able to be built with it, meaning that all the issues with Iframes not being as connective as FBML has been or will be handled. It seems like moving towards the Iframe is the only logical choice, because eventually FBML will not be supported at all.

Solution 12 - Facebook

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

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionCameron BoothView Question on Stackoverflow
Solution 1 - FacebookjmansView Answer on Stackoverflow
Solution 2 - FacebookLeigh CaldwellView Answer on Stackoverflow
Solution 3 - FacebookTeddView Answer on Stackoverflow
Solution 4 - FacebookTeddView Answer on Stackoverflow
Solution 5 - FacebookAlonView Answer on Stackoverflow
Solution 6 - FacebookFaruzView Answer on Stackoverflow
Solution 7 - FacebookNick GotchView Answer on Stackoverflow
Solution 8 - FacebookBrent BaisleyView Answer on Stackoverflow
Solution 9 - FacebookRoozbeh15View Answer on Stackoverflow
Solution 10 - FacebookNick GerakinesView Answer on Stackoverflow
Solution 11 - FacebookAceRockView Answer on Stackoverflow
Solution 12 - FacebookkikiView Answer on Stackoverflow