Seasonal Savings: 20% off selected memberships for a limited time. Give now

Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Digging deep into the Open Graph

From: Building Facebook Applications with PHP and MySQL

Video: Digging deep into the Open Graph

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.

Digging deep into the Open Graph

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.

Show transcript

This video is part of

Image for Building Facebook Applications with PHP and MySQL
Building Facebook Applications with PHP and MySQL

24 video lessons · 8941 viewers

Ray Villalobos
Author

 

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ .

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Building Facebook Applications with PHP and MySQL.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member ?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferences from the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

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.

Learn more, save more. Upgrade today!

Get our Annual Premium Membership at our best savings yet.

Upgrade to our Annual Premium Membership today and get even more value from your lynda.com subscription:

“In a way, I feel like you are rooting for me. Like you are really invested in my experience, and want me to get as much out of these courses as possible this is the best place to start on your journey to learning new material.”— Nadine H.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.