Check out this post by Hans, who goes into the details of how he built Tetris Flotzam.

Check out some shots of Flotzam at MIX09 up on Flickr. Here's a couple that came out pretty well:

Check out Tetris Flotzam, a special version of Flotzam we shipped for MIX09!

See the home page for downloading the application or the source. Unfortunately, for now, it is a skin that hasn't been integrated into the overall Flotzam application, but we are hoping to get to that.

Recently, I received a request to support the Twitter Search API within Flotzam, which I have done! The Twitter Search API returns some pretty entertaing results -- pick a term and see what people are saying about it at that instant.

It was pretty trivial to add the Twitter Search queries as a provider to Flotzam, although it took a little longer as the Twitter Search API only supports ATOM and JSON, but doesn't support the XML schema used by the other Twitter API, which is what I had been using.  But, with a little data massaging and transformation, I was able to get it working pretty easily.  Because I already am parsing the YouTube data via ATOM, I went ahead and used the gdata .NET library for parsing the Twitter ATOM feeds, as such:

string[] terms = Settings.Default.TWITTER_SEARCH_TERMS.Split(new Char[] { ','});
foreach (string term in terms)
{
    Service service = new Service("TwitterSearchService");
    FeedQuery query = new FeedQuery(string.Format("http://search.twitter.com/search.atom?q={0}",term));
    AtomFeed feed = service.Query(query);
    foreach (AtomEntry entry in feed.Entries)
    { ... }
}

The latest Flotzam source code has all of code if your are interested...

Here is a guide for using Flotzam at a conference:

Flotzam at a conference is fun. It gives the audience the ability to immediately participate in the event as well as on the blogosphere. Their photos, twitters, etc, show up on the big screen.

If you would like to see Flotzam in action, you can (1) install the application from http://www.flotzam.com or (2) watch a video about the application at http://flotzam.com/video.htm. You can also watch a video that discusses the Mix Flotzam Restyle contest and the winners here: http://visitmix.com/blogs/News/Flotzam-Design-Contest-Winner/.

If you aren’t familiar with these social networks used by Flotzam, here’s a brief intro of what they are and why they are interesting.

• Twitter allows you to text messages from your phone to the Twitter service, which then get posted on the web. So, by displaying Twitters from conference attendees, you can see almost real time information about what people are saying about the conference.
• Flickr and Facebook integration is about allowing attendees to upload their photos of the event to their service and then Flotzam will pull and display their photos.
• Digg is service that allows the community to post interesting stories and then vote on their relevance.
• RSS is a syndication format supported widely – you can display any RSS feed through Flotzam.
• YouTube is a site that allows people to upload video.

The end result is that Flotzam aggregates all these networks and does a fun visualization.

A few things to note:

· If there is another social network you want to add to Flotzam, it requires more code to be written. There’s an explanation of how to do it here: http://flotzam.com/blog/post/How-To-Add-A-New-Datasource-To-Flotzam.aspx. An easier route to getting different data into Flotzam is if that social network supports RSS.

· Because Flotzam pulls data real time, there is the chance that inappropriate content could appear on the screen.

If you would like to use Flotzam for your conference, you need to do the following:

1. Download the .exe build of Flotzam here:  http://www.flotzam.com/download/flotzam.zip

2. You should have a machine with w/2GB RAM and a video card of 256MB. Be sure to test on your hardware to catch any issues in advance.

3. The machine must have network access. Flotzam does not do well with intermittent connectivity; if you can’t guarantee a stable connection to the internet, don’t use Flotzam.

4. Determine what feeds you want Flotzam to display.

Note that you will need to somehow communicate to the attendees how to access the services you set up. Another option is to not let attendees know about the tags and simply have your conference folks twitter and upload photos.

Here are the steps to configuring Flotzam:

1. All settings can be changed by clicking SETTINGS AND OPTIONS in the upper left corner.

2. For example, if you want everyone who is at the event have their Twitters appear, you can create a Twitter account such as myconference, let people know about it, and then specify for Flotzam to “Watch My Followers” in the Twitter settings panel, providing the username and password for the myconference twitter account.

3. If you set up a Facebook event for your conference, you can enter the Event ID in the Facebook settings panel. The Event ID found in the URL when on the Facebook event itself, so if the URL for the event is http://www.facebook.com/event.php?eid=2367953648 the event id is 2367953648). You'll also have to provide you credentials to Facebook.

4. If you want to add a different Flickr tag, you can modify the tag in the Flickr settings Panel.

5. You can specify a DIGG setting and a YouTube tag.

6. If you want to manage which RSS feeds show up, you need to do that management in Internet Explorer.

7. Lastly, if you want to have different skins show up, you can check that box in the general settings tab.

I realized that the code base I used for Flotzam for the MIX conference was not posted and there are a few interesting things that have been updated in the code that people may be interested in:

• For MIX, we displayed photos that were posted to the MIX event on Facebook.  How do you get all photos from an event from Facebook? Officially, there isn't an API for this.  Unofficially, it can be done through FQL by simply calling photos.get and passing the event id.  I extended the Facebook .NET wrapper and added a method called GetEventPhotos that does this. The reason this is interesting is if you want to use Flotzam at a conference and want to access the photos from a Facebook event.
• I also added a setting that allows you to choose whether to show photos from Facebook friends or show photos from an event or both.
• Another thing we did at MIX was to show all twitters from anyone following the event.  I didn't have this officially wired up in the settings, but now it is.  It is a little confusing: if you pick, "watch me and my friends" you are seeing the tweets of people you follow. But if you pick "watch my followers" you are getting the last tweet of anyone who is following you.  It is kind of goofy because the APIs return a different schema depending on which you pick, so the code has to do some casting between .NET types, since I serialize everything.
• I've also added a setting so you can either choose to have the skins randomly toggle or you can just stick with one skin.
• I've also gone ahead and uploaded the source code with the .PNG sequences done by Jeremiah Morrill.  With all those images, the download is 50 mb.  As such, I've made one version of the project that doesn't have the .PNG sequences which is smaller.

Download the code with PNG sequences.

Download the code without PNG sequences.

We just announced the winner of the Flotzam Redesign contest.  Thanks to everyone who submitted an entry!  And, you can download the latest version of Flotzam to play with (some of) these skins yourself...

For those of you remixing Flotzam, here's a short screencast (6 minutes) that shows how to reskin the default templates.

Here's Part 2 of the screencast for changing the animations of Flotzam: