I needed to bring some images into a thumbnail/gallery and decided to use flickr’s API for easy access. The result is a mini-api which allows you to control your options and parse the images that flickr sends back.

// the class
Request.flickr = new Class({
    Extends: Request.JSONP,
    options: {
        callbackKey: "jsoncallback",
        url: "http://www.flickr.com/services/rest/?"
    },
    initialize: function(params, options) {
        this.parent(options);
        this.options.url = this.options.url + $H(params).toQueryString();
    },
    success: function(data, script) {
        this.parent(data, script);
    },
    imageURL: function(obj) {
        return "http://farm{farm}.static.flickr.com/{server}/{id}_{secret}.jpg".substitute(obj);
    }
});

// how to use
new Request.flickr({
    format: 'json',
    api_key: "e7df6c74d2545f55414423463bf99723", // your api here
    per_page: 4,
    tags: "mountains",
    method: "flickr.photos.search"
}, {
    onSuccess: function(data) {
        target = $("action");
        data.photos.photo.each(function(el) {
            new Asset.image(this.imageURL(el), {
                onload: function() {
                    this.inject(target);
                }
           });
        });
    }
});

Want to see it in action? Here’s jsfiddle…

I wrote this a while back when I needed to do pseudo AJAX calls to a remote host. Due to XSS restrictions and security policies, a normal XMLHttpRequest (XHR) call is not allowed to work across domains or even sub-domains. But Yahoo’s YQL interface kindly lets you GET any URL (which also means being able to submit via GET), irregardless of whether the domain is local or not.

Here is how it works. You need mootools (also download mootools-more as this class will extend Request.JSONP which is a part of mootools-more).

Request.YQLajax = new Class({
    // gets basic info such as country and latitude data
    Extends: Request.JSONP,
    options: {
        log: !true,
        url: "http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20html%20where%20url%3D%22{location}%22&format=xml"
    },
    initialize: function(location, options) {
        this.parent(options);
        if (!location)
            return;

        this.options.url = this.options.url.substitute({location: encodeURIComponent(location)});
    },
    success: function(data, script) {
        this.parent(data, script);
    }
});

// example use to fetch BBC's page
new Request.YQLajax("http://www.bbc.co.uk/", {
    onSuccess: function(data) {
        $("result").set("html", data.results);
    }
}).send();

You can see this in action on mooshell or play with it below. Happy cross-domain ajax-ing.

Nothing like being egocentric so here’s what you can do to add latest tweets of a particular user to your site through mootools. This class totally `forked` from a post by AppDen (Scott Kyle) so feel free to give him some love, he deserves it for being such a bright spark. You can also “play” with this live on JSFiddle

