UPDATED: Using Twitter and TwitPic, the API’s

Mark Goddard — Wed, 06 May 2009 13:57:51 +0000

UPDATED: I have now added in a few lines to cache the file. This saves on bandwidth and can sometimes speed things up when the twitpic service is running slow, it’s a simple extension to an already simple script.

Most people have become addicted to Twitter, and I’m no exception.

I got an iPhone the other week and have been posting regularly, but there is one thing that is very nice, and that’s the API built into Twitter. It’s quite a nice feature, and one that I have been getting to grips with recently.

I decided I wanted to show my Twitter updates on the new website I have been building and because Twitter supports JSON feeds, I thought I’d have a crack at using jQuery to show these posts.

It’s something that’s actually quite easy. Using jQuery’s AJAX function $.getJSON it meant I could grab the feed and format it how I wished. First off make sure you have included the latest version of jQuery into your website.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">script>

This needs to go where scripts usually reside. In your HTML tag. You will also need to wrap all the below code in the jQuery documen.ready() function.

In this example I only wanted to grab one result so I started off with…

$(document).ready(function() {
var userName = "0100";
	$.getJSON("http://twitter.com/statuses/user_timeline/"+ userName +".json?count=1&callback=?", function(json){
 		var lastTweet = json[0].text;
		var tweetTime = json[0].created_at;
		$("#twitterTxt").html(lastTweet);
		$("#twitterTime").html(tweetTime);
	});
});

That’s it! All nine lines of it. All you need to do it make two divs, one with the ID twitterTxt and the other with the ID twitterTime. You also need to change your username in the variable too.

The only problem with this is the dates. It’s not “twitter timed” at all. We want the “posted 1 minute ago” text we all look for on twitter. Luckily, twitter already wrote a function for this called relative_time() which you can download and use. All you have to do is wrap the tweetTime var with the function like:

		var tweetTime = relative_time(json[0].created_at);

Just make sure you copy in the function to your javascript or include it into the page.

TwitPic API, displaying images

After we have our twitter updates showing on our page we can now show the TwitPic photos too! Every time you post a photo through your twitter updates we can show this on the page as a link. I only wanted to show one image but for this example I have written the code to show as many images as TwitPic allows. I’m not sure of the actual limit but I think ten is a good number. For this example you need to have PHP 5 with SimpleXML. It’s a brilliant function and something which makes using RSS feeds with PHP very easy.

Once again it’s only around ten lines of code, but the results are great.
We will need to start by looking at the format of the RSS feed. Open up http://twitpic.com/photos/0100/feed.rss and analyse it. (view the source if you just see a formatted page in firefox).

We start off using the simplexml_load_file() function in PHP to grab the actual feed:

$username = "0100";
$yourRSS = "http://twitpic.com/photos/".$username."/feed.rss";
$xml = simplexml_load_file($yourRSS, 'SimpleXMLElement', LIBXML_NOCDATA);

Nothing too difficult there except the option LIBXML_NOCDATA. TwitPic gives us the data as CDATA. This option simply strips out the uneeded code.

We then need to grab the actual image a link. Note: TwitPic’s TOS state you must link back to the original TwitPic page, which is fair enough.

$link = str_replace($username.": 
","",$xml->channel->item[$i]->description);

This simply points to the SimpleXML object and grabs the description entry in the RSS. This is placed in a for() loop to loop through the entries. We also have to replace the username and page break that TwitPic outputs, it looks silly otherwise. All we have to do is echo that out and we are done!

To save you all time I have uploaded a full PHP script for you to use. It’s very easy and only requires you to change a few parameters. It will then echo out a unordered list for you to use in your site!

Note: There is now an updated version of the script that you can download.

Download the full PHP file TwitPic API – Simple XML PHP. You can also see a demo of the output.

Hope this all helped you to use Twitters and TwitPic’s API’s!

Website Design Sheffield - Mark Goddard » twitpic

UPDATED: Using Twitter and TwitPic, the API’s

TwitPic API, displaying images