Sunday, October 18, 2009

Building a simple Twitter widget using TweetSharp and ASP.NET

Widgets are a great way to spread your content. Users can just copy and paste some simple HTML or JavaScript, and off they are. By embedding this HTML or JavaScript, content is loaded from another server. Perfect examples are Google ads and Amazon ads.

I wondered how hard it could be. That's why I wrote a small Twitter widget using ASP.NET and TweetSharp. This widget simply shows your Tweets. To keep things simple it's HTML hosted in an iFrame. This solution might be a scalability nightmare tho, because it's executing the code every time the page loads.

When finished the widget looked something like this.

Let's take a look how you can build your own.

Get tweets by username

I used the very Elegant TweetSharp API for this.

   1:  private IEnumerable<TwitterSearchStatus> GetStatuses(string screenName) {
   2:       var twitter = FluentTwitter.CreateRequest().
   3:                                  Search().Query().FromUser(screenName);

   4:       return twitter.Request().AsSearchResult().Statuses;
   5:  }      

Build the widget

This method builds the HTML. I used the HtmlTextWriter class for this. A safe way to build HTML.

   1:   private String BuildWidget(string username, IEnumerable<TwitterSearchStatus> statuses) {
   2:              StringWriter stringWriter = new StringWriter();
   4:              using (HtmlTextWriter htmlWriter = new HtmlTextWriter(stringWriter)) {
   5:                  htmlWriter.RenderBeginTag(HtmlTextWriterTag.B);
   6:                  htmlWriter.Write("My tweets");

   7:                  htmlWriter.RenderEndTag();

   9:                  htmlWriter.RenderBeginTag(HtmlTextWriterTag.Div);
  10:                  htmlWriter.RenderBeginTag(HtmlTextWriterTag.Ul);
  12:                  foreach (var status in statuses) {
  13:                      htmlWriter.RenderBeginTag(HtmlTextWriterTag.Li);
  15:                      htmlWriter.Write(String.Format("({0})", status.CreatedDate.ToString("hh:mm")));
  16:                      htmlWriter.Write(" ");
  17:                      htmlWriter.Write(status.Text);
  19:                      htmlWriter.RenderEndTag();
  20:                  }           
  22:                  htmlWriter.RenderEndTag();
  24:                  htmlWriter.AddAttribute(HtmlTextWriterAttribute.Href, "" + username);                
  25:                  htmlWriter.RenderBeginTag(HtmlTextWriterTag.A);
  26:                  htmlWriter.Write("Follow me");
  27:                  htmlWriter.RenderEndTag();
  29:                  htmlWriter.RenderEndTag();
  30:              }
  32:              return stringWriter.ToString();             
  33:          }

Writing the widget to the page

On the Page_Load event of the Page I get the username from the QueryString, get the statuses for this username, pass them to the BuildWidget method and write that result to the Reponse Stream.

   1:  protected void Page_Load(object sender, EventArgs e) {
   2:              string username = Request.QueryString["username"];;
   3:              if (!String.IsNullOrEmpty(username)) {
   4:                  Response.Write(BuildWidget(username, GetStatuses(username)));
   5:              }
   6:          }

Embedding the widget in a page

I hosted the widget in an iFrame. Set the src attribute of the iFrame to the url of your widget.

   1:  <div style="width:30%;height:100%;float:right"> 
   2:              <iframe scrolling="yes" 
   3:                  style="" 
   4:                  frameborder="1" 
   5:                  src="http://localhost:1524/TwitterWidget.aspx?username=JefClaes" 
   6:                  marginheight="0" 
   7:                  marginwidth="0">
   8:              </iframe> 
   9:          </div> 

That was pretty easy right?

Friday, October 2, 2009


A few days ago, I was playing with some RSSFeeds.

As far as I knew, I had to build an HttpWebRequest, get the HttpWebReponse and parse the response. While searching for the RSS defenition, I realised that this must have been done 1000 times before.

I googled RSS .NET and found one relevant link to a dead/failed open source project. Looking further I came across some articles which used an XmlReader and LinqToXml, but this wasn't what I was looking for. I asked whether there is any good RSS library in .NET at StackOverflow, and one smart guy pointed me to the System.ServiceModel.Syndication namespace. This is new in .NET 3.5 and after looking around some more I found out that it's a pretty unknown namespace.

After playing with it for 15 minutes I was pretty sure this was exactly what I was looking for.

Reading and creating RSS has never been this easy/safe.
You can find how to read an RSS Feed an how to create a new RSS Feed below.

Reading an RSS Feed

Create an RSS Feed

Pretty simple right?