UPDATED: Using Twitter and TwitPic, the API’s

twitpic

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 <head> 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.": <br>","",$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!

17 thoughts on “UPDATED: Using Twitter and TwitPic, the API’s”

  1. thats great that you are talking about the twitter api,a good example of searching with the twitter api is on twiogle.com because you can search on twitter and google at the same time.

  2. Hey Mark, love the work you’ve done with the API and over on twipho. I’ve been trying the set up a WP blog that grabs the TwitPic images from the Twitter search ‘#picaday’ and posts each image as an individual blog post. I can use the WP-o-Matic plugin to grab the RSS items, but I was wondering if there was a way to modify your TwitPic script so that the images would display instead of the TwitPic url and if so, could point me in the right direction (sorry my PHP skills are nill). Thanks.

    1. Hi MarBelle,
      If you already have the RSS feed with the twitpic url’s in there your going to need a Regex which detects the links and strips out the ID tag. This is exactly how Twipho works. Uses the RSS feeds and swaps the links for images. As your not advanced with PHP it maybe tricky for you. I might think about writing a plugin for wordpress which does exactly this though. There seems to be a gap there ;-)

      Thats the long answer, cutting it short, you need a regex to detect the links, then simply use twitpic’s API to grab the image thumbnail which is simply http://twitpic.com/show/thumbSize/imageID/

      Additionally, getting the plugin to automatically post the results to wordpress maybe a bit tricky.

    1. Hi David,

      I saw that in your photos you had the word “Chloé”. Twitpic should have converted the accent into a html entity and was throwing an error with PHP. I’ll see if I can update the script and issue a fix for you soon to swap the accent for a html entity.

      Mark

  3. seems it was a problem with the twitpic rss feed. seems the xml parser doesnt like non valid feeds. Sorted out the problem now, it didnt like the é char in the rss feed!

  4. Mark,

    That would be even better as i tend to take a lot of pictures of my kids, I dont really want to be spelling her name wrong :S lol

  5. would it be possible to maybe cache the rss feed, so even if the twitpic server does have problems there is always an available versionof the feed available to use? this would be great, plus it would save bandwidth every time the script was loaded.

    I must say, You have done a great job with this script. I was searching for quite a bit before i found this script, it seems to be the only one thats easy to use and is very small.

    1. Apologies David for the lengthy response time (been very busy with work) but I’ve updated the script accordingly to cache the output and allows you to specify how long to save it for. Regarding the error you had with your daughters surname, that needs to be fixed on Twitpics side. Maybe you should email them with the problem?

      Hope that helps David!

Comments are closed.