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:
