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="">

function twitter_callback_function( tweet ) {
var name = tweet[0]‘ ‘, 1);
‘<div class="me">’ +
‘<a href="’ +
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>’

<script src=""></script>

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;

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.

7 replies on “Showing Your Last Tweet With Javascript”

Nice example, but you could make better use of JQuery by using an AJAX-call, like this:

url: "",
data: { count: 1 },
dataType: "jsonp",
success: twitter_callback_function

It’s a great idea and would be even better by dropping jQuery’s 57kb of bloat.

Assign the tweet wrapper element to a variable:

var lastTweet = document.getElementById('last_tweet');

Then you can replace



lastTweet.innerHTML =




lastTweet.className = 'last_tweet_box';

It’s guaranteed to be faster, too!

Hi, I try to do it, but as I can see it doesn’t work if there is a β€œ_” in the twitter username.

Does anybody help me?

Thanks a lot

Leave a Reply

Your email address will not be published. Required fields are marked *