If you are a blogger and using Twitter, then you must want to show some of your latest tweets on your blog space. I do have a custom widget for my blog which can display 3 of my latest tweets and I can customize it show more of my tweets. But the widgets cannot be used in every scenario and this is why some people find it difficult to use the widget provided by Twitter to display their tweets. What if they want to show their last tweet on the top of the page inside a DIV? A friend of mine set up his new WordPress blog and want to have a DIV on the top of the page which displays his last post and that he can customize. By customize I mean that he can set the number of tweets he wants to display, can show his profile picture and get his last tweet. The script file contains only three methods at this moment. I will add some other functions later on.
How does this work?
It is just a javascript file and there is nothing new about it. What you need to do is to have a DIV or any HTML element or ASP.NET server control with id as 'tweet-div'. For this example I am using a DIV to show my tweets. I choose DIV because I can set it position to absolute and set on the image to show my latest tweet on an image I got from Iconsinder. It is a pretty twitter imageand there are other images also which you can use, but for non-commercial purpose only. First, take a look at the jQuery script I wrote to do all the stuff:
function GetLastTweet(UserName) {
url = 'http://api.twitter.com/1/statuses/user_timeline/' + UserName + '.json?callback=?';
$.getJSON(url, function (tweet) {
$("#tweet-div").html(tweet[0].text);
});
}
function GetTweets(UserName, NoOfTweets) {
url = 'http://api.twitter.com/1/statuses/user_timeline/' + UserName + '.json?callback=?';
$.getJSON(url, function (tweets) {
for (var i = 0; i < NoOfTweets; i++) {
$("#tweet-div").append(tweets[i].text + "
");
}
});
}
function GetProfileImage(UserName) {
url = 'http://api.twitter.com/1/statuses/user_timeline/' + UserName + '.json?callback=?';
$.getJSON(url, function (image) {
$("#ProfileImage").attr('src', image[0].user.profile_image_url);
});
}
To communicate with the Twitter API, I am using JSON. Plan to go for XML only if you are using it on the server side code. As you can see it is pretty easy to work with JSON in jQuery. The methods:
- GetLastTweet(UserName) will get the last tweet of any user. Pass the twitter user name as a parameter.
- GetTweets(UserName, NoOfTweets) will get the specified number of tweets for the user. the first parameter will be the twitter user name and the second parameter will be the number of tweets you want to display.
- GetProfileImage(UserName) will get the profle image of the user.
*Note: Please change the element ID in the script file according to your element id on the page.*
And just in case if you are feeling lazy to write the the HTML markup:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>@prashantmx on Twitter!</title>
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script src="Scripts/Tweet.js" type="text/javascript"></script>
<link href="style/style.css" rel="stylesheet" type="text/css" />
</head>
<body onload="GetLastTweet('prashantmx');">
<img src="images/1293447412_bird_sign.png" alt="twitterbird" />
<div id ="tweet-div">
</div>
</body>
</html>
I am using an image of twitter bird to show my last tweet. And here is what my last tweet looks like:
If you want to use the below image or other images like this then go to Iconfinder. There is a good collection of twitter birds images as shown below and choose which best suites your requirement.
Download: Twitter.zip (159.92 kb)