Friday, October 23, 2009

YQL allows you to query the entire web

Leave no RSS, XML document, or web 2.0 api untouched! You literally can grab content from anywhere, turn it into JSON data and display the desired information using my old fiend jQuery.
First off check out the YQL developer console: https://developer.yahoo.com/yql/console/
There you can run test queries and view many community tables using popular api's and file formats doing very useful things. For example, if I want to grab the latest 3 posts from my blog I would just put in:
select * from atom where url='http://graphicallyherdingthemasses.blogspot.com/feeds/posts/default' limit 3

And BAM. Right there in the console you can see the feed. If you select JSON and run the test again and copy the generated url you get this...
https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20atom%20where%20url%3D'http%3A%2F%2Fgraphicallyherdingthemasses.blogspot.com%2Ffeeds%2Fposts%2Fdefault'%20limit%203&format=json&callback=cbfunc
That's great but how can I put that on MY site? Well, first we need to bring in a little jquery to make this JSON url a little easier to work with and read. Here is a little piece of jquery that does just that for you:

$.YQL = function(query, callback) {
    var encodedQuery = encodeURIComponent(query.toLowerCase()),
        url = 'http://query.yahooapis.com/v1/public/yql?q='
            + encodedQuery + '&format=json&callback=?';
    $.getJSON(url, callback);
};

So now all we need to do is grab the data and display it using a little jquery. First we grab the first 3 posts by our YQL call. Once we get the data we are going to find the individual blog posts and grab the title and the link and append it to the called bloggerWidget.

$.YQL("select * from atom where url='http://graphicallyherdingthemasses.blogspot.com/feeds/posts/default' limit 3",function(data){
            var blogPost=data.query.results.entry;
            $.each(blogPost,function(index, blogPost){
                $('#bloggerWidget').append("<li><a href='"+blogPost.link[4].href+"'>"+blogPost.title.content+"</a></li>");
            });    
        });

Here is it in action:


    No ASP, PHP, JSP, proxies, or cross domain errors... You can do this with ANY feed on ANY site. I am currently working on a site that pulls in data from the yahoo weather api, the flickr api, blogger atom feeds, twitter rss 2.0 feeds, and the youtube api.

    2 comments:

    1. not sure clicking on the action link takes to the feed but not the exact page..is that expected ? I don't see an issue with the sample code.

      ReplyDelete
    2. @veechand:
      You we're right. I pulled that code from my client's site and didn't change the data.query.results.entry.link from 2 to 4... My blog feed is slightly different than my client's. Thanks for the heads up! It is working correctly now.

      ReplyDelete