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();
   3:              
   4:              using (HtmlTextWriter htmlWriter = new HtmlTextWriter(stringWriter)) {
   5:                  htmlWriter.RenderBeginTag(HtmlTextWriterTag.B);
   6:                  htmlWriter.Write("My tweets");

   7:                  htmlWriter.RenderEndTag();
   8:   

   9:                  htmlWriter.RenderBeginTag(HtmlTextWriterTag.Div);
  10:                  htmlWriter.RenderBeginTag(HtmlTextWriterTag.Ul);
  11:   
  12:                  foreach (var status in statuses) {
  13:                      htmlWriter.RenderBeginTag(HtmlTextWriterTag.Li);
  14:   
  15:                      htmlWriter.Write(String.Format("({0})", status.CreatedDate.ToString("hh:mm")));
  16:                      htmlWriter.Write(" ");
  17:                      htmlWriter.Write(status.Text);
  18:                      
  19:                      htmlWriter.RenderEndTag();
  20:                  }           
  21:   
  22:                  htmlWriter.RenderEndTag();
  23:   
  24:                  htmlWriter.AddAttribute(HtmlTextWriterAttribute.Href, "http://twitter.com/" + username);                
  25:                  htmlWriter.RenderBeginTag(HtmlTextWriterTag.A);
  26:                  htmlWriter.Write("Follow me");
  27:                  htmlWriter.RenderEndTag();
  28:   
  29:                  htmlWriter.RenderEndTag();
  30:              }
  31:   
  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?

Get the source.

No comments:

Post a Comment