Showing Your Last Tweet With Javascript

Phil Windley wrote about using Kynetx (his new startup) to show your last tweet on a site. My question was: why would this be better than using plain Javascript to do the same thing? Phil then wrote a follow up post to answer this question: Why Use the Kynetx Rule Language Instead of Javascript?.

I wasn’t convinced by the list in his response, but it did make me wonder what exactly it would take to do this in plain Javascript. Using Phil’s layout as a model here is what I came up with (I added extra spaces to make it more readable):

[sourcecode lang=”html”]
<div id="last_tweet">Loading last tweet …</div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">
</script>

<script>
function twitter_callback_function( tweet ) {
var name = tweet[0].user.name.split(‘ ‘, 1);
$(‘#last_tweet’).html(
‘<div class="me">’ +
‘<a href="http://twitter.com/’ +
tweet[0].user.screen_name + ‘">’ +
‘<img src="’ + tweet[0].user.profile_image_url +
‘" align="left" width="40" border="0"/> ‘ +
name[0] + ‘ on Twitter</a></div><div class="msg">’ +
tweet[0].text + ‘<div class="powered">Powered by’ +
‘ random bits of Javascript</div></div>’
);
$(‘#last_tweet’).addClass(‘last_tweet_box’);
}
</script>

<script src="http://twitter.com/statuses/user_timeline/josephscott.json?callback=twitter_callback_function&count=1"></script>
[/sourcecode]

There are 4 parts to this. The DIV that will hold the last tweet display, a copy of jQuery, a Javascript function to build the last tweet display and the JSON encoded (with callback function and tweet count specified). jQuery wasn’t required, I included make things easier on myself.

With a little extra CSS we can style it to look very much like Phil’s:

[sourcecode lang=”css”]
.last_tweet_box {
background-color: rgb(51, 153, 255);
display: block;
font-size: 12px;
padding: 5px;
width: 165px;

border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
.last_tweet_box .me {
background-color: #fff;
height: 45px;
padding: 5px;

border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
.last_tweet_box .me a {
color: #444;
font-size: 12px;
}
.last_tweet_box .me a img {
border: none;
}
.last_tweet_box .msg {
background-color: rgb(0, 51, 153);
color: #fff;
margin-top: 3px;
padding: 5px;

border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
.last_tweet_box .powered {
color: rgb(170, 170, 170);
font-size: 11px;
padding-top: 5px;
text-align: right;
}
.last_tweet_box .powered a {
color: #ccc;
}
.last_tweet_box .powered a img {
border: none;
}
[/sourcecode]

The result is pretty close visually to what Phil had done.

I’ve talked with Phil about Kynetx and I’ll be watching to see how things develop. There are some interesting possibilities in the area they are working in. But this example of showing your last tweet doesn’t do a good job of showing off their strengths.