Using jQuery To Get Your Tweets

27. December 2010 16:10

API Jquery  6 Comments

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 + "<br/>");
        }
    });
}

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. Check it out here. 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.

P.S. I will be adding more functions to the script file at the later stage.

Demo: http://demo.midnightprogrammer.net/jquery/twitter/twitter.htm

Download: Twitter.zip (159.92 kb)

Currently rated 1.4 by 5 people

Comments (6)

healthdurbar com healthdurbar com
1/13/2011 2:56:18 AM #

cool jquery script to access tweets

Mohammed Mohammed
11/13/2011 3:55:08 PM #

Hi, Nice plugin. Is there any way of rotating a few tweets with a fading effect?

Prashant Prashant
11/14/2011 8:56:57 PM #

There are not just FadeIn or FadeOut, but there are plenty of plugins out there which allows you to apply amazing text effects. But if you are only looking fadein along with rotating plugins then use this code: <div class="port" style="width: 520px; height: 400px;margin-top:10px;"> <h2>Twitter Live </h2> <script src="http://widgets.twimg.com/j/2/widget.js"></script> <script> new TWTR.Widget({ version: 2, type: 'search', search: '#wp7', interval: 6000, title: 'Windows Phone 7', subject: 'WP7', width: 520, height: 270, theme: { shell: { background: '#ffffff', color: '#252525' }, tweets: { background: '#ffffff', color: '#252525', links: '#00a2ca' } }, features: { scrollbar: false, loop: true, live: true, hashtags: true, timestamp: true, avatars: true, toptweets: true, behavior: 'default' } }).render().start(); </script> </div>

Dheeraj Dheeraj
1/23/2012 10:06:10 AM #

Hi.... plz tell me how to get tweets with proper user name and profile picture thanks, Dheeraj

Julia Julia
5/14/2012 6:00:46 PM #

Thank you for the script! Saved my day! Cheers

Raul Raul
8/10/2012 11:02:12 PM #

With this script you only can obtain the first twenty tweets, someone knows how to obtain at least 50 tweets?

Add Comment

Visit blogadda.com to discover Indian blogs Computers Blogs