Make A “My Latest Tweet” Widget For Your Site With PHP or JQuery

Not all twitter API methods require OAuth, the user time line method is one that doesn’t. A good integration of this method can be seen in CSS-Tricks’ footer.

CSS-Tricks' footer - Chris Coyier's last tweet widget

How The User Time Line Method Works

Every time you make a call to the API URL you get a response that contains tweets from the user you specified in the URL.

The syntax for the URL is the following.

http://api.twitter.com/1/statuses/user_timeline/username.format

You can choose from four formats for your response.

  • xml
  • json
  • rss
  • atom

Reading Tweets With JQuery and JSON

We need a div to put the tweet in and JQuery of course, so the mark up looks like this.

<div id="last tweet">

</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// get the last tweet
});
</script>

We are going to need to use JQuery’s $.getJSON to get the last tweet, this will be the first tweet in our response.

Add the following code in your ready function, don’t forget to replace the username with your own.

var username='webhole'; // set user name
var format='json'; // set format, you really don't have an option on this one
var url='http://api.twitter.com/1/statuses/user_timeline/'+username+'.'+format+'?callback=?'; // make the url

	$.getJSON(url,function(tweet){ // get the tweets
		$("#last-tweet").html(tweet[0].text); // get the first tweet in the response and place it inside the div
	});

Explanation:

getJSON needs a URL and callback function with a parameter to store the response. As you can see I have named the parameter appropriately. Since our last tweet is the first tweet in the response’s associate array we can use tweet[0] .

Twitter will give you more than just the tweet though, it will give you a user name, reply to user name, tweet id and a lot more stuff. The actual tweet is referred to as "text" which is why I used tweet[0].text .

Learn about reading JSON with JQuery in detail .

Reading Tweets With PHP and JSON

If you prefer PHP or want to do something server-side with the tweets, you can use PHP just as easily. In fact, the PHP code you need is very similar to JQuery’s.

You will use file_get_contents with the same URL as above. Next, you will need to decode the JSON into a variable. Decoding JSON sounds like it’s a hard thing to do, but PHP a neat function called json_decode that you can use.

Without further a due here is the code.

$username='webhole'; // set user name
$format='json'; // set format
$tweet=json_decode(file_get_contents("http://api.twitter.com/1/statuses/user_timeline/{$username}.{$format}")); // get tweets and decode them into a variable

echo $tweet[0]->text; // show latest tweet

Explanation

The same rules apply to PHP as with JQuery: the $tweet variable represents all the tweets, but we are looking for text

$tweet[0]->text

Read more about PHP and JSON

Reading Tweets With PHP and XML

If you prefer to work with XML we’ll need to make only a few changes to the previous code. First change the format. The replace the functions json_decode and file_get_contents with simplexml_load_file.

<?php
$username='webhole';
$format='xml';
$tweet=simplexml_load_file("http://api.twitter.com/1/statuses/user_timeline/{$username}.{$format}");

echo $tweet->status[0]->text;
?>

Explanation

simplexml_load_file returns the XML as an object, but this time the parent container for each tweet is <status> and that is why status is used to set the tweet this time.

echo $tweet->status[0]->text;

Learn more about parsing XML with PHP

That’s it for this tutorial, check out twitter’s API to see what other method they have and go make some cool apps :)

blog comments powered by Disqus