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!
18 Comments
Nice will defo b using this for my new personal website
w0w i can´t download the php file example… can u send me?
thanks!
My bad, I re-upped it as a TEXT file. Should be ok now, just save it with a .php extension.
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.
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.
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.
Thanks for the reply (and advice).
If you ever do get round to writing a plugin, I can definitely see it getting lots of use :-)
hi, i have just tried this out onmy website, but i keep getting errors, the server owners claim that simpleXML is installed, butI dont know :s, I have used default script from your website with no luck. Could you tell me why its causing the following errors? http://www.millerswebsite.co.uk/twitpic.php please?
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
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!
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
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.
so whats going to be happening with this then?
such a great design, really very nice work.
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!
Hello I’ve tried your script and it’s not working for me you can take a look at : http://aminebenboubker.com/twitpic/
Help me as I want to display the pictures,
Thanks in advance and great job on the script.
Frankly, I do not understand the value of twitter. I read one market research article that revealed that nearly half of all tweets was “pointless babble.” Only 9% had “pass-along value.” Possibly only 4% was “news.” Okay, I’m a senior citizen, but I get Instant Messaging. I get MySpace, FaceBook and Friendster. Heck, I even get an occasional rap song, in the event the beat and melody are just right. But this SMS online seems a little too thinly clever — a bit excessive fad and flash in the pan, for my tastes. Possibly there’s a Zen side for this. Someone care to Enlighten me?
I was at a seminar once (can’t remember what it was about), and invited one of my employees to attend it with me. There were maybe 100 or so people in the room, and at the end the hosts went into the typical Q&A session. As I raised my hand to ask a question, my associate looked at me with deer-in-the-headlights eyes and asked, incredulously, ‘Are you really going to ask a question?!?’ To her it was simply inconceivable to do something like that. There is an entire block of readers that will NEVER consider leaving a comment, it’s just not part of their personality style.
One Trackback
[...] TwiPho is a Twitter Photo Search engine. It uses Twitters brilliant API (which I wrote about Wednesday) including TwitPic’s API, img.ly’s API and yfrog’s API. All Twitter image hosts. [...]