When Twitter first came out I signed up but never really caught on until recently. I finally figured out that you really need to follow some people first to get the hang of it. Now I enjoy using Twitter and read peoples tweets using Witty, a WPF Twitter client. Even though I only have a few followers, it still feels like you’re part of a bigger conversation since your own posts get mixed in with the posts of people you’re following.
So now that I’m using Twitter I wanted to put my latest tweets on my blog. Twitter provides a flash based Twitter badge and an HTML version as well, but since I’m a Silverlight developer I thought it would be cool to use Silverlight. I came across Silvester which is a Silverlight Twitter Widget and looks great, but I wanted to create a widget/badge that didn’t require a proxy server.
For my entry in the MIX 10K contest I created a Silverlight feed reader that would allow you to subscribe to a bunch of feeds and it would keep them updated and stored your subscriptions in isolated storage. Since you can’t actually access most feeds directly (unless the host has a client access file which most don’t) I used the Google Ajax Feed proxy to grab all my feeds. This worked great because Google has a client access policy that allows you to get the content plus it puts it all into a single format and returns it as json. All I had to do was generate classes in my application to mirror the object structure of the json and then use a DataContractJsonSerializer to deserialize the json into objects.
So when I started on my Twitter badge I basically took the AgFeedReader project and removed the isolated storage and the feed subscription interface. I really only needed a single feed which I would set using an InitParam. I was able to get my twitter feed using the Google Ajax Feed Proxy, but that proxy only returns the last four items from the feed and omits a lot of the rich data that Twitter provides. So I decided to try another approach.
I started by looking at the script that is part of the Twitter HTML badge. The key was the script they provide to get the feeds which includes a callback parameter. You call the json script and add a callback=YourJavascriptFunction. So in my Silverlight application I add two scripts to the page: the first is the Twitter Json script and the second is a stub javascript function that calls back into my Silverlight application. This gets around the security issue which prevents you from downloading the json directly.
Now back in my Silverlight application I get passed in a ScriptObject which is the json. This ScriptObject is really just an array of Tweets, but since it is an array I actually have to manually convert it to my .Net objects. There is a good MSDN page here that describes all the rules for the interop between javascript objects and .Net objects. Below is my method that gets called from Javascript:
[ScriptableMember]
public void TwitterCallback(ScriptObject json)
{
twitList.ItemsSource = json.ConvertTo<Tweet[]>();
}
The twitList is my ListBox and the Tweet class is a .Net class that I created that mirrors the json returned by Twitter.
In order to display the Tweets I wanted to not just have text but have clickable links. The Silvester Twitter Gadget has a very nice LinkLabel control that will allow you to have a text area with clickable links. So instead of reinventing the wheel I just used that in place of my normal TextBlocks from the AgFeedReader project. I did change one line of code but for the most part it worked perfectly.
Anyhow, it is a pretty standard Twitter Badge right now, but that is only a few hours of work and I’m hoping to add a few more features to it. I’m hoping to put the xap along with some javascript helper files up on a server somewhere so that anyone can add it to their blog, but if you’re interested let me know and I’ll try to get it done this weekend. If you’re reading this through a feed reader, head over to my blog and you will be able to see the Twitter Badge in action.