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.
Build the widget
This method builds the HTML. I used the HtmlTextWriter class for this. A safe way to build HTML.
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.
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.
That was pretty easy right?
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?
