rendering facebook wall in an iframe tab- fb:wall replacement and other options

Question

I am trying to build a Facebook app that generates a tab that includes a page's wall complete with "post to wall" dialog below some content. So far the only app that I know that does that is Bandpage (for example http://www.facebook.com/beyonce ).

It turns down that rendering a wall this way in an iframe is not trivial. Here are some of the approaches I've researched:

1. Using curl to scrape a wall: not only is this an ugly solution, but Facebook protects against that.
2. Using Social Plugins ( http://developers.facebook.com/docs/plugins/ ): Like Box (http://developers.facebook.com/docs/reference/plugins/like-box/) renders a wall, and with "faces" and "header" options turned off + Autoresize js call it almost looks like what I want, but does not include a comment field and the look of the box can't be customized.
3. Using Graph API it's easy to get the wall's feed in JSON, but then rendering and styling it is a nightmare - there must be a simpler way.
4. Using fb:wall - this is deprecated and will be turned off in a few months, but it's not even working as a stopgap. Or does it?
5. Using fb:fan which supposedly takes a css stylesheet.

So - it seems possible to render the wall in a tab since Bandpage is doing it, but how?

Answer 1

This might possibly help you overcome your problem in #3 :

Using Graph API it's easy to get the wall's feed in JSON, but then rendering and styling it is a nightmare - there must be a simpler way.

Trying to "recreate" the look and feel of any good implementation is a hard task.

The following link might assist you with styling your own elements to look like facebook elements.

http://ckrack.github.com/fbootstrapp/

Fbootstrapp is a toolkit designed to kickstart development of facebook iframe apps in both relevant sizes. It includes base CSS and HTML for typography, forms, buttons, tables, grids, navigation, and more, styled in the typical facebook look and feel.

Here are a few examples of the styling :


_{(source: softpedia-static.com)}

Notification boxes

_{(source: softpedia-static.com)}

Form Elements

_{(source: softpedia-static.com)}

In closing I would like to bring to attention the ever nearing deprecation of FBML.
We as facebook developers are solely responsible for keeping up-to-date with the changes that 3rd party API's, on which we base our development, make to their systems. There are no alternatives to FBML, only new (and in many cases) better ways to display/extract data from facebook's servers.

A great place to keep updated on changes and new features would be the Facebook Developers Blog and the Facebook Developers Roadmap.