Twitter search Web Slice
One of the coolest new features of IE8 are Web Slices – portions of a web page you can subscribe to and view updates directly from the Favorites bar.
Instead of keep adding complete pages to the Favorites list for future visits and / or subscribe to rss feeds of a complete channel it is now possible to keep tracking parts of pages, and view them while working on other tasks with out the need to actually re-visit the page.
This can provide web sites with the ability to allow users to track live updates (sports, news, stock exchange data etc), online auctions and much more.
In the following example I will describe a small web form application I’ve created in order to create web slices which shows live updates from twitter according to search terms.
I will be using Twitter’s atom feed and a simple atom2html xslt I found online. (The xslt can be edited for better appearance)
First I’ve created a web site project called TwitterSearchWebSlice.
To the Default.aspx I’ve added 3 control – a TextBox, a Button and a one Literal.
The Button’s click event generates the simple HTML needed for creating a Web Slice:
1: protected void Button1_Click(object sender, EventArgs e)
2: {
3: Literal1.Text=(@"<div class=""hslice"" id=""item123"">
4: <a rel=""feedurl"" href=""default.aspx?q=" + TextBox1.Text + @"#item123""></a>
5: <p class=""entry-title"">" + TextBox1.Text + @" on twitter</p>
6: <div class=""entry-content""></div></div>");
7: }
This code generates the HTML which will display a short text surrounded with the green background of the web slice after the user types a keyword in the TextBox and clicks the Button:
Clicking the Web Slice Icon opens the ‘Subscribe to a web slice’ window of IE8:
By clicking the ‘Add’ button the user approves to add the web slice to his favorites bar, which is available at any moment:
Now, when opening the web slice by clicking it it displays a small window with the content that comes from the web slice defined in the HTML generated earlier:
How is that?
My Default.aspx page had 2 more methods in it:
1: private void getTwitterSearchResults(string query)
2: {
3: XPathDocument xmlDoc = new XPathDocument("http://search.twitter.com/search.atom?q=" + query);
4: System.Xml.Xsl.XslCompiledTransform myXslTrans = new System.Xml.Xsl.XslCompiledTransform();
5:
6: myXslTrans.Load(Request.ServerVariables["APPL_PHYSICAL_PATH"]+"TwitterRSS.xslt");
7: Response.Clear();
8: Response.Write(@"<html><head>
9: </head><body>
10: <div class=""hslice"" id=""item123"">
11: <p class=""entry-title"">" + query + @" on twitter</p>
12: <div class=""entry-content"">");
13: myXslTrans.Transform(xmlDoc, null, Response.Output);
14: Response.Write("</div><span class=\"ttl\">1</span></div></body></html>");
15: Response.End();
16:
17: }
18: protected void Page_Load(object sender, EventArgs eargs)
19: {
20: if (Request.QueryString["q"] != null)
21: {
22: getTwitterSearchResults(Request.QueryString["q"].ToString());
23: }
24: }
Page_Load which calls getTwitterSearchResults in case the request contains a ‘q’ argument in the query string and getTwitterSearchResults which gets the atom feed of the requested search and then uses the xslt to transform it to html.
So what just happened?
Let’s have a look at the HTML of the web slice:
1: <div class="hslice" id="item123">
2: <a rel="feedurl" href="default.aspx?q=windows 7#item123"></a>
3: <p class="entry-title">windows 7 on twitter</p>
4: <div class="entry-content"></div>
5: </div>
The first thing which is obvious here is that this web slice doesn’t contain any content at all! Unlike said earlier this web slice DOES NOT show a part of a page!
So what does it do then? This Web Slice has another control in it – the <a rel=”feedurl”… which indicates the feed source, a dynamic feed source in this case (notice the q argument in the url).
Using this small feature I can now add as many twitter search web slices as I like to my Favorites bar, enabling me to check up on them with out the need to visit http://search.twitter.com every time.
The example project can be downloaded from here.