Request.twitterAPI = new Class({
    // return json data with latest tweets form a particular user
    Extends: Request.JSONP,
    options: {
        target: $empty(),
        tweetBits: {
            textClass: "tweetBody",
            dateClass: "tweetDate"
        },
        maxTweets: 4,
        autoLink: true,
        url: "http://twitter.com/statuses/user_timeline/{user}.json"
    },
    initialize: function(user, options) {
        this.parent(options);
        this.options.url = this.options.url.substitute({user: user});
        this.element = document.id(this.options.target);
        if (!this.element)
            return;

        this.element.set("html", "Loading tweets...");
    },
    success: function(data, script) {
        this.element.empty();
        this.parent(data, script);
    },
    showPost: function(post) {
        var creationDate = Date.parse(post.created_at).format("%x %X");
        new Element("div", {
            "class": this.options.tweetBits.textClass,
            "html": this.options.autoLink ? this.linkify(post.text) : post.text
        }).adopt(new Element("div", {
            "class": this.options.tweetBits.dateClass,
            "html": creationDate // + " via " + post.source.replace("\\",'')
        })).inject(this.element);
    },
    addPosts: function(response) {
        if (!response.length || !this.element)
            return;

        response.each(function(post, i) {
            if (i < this.options.maxTweets)
                this.showPost(post);
        }.bind(this));
    },
    linkify: function(text){
        // modified from TwitterGitter by David Walsh (davidwalsh.name)
        // courtesy of Jeremy Parrish (rrish.org)
        return text.replace(/(https?:\/\/[\w\-:;?&=+.%#\/]+)/gi, '$1')
            .replace(/(^|\W)@(\w+)/g, '$1@$2')
            .replace(/(^|\W)#(\w+)/g, '$1#$2');
    }
});

// create an instance
new Request.twitterAPI("D_mitar", {
    target: "myTweets", // target element to 'host' the tweets
    onComplete: function(data) {
        this.addPosts(data); // add all posts to element.
    }
}).send();

Additionally, you can style the tweets by using 2 classes for the element:

div.tweetBody {
    line-height: 1.1;
    font-family: arial;
    font-size: 12px;
    margin-bottom: 10px;
}

div.tweetDate {
    font-size: 10px;
    color: #500;
    text-align: center;
    padding-top: 4px;
}

That’s it, it’s that simple. Happy tweeting.

I needed to get retweet counts as data, as opposed embedding the standard widget that tweetmeme supply.

Turning to their API instead got me joy initially. After a stressful few minutes with a javascript label exception was taking place, it transpired that the tweetmeme API was not returning valid JSON within i’s deignated callback wrapper. Instead, it came back as simple JSON. I was about to give up and write a PHP/curl wrapper when I noticed their ‘format’ is called jsonc whereas I was requesting ‘json’. Oh well, works fine now.

Through extending the mootools’ Request.JSONP class, it’s a manner of seconds to get things going:

Request.tweetmeme = new Class({
    // return json data with extended information of a place / location.
    Extends: Request.JSONP,
    options: {
        url: "http://api.tweetmeme.com/url_info.jsonc?url={location}",
    },
    initialize: function(location, options) {
        this.parent(options);
        this.options.url = this.options.url.substitute({location: location});
    },
    success: function(data, script) {
        this.parent(data, script);
    }
});

// example use
// get retweets for all posts on a page and update the counter. URL in the rel property of the markup.
$$("div.twitterBar").each(function(el) {
    var url = el.get("rel");
    new Request.tweetmeme(url, {
        log: true,
        onSuccess: function(data) {
            el.set("html", data.story.url_count);
        }
    }).send();
});

I hope this helps somebody – once again, how easy it is to extend JSONP and get things done in mootools.

Here’s a novel idea (stolen from AppDen’s Twitter feed fetch class) – extend the mootools-more’s JSONP class and setup some quick and easy geolocation lookups through pidgets.com and YQL (yahoo query language).

Here they are, 3 mini classes. First one uses the client’s IP address (or an optional ip supplied by options) to fetch geolocation info from http://geoip.pidgets.com/. The second instance fetches extended information on a place / city by location from Yahoo’s geoplaces DB, including things like local district, council authority, county and so forth, something that I find useful when creating quick signup forms for users and PAF lookups are not in the budget. The final class was simple test to fetch relevant timezone info of any latitude + longitude combination. It offers local time, offset from GMT or DST etc, but nothing that Date.get(“gmtoffset”) can’t accomplish anyway).

Request.geoLocation = new Class({
    // gets basic info such as country and latitude data
    Extends: Request.JSONP,
    options: {
        ip: $empty(), // default is user but you can lookup anything.
        url: "http://geoip.pidgets.com/?format=json",
    },
    initialize: function(options) {
        this.parent(options);
        if (this.options.ip.length)
            this.options.url = this.options.url += "&ip=" + this.options.ip
    },
    success: function(data, script) {
        this.parent(data, script);
    }
});

Request.getPlaceInfo = new Class({
    // return json data with extended information of a place / location.
    Extends: Request.JSONP,
    options: {
        url: "http://query.yahooapis.com/v1/public/yql?q=select * from geo.places where text='{location}'&format=json",
    },
    initialize: function(location, options) {
        this.parent(options);
        this.options.url = this.options.url.substitute({location: location});
    },
    success: function(data, script) {
        this.parent(data, script);
    }
});

Request.timeZone = new Class({
    // return local timezone related date from geo coordinates
    Extends: Request.JSONP,
    options: {
        url: "http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20xml%20where%20url%3D'http%3A%2F%2Fws.geonames.org%2Ftimezone%3Flat%3D{latitude}%26lng%3D{longitude}'&format=json"
    },
    initialize: function(latitude, longitude, options){
        this.parent(options);
        this.options.url = this.options.url.substitute({latitude: latitude, longitude: longitude});
    },
    success: function(data, script) {
        this.parent(data, script);
    }
});

Here is a quick example of how it can be used on a form. Note you need mootools-more with JSONP for it to work.