How to load a feed with Google Feed API and JQuery
Here is a quick and dirty way to load a xml feed with Google Feed API with Jquery. Enjoy!! :)
First step include the necessary external calls:
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js”</script>
<script type=”text/javascript” src=”https://www.google.com/jsapi”></script>
Second step your javascript function:
<script>
/*
* How to load a feed via the Feeds API.
*/
google.load(“feeds”, “1”);
// Our callback function, for when a feed is loaded.
function feedLoaded(result) {
if (!result.error) {
// Grab the container we will put the results into
var container = $(“#latest”);
$(“#latest”).empty();
html = “<div><ul>”;
// Loop through the feeds, putting the titles onto the page.
// Check out the result object for a list of properties returned in each entry.
// http://code.google.com/apis/ajaxfeeds/documentation/reference.html#JSON
for (var i = 0; i < result.feed.entries.length; i++) {
var entry = result.feed.entries[i];
html += “<li>”
+ entry.title
+ “</li>”;
}
html += “</ul></div> “;
$(“#latest”).append(html);
}
}
function OnLoad() {
// Create a feed instance that will grab Digg’s feed.
var feed = new google.feeds.Feed(“https://gdata.youtube.com/feeds/api/users/devinsupertramp/uploads”);
// Calling load sends the request off. It requires a callback function.
feed.load(feedLoaded);
}
google.setOnLoadCallback(OnLoad);
</script>
Third and last step, add a div into your code to contain the results:
<div id=”latest”></div>
Super quick!! Enjoy!!
