Retrieving Latest Tweet for a Given Twitter Account

In the past I had the requirement of displaying latest tweet for a given twitter account (e.g. corporate account) in home page of the portal sites, here is a sample approach that you could use when a requirement like this comes in.

Step -1:

Page which hosts the web-part or user control would have to have the following code in place:

Script resources in use:

<script src="Scripts/jquery-1.7.1.js" type="text/javascript"></script>

<script src="Scripts/widget.js" type="text/javascript"></script>

JavaScript function in use:

<script type="text/javascript">
    
        function GetLatestTweet(user) {
            // setting twitter account id
            if (user != '') {
                var tweeturl = 'http://twitter.com/statuses/user_timeline.json?screen_name=' + user + '&count=1&callback=?';

                // using jquery built in get json method with twitter api, return only one result     
                $.getJSON(tweeturl, function (data) {

                    // Get the latest Tweet 
                    if (data[0] != null) {
                        $("#lblLatestTweetHeader").css('display', 'inline');
                        var tweet = data[0].text;
                        // Get the created time of the latest Tweet
                        var tweetCreatedDate = data[0].created_at;

                        // format date and get duration
                        var newTweetCreatedDate = parseTwitterDate(tweetCreatedDate);

                        // process links and reply         
                        tweet = tweet.replace(/(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig, function (url) {
                            return '<a href="' + url + '">' + url + '</a>';
                        }).replace(/B@([_a-z0-9]+)/ig, function (reply) {
                            return reply.charAt(0) + '<a href="http://twitter.com/' + reply.substring(1) + '">' + reply.substring(1) + '</a>';
                        });

                        var dateTimeOfTweet = '<span class="tw_time">' + newTweetCreatedDate + '</span></div>';
                        tweet = '<div class=\"tweetBox\">' + tweet;

                        // output the result         
                        $("#tweet").html(tweet + dateTimeOfTweet);
                    }
                });
            }
        }
        
        // format date and get duration
        function parseTwitterDate(tdate) {
            if (tdate != null) {
                var system_date = new Date(Date.parse(tdate));
                var user_date = new Date();
                if (K.ie) {
                    system_date = Date.parse(tdate.replace(/( \+)/, ' UTC$1'))
                }
                var tweetdate = tdate;
                var month = tweetdate.substring(4, 7);
                var day = tweetdate.substring(8, 10);

                // get Time difference in seconds 
                var diff = Math.floor((user_date - system_date) / 1000);

                if (diff <= 1) { return "now"; }
                if (diff < 60) { return " about " + diff + " seconds ago"; }
                if (diff <= 120) { return " one minute ago"; }
                if (diff <= 3600) { return " about " + Math.floor(diff / 60) + " minutes ago"; }
                if (diff < 7200) { return " about 1 hour ago"; }
                if (diff < 86400) { return " about " + Math.floor(diff / 3600) + " hours ago"; }
                return " on " + day + " " + month;
            }
        }

        // from http://widgets.twimg.com/j/1/widget.js
        var K = function () {
            var a = navigator.userAgent;
            return {
                ie: a.match(/MSIE\s([^;]*)/)
            }
        } ();
</script>

Some styles to make it nicer:

<style type="text/css">
        .footer_heading
        {
            color: #5B4876;
            margin: 0px;
            padding: 0px;
            margin-bottom: 15px;
            font-size: 16px;
            font-style: italic;
        }
        .footer_col
        {
            width: 290px;
            float: left;
            padding-right: 10px;
        }
        .wr_footer a:link, .wr_footer a:visited
        {
            color: #ED81B3;
            text-decoration: underline;
        }
        .wr_footer a:hover
        {
            text-decoration: none;
        }
        .tweetBox
        {
            width: 258px;
            padding: 10px;
            margin-top: 10px;
            font-style: italic;
            font-size: 12px;
            margin-bottom: 10px;
            background: rgba(67, 110, 34, 0.35);
            border-bottom: 1px solid #8F81A1;
            border-left: 1px solid #543F6D;
            border-top: 1px solid #543F6D;
        }
        .tw_time
        {
            color: #ED81B3;
        }
    </style>

Finally, place the control/web part in use in the body tag of the page source:

<div>
        <uc1:latestTweet id="ltweet" runat="server"/>
</div>

Step -2:

Control/Web part with the following code:

#region Constants

    /// <summary>
    /// Markup for latest Tweet.
    /// </summary>
    private const string ScriptFormat = "GetLatestTweet(\"{0}\");";

    #endregion
    
    protected override void Render(HtmlTextWriter writer)
    {
        base.Render(writer);

        var markupBuilder = new StringBuilder();
        var tweeterMarkupBuilder = new StringBuilder();
        
        string latestTweetHedding = "<h1 class=\"footer_heading\">Latest Tweet</h1>";

        markupBuilder.Append("<span id=\"lblLatestTweetHeader\" style=\"display: none;\">");
        markupBuilder.Append(latestTweetHedding);
        markupBuilder.Append("</span>");
        markupBuilder.Append("<p id=\"tweet\"></p>");

        markupBuilder.Append("<!-- ctrl -->");
        markupBuilder.Append("<table class=\"tblSocial\" width=\"90%\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\">");
               
        string userName = "msmriyaz";
        if (!string.IsNullOrEmpty(userName))
        {
            tweeterMarkupBuilder.Append("<script language='javascript'>");
            tweeterMarkupBuilder.Append("$(document).ready(function() {");
            tweeterMarkupBuilder.Append(string.Format(ScriptFormat, userName));
            tweeterMarkupBuilder.Append("});");
            tweeterMarkupBuilder.Append("</script>");
        }
        
        markupBuilder.Append("</table>");
        markupBuilder.Append("<!-- ctrl -->");

        // Finally emit the content
        writer.Write(tweeterMarkupBuilder.ToString());
        writer.Write(markupBuilder.ToString());
    }

Output:

This gives you the output as follows: