Some people would probably say I have a bit of a thing for using API's to retrieve data and make something kind of cool...I guess I used the flickr API to create my header...the twitter API to create

twitgeek

...I used the wikipedia API to generate content - ok, ok so those people would probably be right. I also realised when I've gone to use all of these, I've had to search and play around with them quite a bit to get them working so even if it's just for my reference here's a list of a few commonly used ones and how to use them!

With a couple of the ones below, you may need to create a developer account and gain an API key to send in the request, this literally takes 2 seconds and I'll highly recommend you do it! Also just to note I'm only really going to using search functionality through the API's listed below, there are tons of other methods for all of them so go take a look!

Flickr API

The Flickr API is awesome, just return images for any subject, or specific reason. If you need imagery of specific things, why not just use the place where people share things like this. 

    $.ajax({ 
        type: "GET", 
	url:
            "http://api.flickr.com/services/rest/?
            method=flickr.photos.search
            &size=t
            &text=buildings
            &per_page=30
            &format=json
            &api_key=randomAlphaNumericalString
            &jsoncallback=?", 
	dataType: "jsonp", 
	success: function(data){
	    var len=data.photos.photo.length;
	    for(var i=0; i<len; i++) {
		$(yourElement).append('<img src="
                    http://farm'
                    + data.photos.photo[i].farm + '.static.flickr.com/' 
                    + data.photos.photo[i].server + '/' 
                    + data.photos.photo[i].id + '_' 
                    + data.photos.photo[i].secret + '_t.jpg" />');
	    }				
	}
    });

Before you moan about the code indentation above - I've done this for your ease of reading ;). So first of all i everything we send through in the querystring when we make a request to Flickr ro retrieve the images. This is pretty self-explanatory, but notice we've got flickr.photos.search as the method, buildings as the search term, 30 as the amount of images we want it to return, jsonp as the format (this is important) and the api keyin there too. There's a couple of other items, but these are the ones you need to get it working.

Flickr is interesting in how it generates URLs to images, so I've broken this out in the for loop above too, the image is created using the farm, server, id and secret properties of the json object returned which you can make up the URL out of. The only other thing to mention is you'll notice I have '_t.jpg' at the end of this string. this just specifies I want to return a thumbnail size image back. You can use different abbreviations here or none at all to return the image in it's full size.

Twitter API

The twitter API has got to be one of the most commonly used API's out there. The search functionality can be brought right home using something that's actually really simple. 

    $.ajax({ 
        type: "GET", 
	url:
            "http://search.twitter.com/
            search.json?
            &q=test
            &rpp=10
            &lang=en
            &callback=?", 
	dataType: "jsonp", 
	success: function(data){
	    var len=data.results.length;
	    for(var i=0; i<len; i++) {
		$(yourElement).append(data.results[i].text);
	    }				
	}
    });

So above, firstly we're making a call to search.twitter.com - if you use any different methods, I think the actual URL you need is api.twitter.com, it's just the search works slightly differently. As for parameters, here it really is straight forward. We have q which is the search query we're passing through, rrpwhich is the amount of results we want to return and lang which is as you can see set to en, specifying that we only want to return english tweets.

That's actually all you need to query Twitter and get it to send you stuff! It will always return the most recent tweets for the search term, and all we're doing above is accessing the text property of the object returned, as this is the actual tweet data. If you console.log() data.results[i], then you'll see there are loads of cool things returned for you to link up and use straight away. One of the more interesting things is the since_id you get returned, this is when the last tweet was posted, and if you do a bit of javascript logic here, you can retrieve fresh tweets quite easily.

Wikipedia API

You're probably getting the rough idea now that it's really easy to connect to any of these API's and retrieve the data you want. Wikipedia, probably the best resource of information about a certain topic, I mean this site it just fantastic. It's incredibly helpful when you want some information on a certain subject and you don't want to right it/want it to be accurate too. 

    $.ajax({ 
        type: "GET", 
	url:
            "http://en.wikipedia.org/w/
            api.php?action=query
            &list=search
            &srwhat=text
            &srsearch=Bon+Jovi
            &format=json", 
	dataType: "jsonp", 
	success: function(data){
	    var len=data.query.search.length;
	    for(var i=0; i<len; i++) {
		$(yourElement).append(data.query.search[i].snippet);
	    }				
	}
    });

Again, the API for wikipedia is pretty damn easy to use for searching. We have the api.php page which we're making a request to. We're passing in an action of query, a list of search, an srwhat of what we want to return (text) and an srsearch of our search term (Bon Jovi...awesome).

Again, all you need to do is look at the json object that gets returned, there's quite a lot of cool information to play with if you feel the need to, but when you boil it down to the search results you have retrieved back, you just need the snippet property to retrieve the actual text from your search. Little tip: If you want to return this as just text (sometimes you will find it contains html tags), you can use the jQuery .text() methods if you're appending it somewhere else or the .contents().unwrap() methods to achieve this too.

any more?...

Not for now - that's enough of a quick reference guide to get anyone going! There's thousands of API's out there that allow you to interact with them, this should get you going and show you the possibilities that come out of it.