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:

1. Download the latest Flotzam source code and open Flotzam.sln in the Blend 2 December Preview
2. Hit F5 to see the application working.  You should see different "flotzams" appear on the screen. By default, you will see public Twitters and Flickr images as well as videos posted to YouTube tagged MIX07.  You can change what Flotzams you get (personalize them, etc.) by tweaking the settings.
3. As you can see, the Flotzams aren't pretty.  If you want to see prettier Flotzams, you can change the skin in the "General" tab of the settings. These are skins that Tim Aidlin made.
4. So now it is your turn to make a skin.  In Blend 2, go to the Resources tab and find the file new.xaml.  Expand it and you should see seven templates.  If the Resources tab is blank, go to the Project tab and open the file Window1.xaml and then go back to the Resources tab and you should see new.xaml.  It should look like this:

5. Open DIGG_TEMPLATE.  There you see the fields you have to work with in the designer.

6. Expand the stack panel. Inside the StackPanel you can see the visual tree with the different fields you have to work with.

7. Double-click [TextBlock] "Username".  Change to the Properties tab.  Notice that the Text field (under Common Properties) is highlighted in yellow. This is because the Text field has been databound to the Username field.  DON'T MESS WITH THE DATABINDING.  MESS WITH ANYTHING AND EVERYTHING ELSE.  For example, you can copy the whole TextBlock into a different container; you can change any of its other properties, just don't mess with any field that is highlighted yellow.

8. There is a default animation that has been applied to each of the templates.  You can see it by clicking the >> in the Objects and Timeline pane. You will now see OnLoaded1.  This animation is very simple: it just fades out the entire Canvas over 5 seconds.  To remove this animation, just go to the Triggers pane and click the minus arrow.

9.   By default, when the Flotzams are placed on the scene, they are placed at random.  This is done from code.  If you want to turn this off, so that they always enter the stage right in the middle of the screen, open Window1.xaml.cs and on line 27, change the randomizerFlag to false.
10. You are also welcome to change the background of Window1.xaml.
11. Once you have finished your Remix, send just the new.xaml file (and any other files you may have added or changed) to flotzam@microsoft.com.  Send any questions you may have to flotzam@microsoft.com. 

I just realized today that YouTube has an API, which is super simple through ATOM.  Unfortunately, their UI doesn't really expose this, but it is trivial to subscribe to someone's feed or someone's favorites on YouTube by simply subscribing via Internet Explorer to the correct url.  For someone's feed it is:

http://gdata.youtube.com/feeds/videos?author=username

or 

http://gdata.youtube.com/feeds/users/[username]/uploads

 

For favorites it is:

 

http://gdata.youtube.com/feeds/users/[username]/favorites 

I need to add a little UI to Flotzam to make this easier for the end user, but the possibilities are curious...

Having just added DIGG to Flotzam, I wanted to document how to add additional datasources:

how to add a new data source to Flotzam

1. Create new data model class that derives from DataModel in data.cs
2. Add this class as a new Object Data Provider to datatemplates.xaml
3. Add new member variable for data at the top of window1.xaml.cs

4. Load member variable and activate it at line 194 of window1.cs.xaml
5. Add to Settings
 5a. Create new tab for settings
 5b. Add settings to Settings Property in Visual Studio Properties
 5c. Update save_click for when user changes settings (window1.cs.xaml line 82)
 5d. Update settings form in window loaded
6. Make a new datatemplate (or else muck with the data model to trick the data binding into working by renaming properties) in datatemplates.xaml
 6a. Do databinding
7. Update PickPanel() method in window1.xaml
 7a. increase random picker by one
 7b. add to giant if statement
 7c. add member variable to count the items
 7d. update line 299 and add that setting to the condition to prevent infinite loop

I think that's it!