Finding an RSS feed on a site can sometimes be a hassle. Browsers have started introducing a feature that will include an RSS icon in the address bar when the browser finds the site has an RSS feed. I thought it would be nice to allow users to just enter in a web address and let us do the work finding the RSS feed for the site. I looked into how browsers were accomplishing this and found that browsers look for a <link> tag in the <head> of the document with the type attribute of “application/rss+xml”.
Now that we know what to look for, how do we go about determining if the website provided has the correct <link> tag? I decided to let YQL do the work for me. I loaded up the YQL Query Console and began testing some queries. On the right hand side, there are different Data Tables you can use. I scrolled down to “data” and selected the “html” option which allows you to query the html of any site.
The example that you start out with looks similar to this:
select * from html where url="http://finance.yahoo.com/q?s=yhoo" and xpath='//div[@id="yfi_headlines"]/div[2]/ul/li/a'
From this example it is easy to see which URL is being queried and the XPath that is being used to find elements on the page. If you aren’t familiar with XPath, check out the W3 XPath documentation. So now we just plug in the URL of the site we want to search and change the XPath to whatwe need to use to find the <link> elements. Now the query looks like this:
select * from html where url="https://lanitdev.wordpress.com/" and xpath='//link[@type="application/rss+xml"]'
In the query console, be sure to select the JSON radio button and then click the “Test” button. You will see JSON output that looks like the following:
feeds({
"query":{
"count":"1",
"created":"2010-02-26T09:08:43Z",
"lang":"en-US",
"updated":"2010-02-26T09:08:43Z",
"uri":"http://query.yahooapis.com/v1/yql?q=select+*+from+html+where+url%3D%22http%3A%2F%2Flanitdev.wordpress.com%22+and%0A++++++xpath%3D%27%2F%2Flink%5B%40type%3D%22application%2Frss%2Bxml%22%5D%27",
"results":{
"link":{
"href":"https://lanitdev.wordpress.com/feed/",
"rel":"alternate",
"title":"The Lanit Development Blog RSS Feed",
"type":"application/rss+xml"
}
}
}
});
We can see from the JSON that we found 1 feed and we get all the information to go along with it.
Now that we have a proper YQL query, let’s use some jQuery to create a form that retrieves these feeds for us. I am going to create a simple form where a user inputs a url and then outputs a list of RSS feeds or a message stating that an RSS feed couldn’t be found.
The form is straightforward. I just have a textbox and a button. I also have an unordered list which I’ll use to display the list of RSS feeds.
<table>
<tr>
<td>
<label><input type="text" id="website" /></label>
</td>
<td>
<input id="getrss" type="button" value="Get RSS" />
</td>
</tr>
</table>
<ul id="rsslist">
</ul>
Next is the jQuery. We will attach an event to the button that will hit the YQL URL and return JSON that we can parse and get the data we need. The YQL URL we will be using is found in the YQL Query Console next to where you entered the query. There is a box called “The REST Query” which has the query that we will use. The only modification I made to the rest query was that I took out the URL that was in there and replaced with with the jQuery value from the textbox.
$(function(){
$("#getrss").click(function(){
$("#rsslist").empty();
$.ajax({
type: "GET",
url: "http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20html%20where%20url%3D%22" + $("#website").val() + "%22%20and%0A%20%20%20%20%20%20xpath%3D'%2F%2Flink%5B%40type%3D%22application%2Frss%2Bxml%22%5D'&format=json&diagnostics=false",
dataType: "json",
success: function(data){
if (data.query.count == 1){
$("#rsslist").append("<li><a href='" + data.query.results.link.href + "'>" + data.query.results.link.title + "</a></li>");
}
else if (data.query.count > 1){
for (var i = 0; i < data.query.results.link.length; i++)
{
var link = data.query.results.link[i];
$("#rsslist").append("<li><a href='" + link.href + "'>" + link.title + "</a></li>");
}
} else {
$("#rsslist").append("<li>No RSS feed found</li>");
}
},
error: function(){
console.log("error");
}
});
});
})
When the AJAX request finishes successfully we check to see if any feeds are returned and if there are, we loop through them and display them.
I created a demo page using jsbin.com so you can see this in action. View Demo
I hope this small example gives you an idea how you can use jQuery and YQL to accomplish other interesting challenges.
The Foliotek Development Blog 
March 3, 2010 at 3:32 pm
You could also write a custom “getrssfeeds.ashx” in your project that takes a url on the querystring. Then, you could make a request to that page and parse it using http://www.codeplex.com/htmlagilitypack .
The YQL solution is a useful abstraction, but it will come at the expense of an extra dependency and possibly a slower load time. Each solution would probably be good in different situations.
March 5, 2010 at 9:25 pm
I actually implemented that method and it worked fine. I just wanted to to use YQL for fun I guess
August 1, 2010 at 8:07 am
Really nice article.. Found a interesting jQuery&YQL plugin. Helps in using YQL.
http://usingjquery.wordpress.com/jquery-yql-plugin/