Articles from Smart Ideas are now also available on Smart Ideas on Facebook. The users can browse the articles by categories and by tags. They can also search articles using search terms. Users can publish feed stories easily into their profiles based on articles here. They can either indicate they like an idea (Like link) or they can describe their experience with an idea (Tried link).
Smart Ideas on Facebook is a canvas application. www.ideas-smart.com serves FBML (Facebook Markup Language) to the Facebook canvas. FBJS (Facebook JavaScript) is used to do the animation and create feed stories.
The implementation consists of a Facebook module that generates FBML for the canvas pages and handles AJAX calls, and a Facebook theme that contains most of the FBML markup and several overrides of theme functions from other modules. This was taken over from Dave Cohen's Drupal for Facebook.
In Drupal, many pages display list of teasers. When a title is clicked, a full view of the node is displayed on a different page. Smart Ideas on Facebook displays list of teasers on Categories, Tags and Search tabs. Each teaser contains a more » button. When clicked, the teaser shrinks and the full node view reveals. There is a « less button included in the full view that shrinks it and reveals the teaser. The animation is done using Facebook animation library.
Here are some observations and some caveats I came across with possible solutions:
- Unlike Drupal, where the API is nicely versioned, the Facebook API changes progressively. Someone who works for Facebook told me that they make changes to the web site in small steps. It seems that this approach is also used in the APIs.
- So when you look for information on Facebook app development on the Web, be aware that it might be obsolete.
- Having the Facebook canvas functionality, www.ideas-smart.com serves pages using two different themes. How is this done? The Facebook module sets the $custom_theme global variable to the name of the Facebook theme.
- Since this is an FBML application, absolute URLs have to be used everywhere. When relative URLs are used, Facebook sometimes displays useless URLs. Fortunately, most of the code in Drupal core and the modules that generates URLs is themable. Thus it was pretty straightforward to override them in the Facebook theme.
- Various Drupal modules add CSS and JavaScript files. If you have an FBML application, those CSS and JavaScript files should not be included in the FBML markup. The Facebook theme strips all those files and keep only its own CSS and possibly FBJS.
