Importing a YouTube Feed using jQuery
To import a YouTube Feed, using jQuery, you’ll need a few things:
I know it seems like a lot, but it really will make things a whole lot easier.
The jQuery Google Feed Plugin makes use of Google’s Feed API, so that the content in the feed is easy to access (and understand). The jQuery HowTo blog has some great documentation, if you want to read up, or use it in conjunction with another Google project.
The jYouTube jQuery Plugin takes a YouTube video URL or ID and gives you a thumbnail corresponding with that video.
Our Logic
- Use jQuery Google Feed plugin to read our YouTube Feed.
- From the information we get out of the plugin, get the URL, pass it to the jYouTube Plugin. So we can show it on our site.
First things First
Obviously, you’ll need to include all of the JavaScript files in the header of your HTML:
<script src="js/jquery-1.3.2.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.jgfeed.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jyoutube.js" type="text/javascript" charset="utf-8"></script>
All of the JQuery we’re writing will go in the $(document).ready(function() { }); so that it will run as soon as the page loads.
If you look at the documentation on the Google Feed plugin page, you’ll pass in the RSS feed and a callback function. (A callback function is just a fancy name for caboose. It will run as soon as the first function is finished.)
In this particular instance, I’m going to use my favorites feed:
http://gdata.youtube.com/feeds/base/users/amyhaywood/favorites?client=ytapi-youtube-user&v=2
Then, in the callback function, we’re going to pass in feeds. This is the content that we just got. So far, this is what our code looks like:
<script type="text/javascript" charset="utf-8">
$(document).ready(function() { $.jGFeed('http://gdata.youtube.com/feeds/base/users/amyhaywood/favorites?client=ytapi-youtube-user&v=2', function(feeds) {
});
});
</script>
So far, so good.
Next, let’s make sure that the feed actually loaded. If it didn’t, there’s no use in running unnecessary code and throwing errors.
So, if there wasn’t a feed if(!feeds), return nothing return false;.
Next, let’s set up a container to hold our code. We’re going to be building an HTML string that will contain our feed.
var html = '';
Now here’s the fun part. We’re going to create a loop that will cycle through all the items in our feed. For each item, it will get the thumbnail and link to that video.
The easiest way to to implement this is with the for loop.
For programming newbies:
You pass in 3 parameters to a for loop. The first parameter, initializes your counter. Typically, you want your counter to start at 0. var i=0;
The second parameter, tells you how many times you want the loop to cycle. Since, we want it to cycle through all the items in our feed, we’ll tell it to go into it reaches the end, or length of our feed. feeds.entries.length
The last, and final parameter, tells it how to update the counter at the end of 1 iteration: we want it to advance by 1 i++.
for(var i=0; i<feeds.entries.length; i++){
Wait a second, where did feeds.entries.length come from? Well, check your documentation. Feeds is the parameter that we passed into our function. Entries is an array that contains all our entries (surprised)? And length is part of jQuery. It tells us how many items are in our array. Or, in this case, how many entries we have.
We can also get individual values for each of our entries, accessing the feeds.entries. In fact, the next part of our code does that. We look at each entry (feeds.entries) to find it’s link and title, plugging the values into the appropriate places in the HTML string.
var entry = feeds.entries[i];
html += '<a href="' + entry.link + '" title="' + entry.title + '"><img src="' + $.jYoutube(entry.link, 'small') + '" class="thumb left"></a>';
As you’ll see, we added a call to jYouTube, which grabs our image path. All we do is pass in the link. Or, here, I passed in “small” in the second parameter. This is optional. If I didn’t pass in small, it would have given me the large image, by default.
We’re almost there! After we’re done running the loop, we just have to display the HTML that we wrote. Here, I told it to put the HTML in a div container with an ID of you_tube_feed, but this could be whatever your little heart desires.
Here’s our final code:
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$.jGFeed('http://gdata.youtube.com/feeds/base/users/threadsmedia/uploads?alt=rss&v=2&orderby=published&client=ytapi-youtube-profile',
function(feeds){
// Check for errors
if(!feeds){
// there was an error
return false;
}
var html = '';
// do whatever you want with feeds here
for(var i=0; i<feeds.entries.length; i++){
var entry = feeds.entries[i];
html += '<a href="' + entry.link + '" title="' + entry.title + '"><img src="' + $.jYoutube(entry.link, 'small') + '" class="thumb left"></a>';
}
$('#you_tube_feed').html(html);
}, 4);
});
</script></i>
Not too shabby. Saturday, we’ll be looking at what it takes to display a Flickr Feed, using jQuery.