Facebook – IFrame vs FBML

For last 6 months, I’ve been working on several facebook application development including my personal apps. All the applications I developed using the FBML as canvas page url. For my last 2 applications, GRE + Sun dictionary I’ve to integrate flash application within canvas page. And I found there are several restriction applied to flash player if I use FBML as canvas page. So this is pain.

If you use FBML as your canvas page , you’ve to learn and have to depend on facebook FBML + FBJS. And FBJS is sometimes very bothering because it is facebook modified javascript.

Yesterday, I was porting one of my old flash game into facebook app and I choose IFrame as Canvas page URL of facebook application development. And I found it is very cool  to use IFrame than FBML. Here I’ve given my personal opinions:

  1. If you choose IFrame, you have to learn and spend very few hours of facebook application development.
  2. You could use standard javascript or any javascript framework like jQuery. So, you save time by not learning facebook made FBJS.
  3. You could easily integrate flash app within your IFrame, as like as normal web application.
  4. Using XFBML you can render some useful FBML tags within in your IFrame application.
  5. Developing application becomes faster if you choose IFrame.
  6. You can port any web application easily to facebook application if you choose IFrame.
  7. If you target, you’ll port your application in facebook, myspace or other social site, then choosing IFrame for facebook definately the best idea.

*** This is my personal opinion on facebook application developement.

13 Responses to “Facebook – IFrame vs FBML”

  1. nickpestov Says:

    I have developed all my FB apps in FBML adding ads or Flash animations using IFrame tags inside FBML. This way you get all the functionality of FBML and FBJS plus you can have flashes and/or ads in your application.

  2. mahmudahsan Says:

    @nickpestov
    Yeah, whatever you said that’s true. But when you want to develop an application that you want to port for other social network like myspace then if you use fbml + fbjs, its very problematic and costly to migrate that app. And if you choose iframe it’s very easy to convert your external web application for facebook. But whatever, developing an application for facebook depends on many criteria..

  3. James Shaw Says:

    Good points. Here’s a good run-down on the pro’s and con’s of IFrame vs FBML canvas given some new developments on the Facebook platform:

    http://www.ccheever.com/blog/?p=10

    I’ve been developing an IFrame canvas precisely for the reason of using more general technologies (javascript, jquery, etc) rather than FB-specific technologies. There are some important drawbacks of doing an IFrame canvas, however:

    I find XFBML still lacking (e.g., target=”_top” doesn’t work) and fb:serverfbml not working working properly (FBML UI doesn’t display properly inside the embedded iframe). Also the lack of history support may be bad, depending on whether your app requires the Url to change in the user’s browser.

    The trend seems to be going to going towards IFrame though, once FB addresses the above issues.

    • mahmudahsan Says:

      @James Shaw,
      I’m completely agree with you. In current situation, IFrame + Canvas has still some limitations. However, If any existing web application need to migrate in facebook application then IFrame is better. If any flash game/application is developed for Facebook then IFrame is better. For other type of application that is developed solely for facebook then FBML is best choice for me. :)

  4. ranacse05 Says:

    i did all my apps (more then 15) using FBML . And its nice with google ads ,flash etc . But now i think i’ll give that a shot :)

  5. Vishwa Says:

    I have made two apps for facebook. One with fbml and other in iframe. I think iframe is cool. Fast development + don’t have to learn much facebook app crap :)

  6. ConvertToFacebookApp Says:

    hi all ..i am trying to port my exist web application into Facebook App. So the website can be accessed directly by going to the URL directly or via the Facebook App. However, I am stuck because of what seems to be a simple problem, for which I have no solution.
    I am basically thinking that depending upon where the request is originating from, .i.e, if a user directly comes to my site and access it or if they access my website via a facebook app, I will emit either regular HTML or FBML.

    However, the problem is, is there a clean way of figuring out if the app is being accessed from Facebook ?

  7. tekyin Says:

    Can I ask something? I already create an app using FMBL. I learn it on facebook app example and it works well.. until i want to save my data from my app. I’m putting flash game on my app. my game can’t call “navigateToURL” for redirecting to the same page for submitting score.

    I already search a lot, and come says FB already block it.

    Do you have any suggestion for that problem? Someone says it better use iframe, but i don’t have any idea to start with iframe.. can u send some example or just teach me the the first step to do?

    I’m totaly confused @_@

    Thanks in advance

    • Trevor Says:

      tekyin, take a look at the fbjs:bridge stuff.

      Basically, you can call a javascript (FBJS) function from your flash app to do the navigation for you.

      I’m not 100% positive offhand, but I think it’d be something like “window.location = theURL”.

      There are some good examples of this stuff out there. Look up “callFBJS” / “fbjs bridge” / “LocalConnection”, etc.

      Good luck to you!

  8. brisa Says:

    Hi! I’m porting a flash game to facebook. On my setting, when I point my Canvas Callback URL to the swf living on my server, it works perfect, but when I embed it on a html page, using iFrame, it lacks pulling basic info like user id etc. Can you share a sample of html with swf emebeded? I’m a flash developer but not an iFrame person.

    Thank you!

  9. sandy Says:

    hey…
    I just wrote an application in FBML… and I am trying to rewrite the same in IFrame… I need to connect to my database to extract some user information.
    How do I do it with Iframes???

  10. markos Says:

    hi, man…

    I found your blog accidentally, lol because I was searching about which is better fbml or iframe… well, I read all the post and opinions, but in conclusion which is better? =D

    according to what I read, if you are developing a flash app is better to use Iframe, and if your developing an app that contains some pages is better fbml, right?

  11. Jean-Louis Marin Says:

    I need guidance on getting started with Flash and Facebook.
    Most of the stuff I found was on Flex.

    Is there a video Tutorial or guild out there that can help me to setup the Flash project so 1 – I can interact between Flash and FB 2 – Dump some of the Data to MySQL from the Flash/ FB app .

    It’s been a few years since I’ve touched Flash and need a jump start.

    Thanks!


Leave a Reply