Viewers: in countries Watching now:
The View Source weekly series offers 10-minute projects on intermediate and advanced web design topics, covering technologies such as HTML, PHP, jQuery, and CSS, as well as content management solutions like WordPress and integration with Twitter, YouTube, and more. Each movie in the course is self-contained and shows how to accomplish an interesting effect and/or technique. Example projects include creating datepickers and custom photo galleries, and mapping and geotagging with Google Maps.
Hello! This Ray Villalobos and welcome to View Source! In this episode we're going to use PHP to load a feed of content from a YouTube channel. So if you want to know how to take content from one web site to another, then it's time to View Source. We want to use Google's APIs or Application Programming Interface to take content from our YouTube channel and post it on a different web site. In our case, we want to take the feed of latest videos from this lyndapodcast channel and place it into our own web site. We're going to be working with PHP, a server-side technology that processes files before they are sent to the site visitor.
So instead of working with local files on this project, I'm going to be working on a live server. In order to access the files on the server, I'm going to use an FTP application, in this case Cyberduck. To get this to work, we need to make sure our servers are geared up for two things. First, the particular function that we're going to use to accomplish this task is a new function, so we want to make sure that we're using the latest version of PHP, PHP 5. The second thing we need to make sure is that our server allows us to read files from external file sources.
Some servers prevent this from happening, and some older servers are not setup for PHP 5. So to check those two things, we're going to open up this index.php file that I've already placed on my server. So I'm going to hit the Edit button to open it up in the text editor, and this is just a plain HTML file with nothing in it except for a tag where I can put in PHP commands. So right in here I'm going to add the words phpinfo(); and I'm going to save that, and I'm going to refresh this right here.
Whenever you run a phpinfo command, PHP will output a lot of things about your server, including at the very top, the current version of the server, which is 5. So in this case that's great. If I scroll down a little bit right here, I'll start seeing the PHP Core Configuration, and the second thing on the PHP Core Configuration is the allow your allow_url_fopen command, we can see that, that has been turned on, so in this case that will work fine. If either of those two things are not set up properly, then our project is not going to work.
So if you know that your server supports PHP 5, but it's not turned on, you can add an .htaccess file, which is an invisible file that redefines the way the server Apache runs on your machine. And I can issue it a command, I've already created it here, you can right-click and select New File to create the file. I've already done it here, I'm going to open this file up in my text editor and show you what I've typed in here. So by adding this AddType command, I have now told my server that I want to make sure that any files within this folder are going to run on PHP 5.
So the second problem is to make sure this allow_url_fopen is turned on. To fix that, you can create a php.ini file, and if you edit that, you'll see that we can turn features on and off by putting them in this file and changing a command. In this case, we want to allow_url_fopen to be on. If you do both of those things and you save those two files to your servers, anything running in this folder will run in PHP 5, and will have that function turned on, which is what we need for this project to work. Now, you don't want to leave phpinfo on your server running, because other people can find out all sorts of information that you don't want them to know about your server.
So I'm going to take that out and save it, and I'm going to start working on my project. So what we want to do is load up a feed of content. YouTube publishes feeds of the data that comes from our YouTube channels, and it publishes them to URLs that you can grab. So if I grab this URL right here, I can pull that up in a browser and take a look at the raw feed of content, which I've done right here. Now, this is a little hard to read, but you could see that there is a lot of information there; about the project, the title of the channel, and there is some information about the specific courses that are on that list.
That's really hard to read. If you go to the Google Developers Data API, and you go to this URL and scroll down, you could see a list of how that feed would look like if it was formatted in an easy to read way. So you could see that the feed itself has information about the title, it has the logo, it has a bunch of links, and other information down here. It also has a series of entries for each podcast, for each item in the list, so you can grab that information about each individual video and parse it, and create the list of videos that we want.
We don't need all this data; we just need certain parts of it. So I'm going to go back here and copy this first piece of code, this is going to read the file that we specified right here, the lyndapodcast, into a variable, and then it's going to go to that XML feed and just print out the names. So I'm going to copy that, paste it over this, save it, and I'm going to refresh my page. You can see that it's giving us right now the author name, which is just lyndapodcast. If we want to get a little bit more information, we can go through each entry of the lyndapodcast feed and print out the title for that entry.
So what I'm going to do here is grab this code, paste it right there. And what it's going to do now is instead of just printing the author name, it's going to print the first entry's title. You could see that the notation there says, go to this thing that I read, then find the first entry. In PHP and other languages, the first entry is actually entry 0. And then print out the title. So I'm going to save that, and come over here and refresh, and you can see that the latest title in that podcast is iOS 5 SDK New Features.
So if we wanted to print all the entries out, we would need to create what's known as a loop. So it's just a way of going through a lot of different content. In this case, there's a lot of different entries, so we want to be able to go through all of them. So I am going to replace this right here, save it, and refresh, and now I'm going to get a link of some of the courses in that podcast. Notice that I created variables right here that determine which podcast I would start from. So you don't have to print out the first podcast, you could start at the second or third. How many I'm going to print, and also this variable pixsize, that's going to set up something later on to pick the small versions of our photos.
What I'm doing here is creating a loop. The loop is going to go and do what it did before, just print out each individual entry. So the next version of our code just takes that, and from that XML feed I need to get something called the ID of the individual video. Each video in YouTube has a unique ID. Once I know that ID, I can create all kinds of links to things. So I'm going to copy that and replace this version of the code, paste it, save it, and I'm going to refresh here, and you're going to see that all we're doing here is printing out the IDs.
To get the IDs, we took this part of the XML feed called myentry, and then id, and then took out part of it so that it only shows the individual ID, which we can use to do all kinds of things, like call the photos and call the links to the videos. So the last version of our file does exactly that. I'm going to grab this, copy it, paste it instead of this, and this last version, it's doing the same thing as before, but at the very end I use the ID that I picked up to actually create an anchor tag to the YouTube video, as well as an image tag to a copy of a JPEG file.
I'm going to refresh that, you can see that I get all the thumbnails to all of the different videos. And if I click on any one of those videos, it will take me to the YouTube page that has the video that I want to watch. So it really sounds like a lot, but it's just a bunch of stuff that takes a feed and is able to understand what's in that feed. Once you understand how to access the different elements, you can take a look at this code and grab anything from any web site that generates a feed. For more information about PHP, make sure you check out the lynda.com Training Library where we have some amazing courses on PHP and other server technologies.
And don't forget to keep on checking back to View Source.
There are currently no FAQs about View Source.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.