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):

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

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:

.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 Comments

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


    $.ajax({
    url: "http://twitter.com/statuses/user_timeline/josephscott.json",
    data: { count: 1 },
    dataType: "jsonp",
    success: twitter_callback_function
    });

  2. True, there are definitely other ways to do this.

  3. 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

    $('#last_tweet').html(

    with

    lastTweet.innerHTML =

    and

    $('#last_tweet').addClass('last_tweet_box');

    with

    lastTweet.className = 'last_tweet_box';

    It’s guaranteed to be faster, too!

  4. In defense of my jQuery laziness http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js only transmits 19kb over the wire πŸ™‚

  5. 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

  6. Odd, any idea which line is causing problems with the _?

Leave a Reply

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

© 2018 Joseph Scott

Theme by Anders NorénUp ↑