Make Your Own Twitter Badge with jQuery

Blogger, WordPress and many sites often have badges showing the author's latest tweets in a little box. This is pretty simple to do with jQuery, some HTML and CSS, and a server-side proxy to call Twitter's REST API.

Step 1: Install jQuery on your page

"Installing" jQuery is little more than including the jQuery javascript source in the <head> section of your page after you download jQuery from here: 

            <head>
                <script type="text/javascript" src="jquery-1.3.1.min.js"></script>        
            </head>

For this site, I have it in the /js folder and since I link it from the Master Page, this is how I do it so that all content pages that use jQuery will work: 

            <script type="text/javascript" src='<%= ResolveUrl("~/js/jquery-1.3.1.min.js") %>'></script>

Step 2: Create a badge to display your tweets

For this site, it's just a div (with an id of "tweets") within a div styled with rounded corners. I'm using the jQuery Corners plug in, by the way: 

        <div class="sidebarSection rounded">
            <div class="sidebarHeader">                        
                Latest Tweets
            </div>
            
            <div id="tweets" class="sidebarContent">                    
            </div>
        </div>

Step 3: Retrieve your tweets using the Twitter API and display them

We need to write some code to get the latest x number of tweets and write them to the "tweets" div. I've chosen to display just the last five. Here goes, and note that I'm not using the url bit right now (was just a little more data than I wanted to show in my badge): 

        function LoadTweets()
        {
            $.get("FeedServer.ashx?url=http://twitter.com/statuses/user_timeline/*** YOUR ID OR USER NAME HERE ***.rss?count=5", 
            function(data) {
            
                $("#tweets").empty();

                $(data).find("item").each(function() {
                    var item = $(this);
                    
                    var title = item.find("title").text().linkify();
                    var pubDate = item.find("pubDate").text();
                    //var url = item.find("guid").text();
                                
                    $("#tweets").append("<div style=\"margin-bottom:4px;\"><div>" + title + "</div><div class=\"pubdate\">" + pubDate + "</div></div>");
                });            
            });            
        }

This uses my FeedServer handler to make calls to remote websites, so you'll need that or something similar on your web server to avoid javascript security restrictions. If you're using ASP.NET, this will work, otherwise there are plenty of proxy code examples for PHP and the rest: 

        <%@ WebHandler Language="C#" Class="FeedServer" %>

        using System;
        using System.Collections;
        using System.Configuration;
        using System.Data;
        using System.Linq;
        using System.Web;
        using System.Web.Security;
        using System.Web.UI;
        using System.Web.UI.HtmlControls;
        using System.Web.UI.WebControls;
        using System.Web.UI.WebControls.WebParts;
        using System.Web.Services;
        using System.Xml.Linq;

        public class FeedServer : IHttpHandler 
        {        
            public void ProcessRequest (HttpContext context) 
            {
                string url = context.Request.QueryString["url"];
                
                XDocument feedXML = XDocument.Load(url);  

                context.Response.ContentType = "text/xml";
                context.Response.Write(feedXML.ToString());
            }        
        }

To "linkify" the links in each tweet so they are clickable, I found some code that does it nicely a while back. I can't find the source now, but this is better if you use PHP, or if you have time to convert it to javascript: 

        
        String.prototype.linkify = function() {
            return this.replace(/[A-Za-z]+:\/\/[A-Za-z0-9-_]+\.[A-Za-z0-9-_:%&\?\/.=]+/, function(m) {
                return m.link(m);
            });
        };

If you're going to display your tweets automatically on a home page, for example, you can trigger them to be loaded on jQuery's $(document).ready event: 

        $(document).ready(function()
        {          
            LoadTweets();
        });

Step 4: Tweet and refresh the badge!

Look above and to the right and see what mine looks like, and view the source of this page to see all of these code snippets in context. Have fun!