Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
So far we've created an app that goes one level deep to dig into our user's Open Graph. In this movie I'm going to show you how to dig deeper into the Open Graph to show a list of movies our friends like. So we're going to start from the quote from our previous movie, right now it's displaying a list of friends. I'll start by creating a new path to get the list of movies from the Open Graph. The path is pretty complicated, but it's pretty much the same path we used in the movie on working with connections, sub-paths, limits, and sub-searches. If you want to know more about how to put together paths, check out the chapter on Working with Open Graph Data.
Whenever you're working with a path, it's a good idea to use the Open Graph Explorer, so I'm going to go there. So I'll switch the application from Graph API Explorer to our current app. and then I'll start building our path. So I'm going to use /me and then /friends as the path and then I'm going to add some fields that I want here. So I'll add the id, then the name, then the movies, and from movies I'm going to get only certain fields and the fields that I want are the id of the movie, plus the name, plus created time, plus picture, and I'm going to specify a specific type of picture.
I want to make sure I get a square picture, and I want to make sure that that square has a height of 100 pixels and a width of 100 pixels as well. Then I also want the link, the description, and the number of likes the movie has received. So let me go ahead and hit the Submit button, make sure that I get everything correct, make sure that I get the proper return, and I get this path that shows me that this user doesn't have any movies that they've recommended. However, this one does have some recommendations.
So this application is going to assume that you have at least one friend with a recommendation. If your PHP server is set to display notices, then you might get a notice about trying to use a variable with no values. If you're running this on some test accounts just make sure you add a friend that has at least one movie recommendation. If your Facebook account has a ton of friends while testing this application, you may want to add a limit right here so that your browser doesn't hang. That would only limit it to a few users, instead of your whole entire list.
So let me go ahead and get rid of this, and I'm going to take this path, and I'll just copy it, and then I'm going to switch back into my application, and I'll paste it in a new variable. So after the line that gets the user Graph right here, I add a new variable called moviespath, and I wan to make it just equal to the path that I created in the Open Graph API Explorer and then I'm going to make a call to the Facebook API just like I did before, and I'll pass it this path.
Now this is pretty much what I did over at here except that I am dividing the two steps just to make it easier for me to update this path separately later on. So we need to adjust our foreach statement to use this new path. So here I was going through each of the User Graph data and setting it up as a key and a value. So what I need to do here is switch it to my new movies Graph data, so I'm using this new path. Let's go ahead and save this and refresh our screen. It should look exactly the same except that now it's using this new path that has the additional data.
Let's go back over here, what we want to do is create a list for our user recommendations. So this is going to go after this recommends area right here, and what I want to here is just output an unordered list and the class is going to be movies group, plus I'll need to close it of course. So in between these two unordered list tags I'm going to need to type in a new foreach statement. So I'm going to be nesting two foreach statements, and whenever you do that you have to be really careful.
We can use the value variable from our current foreach statement to get inside the main data object in our friends object. So if we go back to the Open Graph API Explorer, you'll notice that right now this object from this path has a data object in our friends object. From there we need to get to the movies object, and that also has a data object inside it. So our foreach statement is going to look like this. So I'll pass it the value, and inside this we want to access the movies object and then we want to access the data object inside the movies object.
And we want to make sure we use different variables right here, because we're already using key and value on this line. So I need to make this something like movie key and movie value so that they don't get confused. So now we can start building our code for showing this list. Of course, it's an unordered list, so we're going to then have to print out a list item for each element, and we will need a closing version of that. So now we can output some of the data.
We'll go ahead and start with some of the easier data. Let's get the name of the movie, plus a description, and I know I want to style these later, so I'll add some divs with classes so that I can target them later with CSS. It's always a good idea when you create a lot of divs or repeating elements to go ahead and put some comments in them. Here we want to access the movie value variable and get the info of the name that is inside that variable.
So that should take us to the name of the movie, and in the same way we'll do a description here. We'll just put that in a paragraph. So that should take us to the information for the description which is right here. Some of these descriptions are the descriptions for the page that this links to. So this one doesn't have an awesome description of the Avengers, but it's fine for what we're doing. So let's go ahead and save this and see what happens in our browser.
So we're getting a few errors right here. Essentially, it's because some users are not giving us recommendations for movies. So this first user doesn't have any recommendation, whereas this second user does. And so we need to go ahead and deal with that. So up to this first line I'm going to add an if statement. So I'm going to use the count method in PHP to check to see if the movies data object has at least one value.
So if we look at our Open Graph, we're going to check to see if this movies object, if the data array has at least one element. Since this one doesn't have that element, then it's not going to run any of this code right here. So I need to do this and also need to make sure I close it just like I did before. I'll also add some comments to this other section. So I'll save, come back over here, refresh, and we don't see the first user, because that user doesn't have any recommendations.
So if at some point you don't see any data, it could also be because we didn't necessarily ask for all the permissions we need to see this data in our application. So in our login URL you want to make sure that you add the friends likes to the scope. So right here under scope, we need to add friends_likes. You may not see that problem in this particular movie, because as I'm coding in and out of different projects, I am adding some scopes and deleting some scopes and Facebook is keeping some cookies and sessions that keeps some of that information around.
But just in case, to be safe, make sure the have to friends_likes in your scope section of the login URL, you may also need to log out and then log back into the application to make sure you get a new axis token. Let's go ahead and add an image for each one of our movies. And that one is a little bit more complicated. So if we look at the Open Graph the picture that we want is in the movies object, inside the data array and is listed as picture.
The URL for the image we want is actually inside another data object. We just can't say picture and then URL, we have to go through that other data object. A lot of times the Facebook API wraps all the data inside an object around a data array, and so you have to watch out for that. So let's go back and add an image. So we have got our headline, our description. So I'll add that right after this movie info section, and that's going to be a normal looking image tag.
Here is the tricky part, the src of the image is going to be the movie value and then I'm going to access the picture object, then I'm going to access inside that, the data array--and I need to put these in quotes--and then inside that I need to access the URL element of that array. Then I'll need to add the alt tag like we always do with images, and that was just going to get the name. I can also add a title so that when I rollover images on certain browsers it shows me the name as well.
So it's just the same thing as the alt tag just call it title, and I should have a space right there. So let me go ahead and save that, and if I did everything correctly, I should be able to see the picture of each movie right on the top of the name of the picture, and there it is at 100x100 pixels. That's another way of getting an image that's bigger than the default tiny image that you get for the users. So let's go back, and we actually want to make these clickable to the different pages for the movies.
I'll need to add an anchor tag right up here. So we'll do an anchor tag. We'll close that one right here. If when I get a link to the page, and we're already in the movies object inside the data array, then we can just go to this link URL, that will take us directly to the page. So I'm going to go back into my application and in here all I need to do is type in movievalue, and then I just access the link item. Whenever you do a link that you want to take over the entire screen, you need to make sure that you add a target of _top, or it will try to load within the canvas iFrame, and that a lot of times will not load anything at all, and you'll be wondering why that doesn't work.
So make sure you add target= _top. So I'm going to save this, back to our browser, back into our application, refresh, and now these should be clickable to the pages, and there's the Avengers page, awesome. So creating an application involves weaving in and out of the user data. Before you master the Open Graph, you need to learn to iterate through different objects, as well as how to access just the item you need in the Open Graph.
A really good tip is to always have the Graph API Explorer open so that you know how to build your objects and your associative arrays to get to the right information.
Get unlimited access to all courses for just $25/month.Become a member
61 Video lessons · 99509 Viewers
56 Video lessons · 112732 Viewers
71 Video lessons · 81550 Viewers
131 Video lessons · 39147 Viewers
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.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.