IntroductionWelcome| 00:04 | Hey there, this is Ray Villalobos, and welcome to
Facebook Applications with the PHP SDK.
| | 00:09 | In this course I'm going to show you how to
download, install, and work with the Facebook
| | 00:13 | Software Development Kit for the PHP language.
| | 00:16 | I'll show you how to check if a user is
logged into your application, using just the PHP SDK
| | 00:22 | and how to access basic Open Graph data.
| | 00:24 | Then we'll examine how to build paths to create
complex Graph API calls with the Graph API Explorer.
| | 00:30 | We'll also take a look at how FQL--Facebook's Query
Language--works and how it differs from using API path.
| | 00:38 | Finally, I'll show you how to build a real
application with the PHP SDK using both paths
| | 00:43 | and FQL calls to the Graph API.
| | 00:46 | We'll be covering all these features and more, so let's
get started with Facebook Applications with the PHP SDK.
| | Collapse this transcript |
| What you should know before watching this course| 00:00 | Facebook Applications with the PHP SDK is
not a beginner course, so there's a few things
| | 00:05 | you should be familiar with
before watching this course.
| | 00:08 | You should know how Facebook works, and
if you need help with that, checkout
| | 00:12 | Facebook Essential Training in
the online training library.
| | 00:15 | You should also be familiar with building
online projects and know some basic HTML.
| | 00:20 | If you need help, checkout Bill Weinman's
course: HTML Essential Training.
| | 00:25 | Since this is a course on PHP, you should
have prior experience with the language.
| | 00:30 | We're going to touch on some database
subjects in this course, so I would suggest that you
| | 00:34 | take a look at PHP with
MySQL Essential Training.
| | 00:37 | I did another course on the Facebook JavaScript SDK called
Building Facebook Applications with HTML and JavaScript.
| | 00:44 | This course is related to that course.
| | 00:48 | Building applications in Facebook often
involves using both the PHP and JavaScript SDK.
| | 00:53 | So I consider this as sister course to
Facebook Applications with HTML and JavaScript.
| | 00:59 | It would be great, but not absolutely
necessary, if you check out that course as well.
| | 01:03 | You should be comfortable with text
editors like BBEdit or Sublime Text or others.
| | 01:08 | In this course, I'm going to use an editor called
Espresso, but you should use your favorite text editor.
| | 01:14 | If you're on a Mac, you might
want to check out Text Wrangler.
| | 01:17 | It's a free and very capable text
editor that is available on the Mac store.
| | 01:21 | As you get deeper into Web Development you
may also want to check out BBEdit, a commercial
| | 01:26 | application that has better web features.
| | 01:28 | I like another text editor that also works on Macs,
PCs, or Linux workstations called Sublime Text.
| | 01:36 | Although it's not free, it's
quite capable and fun to use.
| | 01:40 | It doesn't matter which text editor you use as
long it's something that you're comfortable with.
| | 01:45 | You should also be familiar building online
projects and have some experience with FTP
| | 01:50 | applications like Transmit or Cyberduck.
| | 01:52 | If you need help with FTP, check out
my course on Managing a Hosted Website.
| | 01:57 | Building Facebook Applications with the PHP
SDK is not a beginner course, but with a little
| | 02:02 | experience and some key web technologies you
should have no problem following this course.
| | Collapse this transcript |
| Using the exercise files| 00:00 | If you are a Premium Member of the lynda.com
online training library or if you are watching
| | 00:05 | this tutorial on a DVD-ROM, you have access to
the exercise files used throughout this title.
| | 00:11 | This course is a little
different than most courses.
| | 00:13 | Working with Facebook Applications require
that you host your code on a server, so unlike
| | 00:18 | most courses, I'm not in work on local files.
| | 00:22 | Usually, at the beginning of a movie, I will
use an FTP program to access my server, and
| | 00:27 | I'll open the folder for this
project called Facebook PHP.
| | 00:31 | Most of the time, I'll start the movie
having open a file from that directory.
| | 00:36 | In the Exercise Files folder, you'll
find folders for each video in the series.
| | 00:40 | Inside those folders you should see a
finished folder as well as a working folder.
| | 00:45 | The working folder has a copy of the
Facebook PHP folder when I start the video, and the
| | 00:50 | finished folder has a copy of the
Facebook PHP folder at the end of the lesson.
| | 00:55 | If you're a monthly member or an annual
member of lynda.com, you don't have access to the
| | 00:59 | exercise files, but you can follow
along from scratch with your own assets.
| | 01:04 | So let's get ready to build
Facebook Applications with the PHP SDK.
| | Collapse this transcript |
|
|
1. Getting Started with the PHP SDKIntroduction to Facebook development| 00:00 | Facebook Application Development
is different than other projects.
| | 00:04 | So I wanted to talk about some of the concepts behind
working with Facebook, including APIs, the Open Graph, and SDKs.
| | 00:10 | Developing for Facebook could mean a lot of
different things, like developing widgets
| | 00:15 | for websites, developing mobile apps that
connect to Facebook, or creating apps within Facebook.
| | 00:21 | In this course we're interested
in creating apps within Facebook.
| | 00:24 | However, you may also want to pull in
widgets such as the like button into your app.
| | 00:29 | These widget features are
known as social plugins.
| | 00:32 | Social plugins are snippets of code you can
add to your site, including the like button,
| | 00:37 | news feed, and Facebook comments.
| | 00:39 | The purpose of social plugins is to let you add Facebook
functionality onto existing websites or applications.
| | 00:45 | I showed you how to access social plugins
in the course Building Facebook Applications
| | 00:50 | with HTML and Javascript.
| | 00:51 | So if want to learn more about social
plugins and dialogs check out that course.
| | 00:56 | Facebook Applications let you create pages
that appear in Facebook through a special
| | 01:01 | container called the Canvas.
| | 01:03 | It's an iFrame that links back
to a page on your own web server.
| | 01:06 | You do this by using one of several Software
Development Kits or SDKs, and there are two
| | 01:11 | different types of SDKs available. SDKs for mobile
devices like iOS and Android and SDKs for website.
| | 01:19 | In this course we'll be
focusing on one of the web SDKs.
| | 01:22 | There are two SDKs you can use for website, you
can do things with the JavaScript SDK or the PHP SDK.
| | 01:28 | The two SDKs allow you to do similar,
but not always identical things.
| | 01:33 | The JavaScript SDK, for example, lets you
have better access to the Open Graph API and
| | 01:38 | social plugins and dialogs.
| | 01:40 | On the other hand, the PHP SDK is
sometimes the only way you can authenticate certain
| | 01:45 | parts of Facebook, plus it is the only way
you can access Open Graph data through FQL,
| | 01:50 | Facebook's SQL like database language.
| | 01:54 | The Open Graph is simply the connections users make as
they join Facebook and start interacting with the service.
| | 02:00 | The Open Graph API is the code Facebook has written to allow
access to the data that Facebook stores about its users.
| | 02:07 | It's information about users' Friends, Likes,
and Connections to Pages, and other users.
| | 02:12 | In order to access this information, the
developer needs to authenticate or ask the user for
| | 02:17 | permission to these
different types of information.
| | 02:21 | As a developer for apps inside of Facebook, your goal is
to learn how to access the data within the Open Graph.
| | 02:27 | In order to do that you need to first learn about
the Canvas and how to place your apps within Facebook.
| | 02:33 | Then you'll need to learn about authentication so
that you'll have permission to the data you need.
| | 02:37 | Finally, you need to learn how to use the
Open Graph API in order to access the data
| | 02:42 | you need from your users.
| | Collapse this transcript |
| Getting and setting up a web host| 00:00 | Creating an application that appears as part of
Facebook is done through something called the Canvas.
| | 00:06 | It's essentially a page that has a Facebook
header, a sidebar, and an open iFrame that
| | 00:10 | points back to a page that
is hosted on your own server.
| | 00:14 | Let's create the app container that
will hold our app and link it to a server.
| | 00:19 | Here's what a Canvas Facebook page looks like.
| | 00:22 | This is the example application we use for the
Facebook Applications with HTML and JavaScript course.
| | 00:27 | It has a standard Facebook navigation on top,
as well as a sidebar on the right-hand side.
| | 00:33 | The middle part is an iFrame
that points to a page on my website.
| | 00:37 | If we take a look at the page that the iFrame
points to you can see that it's the same content
| | 00:41 | that shows up on Facebook's Canvas.
This is what we need to create for our new app.
| | 00:46 | Before you do that, though, you need to make
sure that your web host has an SSL Certificate.
| | 00:51 | This allows your website to
talk to Facebook securely.
| | 00:54 | This is sometimes included on a web hosting plan,
but has to be turned on or added to other plans.
| | 01:00 | So make sure you contact your hosting provider.
| | 01:02 | If you need help understanding how to set
up a host or how to use FTP, make sure you
| | 01:07 | check out my course on
Managing a Hosted Website.
| | 01:11 | So I have a connection to my server, and I've
created a folder called Facebook PHP and placed
| | 01:16 | an index.php file in there.
| | 01:19 | The file is super simple to some basic HTML
starter code with an h1 tag that says Hello World.
| | 01:25 | To create the app container you need to go
to Facelook's developer page and click on
| | 01:29 | the Apps link at the very top.
Then you need to hit the Create New App button.
| | 01:34 | You will see a pop-up
window that looks like this.
| | 01:37 | This part of creating your app is really important,
because the name of your app has to be unique,
| | 01:43 | and you won't be able to easily change it later.
| | 01:45 | Rollover to the question mark next to the App Name
to see some other requirements for naming your App.
| | 01:51 | The App Namespace is also important
and will become the URL of your app.
| | 01:55 | So be careful when creating it.
| | 01:57 | I'm going to call my app viewsourcephp
and the Namespace will be viewsourcephp.
| | 02:03 | Since we've already set up our own hosting,
I want to make sure the web hosting is off.
| | 02:08 | You may see a security check here,
so just type in what it says.
| | 02:12 | Now you should see a page that looks like this.
| | 02:14 | You can see that you've received
an App ID, as well as an App Secret.
| | 02:19 | Those will be important later on.
| | 02:21 | Though the first thing you need to do, on
this screen, is to add your App Domains.
| | 02:25 | That's just a URL to the
website hosting your app.
| | 02:27 | You should enter a version
with and without the WWW.
| | 02:31 | My app will be hosted in iviewsource.com, so
I'll add iviewsource.com and www.iviewsource.com.
| | 02:40 | If you want users to have access to your apps
outside of Facebook, you'll want to add your
| | 02:43 | domain to this section called
Website with Facebook Login.
| | 02:47 | Make sure you put the slash at end.
| | 02:50 | If you want your app to be hosted inside of
Facebook Canvas and searchable through Facebook's
| | 02:54 | App Directory then you'll need the URL to your
Facebook page on this section called App on Facebook.
| | 03:01 | You'll need the regular as
well as a secure URL to your page.
| | 03:05 | This last piece will be the
name of the folder on your server.
| | 03:08 | Once again, make sure you
put the slashes at the end.
| | 03:12 | You can also choose a fixed or a fluid Canvas.
| | 03:14 | A Fixed Canvas will always have a certain
size and Fluid Canvas adjusts to the size
| | 03:19 | of the user's window and
is almost always better.
| | 03:23 | So now we are done setting up the app container.
I'll hit Save changes.
| | 03:27 | If you have done everything correctly your
app is good to go just point your browser
| | 03:31 | to the URL of your app, which is the
same as your canvas URL to test it out.
| | 03:36 | So it should be apps.facebook.com
plus the name of your application.
| | 03:40 | Setting up your app is pretty easy.
| | 03:43 | You do need to make sure that you get an
SSL Certificate on your hosting account.
| | 03:47 | Also, be careful that you think about your apps
name a bit, changing those can be challenging.
| | 03:52 | And, as you can see, your app doesn't
actually have to use any Open Graph Info.
| | 03:57 | It can have normal HTML or PHP content.
| | 04:00 | It's just a lot more useful when
you have access to Social Graph Data.
| | Collapse this transcript |
| Downloading and installing the PHP SDK| 00:00 | One of the main differences between the
JavaScript and the PHP SDK is how you install them.
| | 00:05 | With the JavaScript SDK, you simply copy
some code with a reference to the library.
| | 00:10 | But with PHP, you have to download a copy
of the SDK and install it in your server.
| | 00:15 | So let's take a look.
| | 00:17 | The SDK is an open-source
project on GitHub at this URL.
| | 00:22 | If you have a GitHub account, you can
clone this repository to your machine or simply
| | 00:26 | download the ZIP file to your hard drive.
| | 00:28 | Once downloaded, decompress the zip file if
necessary and open the decompressed folder.
| | 00:34 | Inside the main folder,
you'll find a subfolder called SRC.
| | 00:38 | You are going to need to
copy these files to your server.
| | 00:41 | I want to create a folder on my server, and
I'll call mine php-sdk and move the files there.
| | 00:51 | To bring the SDK's functionality onto your
page, we are going to need to add some PHP
| | 00:56 | link in the index.php file to our
facebook.php file inside the php-sdk folder.
| | 01:02 | So I'm going to open up my Index file, and I'll
add some code to link to the facebook.php file.
| | 01:10 | You'll need to get your Apps ID and
Secret from the Facebook Developers App page.
| | 01:16 | Now here's our viewsource.php, so I'm going to
copy this App ID and paste it into the section
| | 01:23 | in the index.php page.
| | 01:25 | I'll also copy the App Secret and
paste it into this associative array.
| | 01:32 | My App ID and my App Secret are going to different from
yours, so you'll be copying some different code in here.
| | 01:38 | Now this piece of code is going to bring in the Facebook
PHP SDK and create a Facebook class for our project.
| | 01:45 | The Facebook class will be associated with
your App ID and your Apps Secret, so I'm going
| | 01:50 | to save this, and I'm going to switch over
to my application and just refresh the page.
| | 01:56 | You want to make sure you don't get any PHP
errors when you refresh the page, and although
| | 02:00 | this page doesn't do anything, we have successfully
downloaded, installed, and connected our page
| | 02:05 | to the Facebook PHP SDK.
| | 02:07 | To make this page useful, we still need to
authenticate our users, so we can start gathering
| | 02:12 | data using the Open Graph API.
| | Collapse this transcript |
| Logging in and authenticating users| 00:00 | So we want to take a look at the information
inside the Open Graph, that's the social data
| | 00:05 | Facebook stores about its users.
| | 00:07 | In order to do that, we have to authenticate
the user in order to make sure Facebook knows
| | 00:12 | that this is a safe and secure connection.
| | 00:14 | So let's take a look at logging
in our users into our application.
| | 00:19 | Here's the index.php file that I have on my
server, and what I want to do is first check
| | 00:24 | to see if a user is already logged
into Facebook when they come to our site.
| | 00:28 | So I'm going to add another piece of code
right here, that's going to be some PHP, and
| | 00:34 | I'm going to get the user from the
Facebook object I requested up here.
| | 00:39 | So I'm going to put that in a variable and use the
getUser method to get the user from that Facebook object.
| | 00:47 | Now let's go ahead and output the user ID
we received back from the Facebook object.
| | 00:53 | So I'm going to go ahead and save this and
switch back to my application and refresh the screen.
| | 00:59 | We should get the value zero for the user ID,
because although this user is logged into
| | 01:03 | Facebook, they have not been
authenticated into our application.
| | 01:08 | In order to authenticate them,
I need to get a login URL.
| | 01:12 | The login URL is not just the regular link but a link
that passes the proper security transactions to Facebook.
| | 01:18 | I'm going to go back into my code, and I'm
going to add something around this line right here.
| | 01:23 | So if this is a user with a normal user
ID, then I'll go ahead and print out the user ID.
| | 01:32 | Otherwise, I'm going to getLoginUrl method from
the Facebook object and feed it into a variable.
| | 01:38 | When you get a login URL, you have the
option of specifying some parameters.
| | 01:43 | so check out this page on
the PHP SDK documentation.
| | 01:48 | So if you scroll down, you can see that you
can specify a scope, and that's the permissions
| | 01:52 | you want to request from the user. You can
also specify or redirect URI, which is the
| | 01:57 | same as a URL is where you want the
user to go after they have logged in.
| | 02:01 | Finally, you can also specify a display,
which is whether or not you want the user to see
| | 02:06 | a pop-up dialog box or just be
authenticated on the same page.
| | 02:11 | So if you don't specify anything, the defaults
are basic permissions which include ID, name,
| | 02:15 | first name and last name, link, username,
gender, and locale, which is the location.
| | 02:22 | So just go and print the URL that we got back
from the Facebook object and see what happens.
| | 02:26 | So I'm going to save this and then switch
over to my page, refresh the screen, and I
| | 02:33 | should now see a login link.
Let's click on it and see what happens.
| | 02:37 | So you think what should happen is you
should see some sort of authentication dialog box,
| | 02:41 | it is not happening because this is an iFrame, and
there's actually many ways to log in users into Facebook.
| | 02:49 | You could be logging somebody in from an actual
external page. This one is an iFrame, so we're
| | 02:54 | going to have to modify our link a little
bit and give a little bit more information
| | 02:58 | to the getLoginUrl command.
| | 03:00 | So we'll switch back over here, we'll add
a "target="_top" that will force Facebook
| | 03:07 | to load a page on top of the current page
and not into the iFrame, that is the canvas
| | 03:13 | inside of Facebook, and I'm going to save that.
| | 03:16 | I'll switch back over to my
app, take a look right here.
| | 03:19 | And I'm going to click
login and see what happens now.
| | 03:23 | And now it's taken us to the right place.
| | 03:25 | I want to modify something else, because if
I click on this Go to App, I might actually
| | 03:30 | return to the website that has my
page and not back into Facebook.
| | 03:35 | So although this is almost perfect, I'm going to
hit the back button, I'm going to fix something else.
| | 03:40 | And I found that this login procedure is
something that you're going to have to play around with.
| | 03:45 | When we get the login URL, I'm also
going to add a couple of things right here.
| | 03:49 | I'm going to add an array here,
and I'll put this on some new lines.
| | 03:55 | I'm going to pass a display parameter here, and
I'm actually going to request this to be on a pop-up.
| | 04:02 | Even though we're not going to see a pop-up,
this is what actually worked for me, so next,
| | 04:06 | I'll pass it a redirect_uri, and that is
going to go back into our Facebook page.
| | 04:15 | And I'm going to save that, I'll go back into
my page, refresh, and now I'll click the login
| | 04:23 | link, you can see that it's requesting just
my basic info, and then I'll click on Go to App,
| | 04:28 | and that takes as back into our original
page, and it's showing us the user ID for this
| | 04:34 | user, which is exactly what we want.
| | 04:35 | I want to tell you this is one place where you
want to play around with the options a little bit.
| | 04:40 | I found different things that I thought
would work on a login and users not working and
| | 04:45 | some things that shouldn't work
actually creating the desired affect.
| | 04:50 | So make sure you read up on the Get Login
URL documentation, especially on the scope section.
| | 04:54 | You can take a look at the permissions that
you can request from the user and learning
| | 04:59 | to log in users into our application is what's
going to create a connection that authenticates
| | 05:04 | your use of the social data.
| | 05:06 | And that's a really important part of working
with Facebook. After all, you just don't want
| | 05:10 | anyone to be able to
access data from your users.
| | Collapse this transcript |
| Logging out users from your app| 00:00 | Once users are logged in and authenticated
into your application, you can start accessing
| | 00:05 | Facebook's User Data, called the Open Graph,
because our application will be changing often,
| | 00:10 | I am going to add a way for
users to log out of our application.
| | 00:14 | You don't always have to do this, but
it might be useful during development.
| | 00:18 | So let's take a look.
| | 00:19 | So in the last video we saw that there is a
method of the Facebook object called getLoginUrl,
| | 00:24 | so naturally you're probably thinking there's
an equivalent getLogoutUrl, and you'd be right.
| | 00:29 | Let's take a look at the documentation for
that method, you can see that it's pretty
| | 00:34 | much just the same as the getLoginUrl method,
but it only takes in one parameter an optional
| | 00:39 | URL to redirect the user after they logged out.
So let's try adding that into our project.
| | 00:45 | Make sure we check for the user haven't been
logged in, and so what I'll do is I'll create
| | 00:49 | a logoutUrl variable here, and point it to the
Facebook object and use the getLogoutUrl method.
| | 01:02 | Then I'll just print out the link to logout.
| | 01:04 | So let's go ahead and save this, and we'll
switch back to our application, we'll refresh,
| | 01:11 | and if you have been playing around with
this application, you'll probably see the User
| | 01:15 | ID showing up for your
user with the logout link.
| | 01:19 | If not, just go ahead and log in and
then you should see something like this.
| | 01:22 | So I'm going to click on the
logout link, and we'll see what happens.
| | 01:25 | Nothing looked like it happened, but if you
refresh the page, you'll see that you actually
| | 01:30 | get locked out of Facebook, which is
sort of what you'd expect to happen.
| | 01:34 | But if you log in again, you'll be logged back
into your app, and that is sort of okay.
| | 01:41 | But what I really want to happen is to be able to
logout of the application without logging out of
| | 01:46 | Facebook so that I can re-authenticate
the user with maybe different permissions.
| | 01:51 | So let's see how we would do that.
| | 01:52 | I've actually created a separate link
called the logout.php, so let me open that up and
| | 01:57 | show you what that code looks like.
| | 02:01 | So if you take a look at the very top of this code,
it's almost exactly as the top of our index.php code right here.
| | 02:08 | It loads up the facebook.php
library and then creates a Facebook object.
| | 02:13 | After that we're clearing a cookie by setting
the timer to -100 ms at our website URL then
| | 02:20 | we destroy this session, that gets rid of
the temporary session that Facebook will create
| | 02:25 | when you log in to an application, and then we
set the location back to the original document,
| | 02:31 | which is this page here.
| | 02:33 | So really all we have to do now is just
modify this logOutUrl link so it just points out
| | 02:39 | directly to that document.
| | 02:41 | So I'm not going to use this
logOutUrl variable, I'll just get rid of it.
| | 02:46 | So now I'm going to Save and switch back to
my application and then I'll refresh and then
| | 02:53 | I'll hit the logout button.
| | 02:54 | So you could see that I'm still logged into
Facebook but I'm not logged into my application.
| | 03:00 | So if I want to log back into my application,
I can hit login, and now I can see the User
| | 03:05 | ID just fine and logout when I want to.
| | 03:08 | Now that's going to be useful if you want to
change the scope of what you have access to.
| | 03:12 | So if you come right here, and you add something
like scope and then we type in some permissions
| | 03:18 | that we want here, say, for example, email,
and I'm going to save this document and come
| | 03:23 | back here and then I'm going to
refresh this page, logout and log back in.
| | 03:29 | And you'll see that it's asking me for
additional permissions for this application.
| | 03:34 | I've just logged out of Facebook, and I
logged back in, I might not see this, so I'm going
| | 03:39 | to hit Allow, and now my application is
going to have the right permissions for accessing
| | 03:44 | not only the basic info, but also email,
and I didn't have to log out and log back into
| | 03:49 | Facebook in order to do that.
| | 03:51 | So logging out users should be pretty straightforward,
but you might run into some problems if you
| | 03:55 | just use the getLogoutUrl method.
| | 03:58 | For application, it's just easier
to create a separate logout file.
| | 04:02 | Remember that in production, we're not always
going to need to give users the ability to logout.
| | 04:06 | So you might want to take the ability to log
out, out of your application before you launch it.
| | Collapse this transcript |
|
|
2. Working with Open Graph DataWorking with Open Graph data| 00:00 | The whole purpose of building Facebook applications
is to work with the data that Facebook collects
| | 00:05 | and stores about its users. Sometimes this is
known as the Social Graph or the Open Graph.
| | 00:10 | Facebook has a built-in language for
axing that data called the Graph API.
| | 00:16 | API stands for Application Programmers Interface,
so let's take a look at how we can start accessing
| | 00:20 | some of the basic social graph data
from a user that has logged into our app.
| | 00:25 | With PHP, you can make a connection to the
graph API by using the API object of the Facebook
| | 00:30 | class, the format for that class is right here.
| | 00:33 | So I'm going to scroll all the way down to
the end and then just back up a bit to get
| | 00:37 | to this section called Graph API Methods.
| | 00:40 | So you can see the call requires a path then
optionally a method like get post or delete,
| | 00:46 | and then also optionally a list of parameters just
in case you need to send information back to Facebook.
| | 00:52 | Let's go back into our application, and I'll use a
simple call to the graph API to get our user's information.
| | 01:00 | So I'll call the Facebook object and then call the
API method, then I want to pass it along a path of /me.
| | 01:07 | When you use /me as the path, you're going
to get information about the user currently
| | 01:12 | logged into Facebook, so let's go ahead and
print out the object we get from this call.
| | 01:16 | So I'm going to save this and go back
to my application and refresh my screen.
| | 01:23 | So you can see the data comes back as an associative
array, it looks similar to a JSONobject, you
| | 01:29 | can access any part of that data, so let's
see if we can grab the first name and have
| | 01:34 | a more personalized greeting.
| | 01:35 | I am going to delete this line from right
here, and I'll print out the Hello World with
| | 01:42 | the user's name we get from the open graph, so I'll save
this and go back into my application and refresh the browser.
| | 01:50 | So now you can see that it says Hello and then the
first name of this user, instead of just Hello World.
| | 01:56 | So from the array that we get back, we
can see the different fields right here.
| | 01:59 | The field that I used was called first name,
but I could have just as easily called any
| | 02:03 | of these other fields, so let's try
something a little more challenging.
| | 02:07 | Start output a list of the user's favorite
sports, since it's part of their profile data.
| | 02:12 | Not every user is going to have this as part
of their profile, it depends on how much of
| | 02:17 | their profile they have filled out and
what privacy settings they have modified.
| | 02:22 | So first we'll check to see if
sports is part of the social graph.
| | 02:27 | Here I'm checking to see if the user graph
has the item called sports, then I'm going
| | 02:30 | to print a headline and create a list.
| | 02:33 | I'm using the foreach statement to go
through each of the sports listed and declare them
| | 02:39 | as a key in a value and then in that loop, I go and
print out every one of the name values of each sport.
| | 02:47 | So let's see how that works on the browser.
| | 02:49 | So I'll save this, switch back over here, let's
scroll to the top, and I'll refresh my screen.
| | 02:56 | So we did everything correctly, you can see
the three different items that are this user's
| | 03:00 | favorite sports, you could see
them right here in this array.
| | 03:04 | So you can go through any of these
other arrays by using the same foreach loop.
| | 03:11 | If your PHP server is set to output notices,
you might get a notice here, if you pick a
| | 03:16 | user with no sports data. We're just experimenting
with ways to access the data in this user's
| | 03:22 | graph, so just look for a different field other
then sports that has some data and try this technique.
| | 03:28 | We can retrieve quite a bit of information without any
special permissions from the logged in user social graph.
| | 03:34 | To do that we use the API method of the PHP
SDK, we used just the simple path here of /me,
| | 03:41 | but in reality, there's all kinds of
data you can retrieve using different paths.
| | Collapse this transcript |
| Understanding Graph API paths| 00:00 | Facebook stores information about users and their
connections in something known as the Social Graph.
| | 00:06 | It's sometimes also called the Open Graph.
| | 00:08 | To access that data, Facebook
provides something called the Open Graph API.
| | 00:13 | In the previous video we learned how to
access data about the user by using a path called
| | 00:18 | /me, which is a shortcut to the current user.
| | 00:21 | Let's take a look at how to use other paths to
get different types of information from Facebook.
| | 00:26 | The paths we're using /me looks
suspiciously like the end of URL, and it is.
| | 00:32 | Facebook takes our path and sends it to an
application at graph.facebook.com, so we can
| | 00:37 | use that URL with different paths to get some
public information about the Facebook object,
| | 00:43 | plus, we can also build our own paths.
| | 00:45 | If you take a look at the API Reference, you can see
some examples of other paths you can use to retrieve data.
| | 00:52 | If you click on one of these URLs, you'll
see the results displayed as JSONobjects,
| | 00:57 | which are similar to PHP associative arrays.
| | 01:00 | So we can use the username of any existing
Facebook account and get some basic data about that user.
| | 01:06 | We could use a username stuart.beland, and we
would get the info for our current Facebook user.
| | 01:12 | Now instead of the User Name, we can also
use a User ID, so I'm going to grab the User
| | 01:16 | ID from our application and then come
over here and just paste that right there.
| | 01:23 | So if you know your User ID or your User Name,
you can try that as a call to graph.facebook.com.
| | 01:29 | If you look at the rest of this list, there
is a lot of different information we can get
| | 01:33 | from other pages, so this, for example is a
Coca-Cola page, and you can see some generic
| | 01:38 | information here from a page, instead of a user.
| | 01:42 | There's a link to groups, photos, photo albums,
and other things you can get from the Graph API.
| | 01:48 | In addition to accessing objects, we can also
access an object connection, you can see that
| | 01:53 | there are paths here for different things, like
friends, a profile or a wall, likes, books, et cetera.
| | 02:01 | Now these paths to connections require access
tokens or permissions, you can't just do this
| | 02:07 | with any user, but at least on this
page you can explore some of them.
| | 02:11 | As long as you have permissions to get this user
data, you can use these in your applications as well.
| | 02:16 | You don't always need to get all of the information
from a user, you can also limit the fields the call returns.
| | 02:24 | So let me try a page I created
for BarCamp event in my area.
| | 02:28 | Now we can limit the fields by passing along the
field variables with a value and a description,
| | 02:33 | so I'm going to add a question mark
here and just type in the fields that I want.
| | 02:39 | That sometimes makes it easier to get just
the information we need and reduces the overall
| | 02:44 | size of the data we retrieve.
| | 02:46 | You can also ask for information from
multiple IDs, like more than one user.
| | 02:51 | To get a clear understanding of how to
work with each object and its connection, take
| | 02:56 | a look at the left side of the Graph API
Reference, each object is listed there.
| | 03:01 | If you click on an object you can
see its permission requirements.
| | 03:04 | To read the photo object we need a valid
access token, as well as the user photos permission,
| | 03:10 | if we want to access photos and albums uploaded by
a user, as well as the friends_photos permissions
| | 03:16 | to access their friend's photos and
photos in which the user has been tagged.
| | 03:21 | You can also publish a photo if
you have a publish stream permission.
| | 03:25 | These are all permissions that you can ask
for in your applications, you can also see
| | 03:30 | a list of all the fields you can get from
that data and types of connections, as well
| | 03:34 | as ways to create and do things
like delete some of these objects.
| | 03:40 | Paths are a really powerful way to access
data inside the Open Graph, any developer
| | 03:44 | that has used a HTTP post or get methods
should be able to pick up the syntax in no time.
| | Collapse this transcript |
| Constructing paths with the Graph API Explorer| 00:00 | So far we've learned that we can access open graph data
by making a request to the Open Graph API with a path.
| | 00:07 | The best way to construct an experiment
with paths is through a tool Facebook has built
| | 00:11 | for developers called the Open Graph
API Explorer, so let's take a look.
| | 00:16 | You can get to this tool by going to this URL.
| | 00:19 | If you watch the movie on using Graph API
paths, you know how to construct simple paths
| | 00:24 | to send to the Graph API and pull up
different types of data from the Social Graph.
| | 00:29 | This tool let's you quickly try out
connections and view sample data for different users,
| | 00:33 | it also let's you create temporary access
tokens that you can use to make some of the
| | 00:38 | connections that require certain permissions.
You should already see a sample path in the
| | 00:43 | input field as well as an access token.
| | 00:46 | At the very top of the window there is a
pop-up menu where you can choose the application
| | 00:50 | the access token should belong to. You can
switch it to pretend that one of your current
| | 00:55 | applications requested the token that
allows you to approximate how this app would work
| | 01:01 | if you're page asked for access.
| | 01:03 | If you hit the Debug button, you'll be taken to a new page,
it shows you information about the current access token.
| | 01:10 | At the bottom you can see the scope for the
access token that's the permissions this application
| | 01:15 | has, let's close the Debug window.
| | 01:19 | We can change the permissions we ask for by
hitting the Get Access Token button and choosing
| | 01:25 | from the list of permissions available to us.
| | 01:27 | There are three categories of permissions, User Data
Permissions, Friends Data Permissions, and Extended Permissions.
| | 01:35 | This is also a good place to check out the
names of specific permissions you want to request.
| | 01:40 | Most of the time you can figure out which
permissions you need for which data by reading
| | 01:45 | the permissions, but sometimes you need to
consult the API Graph documentation that's at this URL.
| | 01:51 | On this page you want to click on the object
you want on the left-hand side and then read
| | 01:56 | any special notes on permissions on the right.
| | 01:59 | So if you pick Photos, you can see that we
need the user photos permission to access
| | 02:03 | the photos and albums uploaded by the user, as
well as photos in which the user has been tagged.
| | 02:09 | Let's go back to the API Explorer.
| | 02:12 | Right underneath the access token area, we
can choose whether we want to query Facebook
| | 02:17 | with the Graph API or FQL Query, the
Facebook Query Language. That means that you can also
| | 02:23 | use this page to test out your FQL queries.
| | 02:27 | Underneath that you can choose to
issue a GET, POST, or DELETE request.
| | 02:31 | Doing different things like posting to a user's wall
or deleting items requires different types of requests.
| | 02:37 | To the right of that you'll see the path that you should
use in your application to make that type of request.
| | 02:43 | Underneath there's a list of items you're
requesting, at the bottom of this list is
| | 02:48 | a plus sign, let's
choose email from this list.
| | 02:52 | Now we'll need to hit the Submit
button to submit this new path.
| | 02:56 | If you already have permissions for an email
address, you'll see the email come up right here.
| | 03:03 | Let's add another permission here.
| | 03:05 | Occasionally, you'll see a
field that doesn't result any data.
| | 03:08 | This happens for one of two reasons.
| | 03:11 | Either you don't have the right permission
to retrieve this information or the user has
| | 03:15 | not filled this out in their profile.
In both cases the field will be grayed out.
| | 03:21 | So make sure you check out the API Reference to
see if those fields require any special permission.
| | 03:27 | You can always go back and click on Get Access Token
and add additional permissions for different things.
| | 03:34 | Let's try another one, hit the Submit button.
| | 03:40 | So here we didn't get a birthday for this user,
not because they didn't enter that information,
| | 03:44 | but because we don't have the right
permissions, so let's get another Access Token here and
| | 03:49 | make sure that we include user birthday.
| | 03:53 | It's going to give me a dialog box to make
sure that I allow those permission to the
| | 03:57 | Open Graph API, so I'll hit Allow.
| | 03:59 | It takes me back here, and now I'll resubmit this
request, and now we can see this user's birthday.
| | 04:06 | Let's try something else.
We'll try connection this time like Posts.
| | 04:13 | So occasionally with something like posts,
you'll see a sub plus sign, you can choose
| | 04:18 | additional items from this list to
see subcategories underneath posts.
| | 04:23 | You can also do things like limit how many
results we get back, and you can see the path
| | 04:28 | being built with that information.
| | 04:30 | So the Open Graph API is not only showing
you how to build certain paths, but also how
| | 04:35 | to limit certain paths and
add additional information.
| | 04:39 | Here we can see the next 25 posts.
| | 04:42 | So the Open Graph API Explorer is a really
powerful way to visually construct and test
| | 04:47 | paths for your Facebook Application.
| | 04:50 | Make sure to take some time to play around with it
and explore what can be done with this awesome tool.
| | Collapse this transcript |
| Working with connection subpaths, limits, and subsearches| 00:00 | The Graph API allows you to search through
a user's graph data by creating a path to
| | 00:05 | a user's account, but you can also use sub
paths to look through a user's connection.
| | 00:10 | You can build more complicated queries by
using limits and also making sub queries.
| | 00:15 | Let's take a look at what it takes to make a
really complex connection to the Open Graph.
| | 00:19 | So, I have the Open Graph API Explorer
already open and by default it's creating a path for
| | 00:24 | me with this user's ID, as well
as calling two fields ID and Name.
| | 00:30 | In your apps, you're probably going to be
using the path /me to get the graph of the
| | 00:34 | current user, you can do that in here too.
You can also of course use the ID of any object.
| | 00:41 | If you want to find out about connections,
then you've got a couple of options, you can
| | 00:45 | click on the plus sign
and choose a connection.
| | 00:48 | At first you'll see this field section, if
you scroll down you'll see connections, let's
| | 00:53 | go ahead and pick friends, and I'll hit
Submit, and I'll get a list of the user's friends.
| | 01:01 | You can also see that friend was
added to the list of fields in the path.
| | 01:06 | The second way to do this is by just adding /friends
as part of the path to get directly to a user's friends.
| | 01:13 | Sometimes it's a little bit cleaner to
have access to specific connections, like with
| | 01:17 | the previous path, the Graph API is going to
return the name, as well as an ID for each user.
| | 01:23 | We can request additional fields if you like, so let's add
movies from the list of connections, and I'll hit Submit.
| | 01:30 | Notice that the Graph API sometimes returns
more things then you're asking for, so for
| | 01:35 | example, when we request that movies, it's
also returning category as well as the created
| | 01:40 | time, you can limit the amount of
results by adding a limit field.
| | 01:45 | From this pop-up list, I'll select
limit, and type in a number, say 3.
| | 01:51 | This is going to limit not the amount of movies,
but the amount of friends that are being listed.
| | 01:56 | So here you have one friend,
another friend, and another friend.
| | 02:01 | To display additional results, you can also
use the offset variable, I can just type that
| | 02:07 | one in, that's going to allow
me to see the next three users.
| | 02:14 | This will allow you to create
additional pages of results in your applications.
| | 02:19 | Let's say that now instead of limiting the
amount of friends, you wanted to limit the
| | 02:23 | amount of movies each friend has shared
with you, you could do that by adding the limit
| | 02:27 | command to the movies field.
| | 02:31 | Notice that there is a plus sign inside
of the movies field, so if I click on that
| | 02:35 | and select limit, I can type in a limit for
the amount of movies that I want each result
| | 02:40 | to generate, so I'll select 2, hit Submit,
and now I'm only getting two movies right here.
| | 02:47 | Notice that some of these friends haven't
recommended any movies, but they still appear
| | 02:51 | as part of this query.
| | 02:53 | Let's go ahead and add the name of
the friends so it's a little clear.
| | 02:56 | So you can see the user Cecilia
Largo hasn't recommended any movies.
| | 03:01 | Now within the movies you also have access
to subfields, if you click on this plus sign
| | 03:06 | you can see that the fields are
now different than they used to be.
| | 03:09 | They have things like awards, directed_by,
name, plot_outline, and other things.
| | 03:15 | Let's go ahead and add
some subfields to the movies.
| | 03:19 | You can choose them from this pop-up
list or if you know him just type them in.
| | 03:24 | Take a look at what it's doing here, it's adding
dots to the movies and adding additional commands.
| | 03:30 | One of the commands is limit(2) and the other
one is fields and in there I can type in the
| | 03:34 | additional fields I want, and I'll hit Submit.
| | 03:39 | So now I can see the movies ID, as well as
the name, a link to a picture, as well as
| | 03:46 | a link to the page that the user had
liked to get this in their profile.
| | 03:51 | I also added a description and a number of
likes that tells you how popular this movie
| | 03:56 | is based on how many
people have liked this page.
| | 04:00 | These parentheses also let you go inside
individual fields and pass additional attributes.
| | 04:05 | Take, for example, the image we get back,
we asked for an image link, and it's given
| | 04:09 | us a URL right here.
| | 04:11 | We can pass some parameters
requesting that the image be a certain size.
| | 04:16 | Now I'm going to hold down the Command key and
click on this image, so it'll appear in a new tab.
| | 04:22 | So when I click on that, you'll see that
we requested a 100x100 pixel image, and it
| | 04:28 | tries as best as it can to
give you an image of that size.
| | 04:32 | If somebody has uploaded a smaller image,
it'll just give you whatever image you have.
| | 04:36 | So you may have to develop some CSS just
scale up or down any images that are too big too
| | 04:42 | small, it's a good idea to include a width
and a height parameter just to make sure we
| | 04:46 | limit the pictures to the size that we want.
| | 04:48 | By default, some pictures will be a certain width,
and whatever height the user use, to upload the image.
| | 04:54 | So you can see that by adding some periods
and parentheses, we can really get very detailed
| | 05:00 | in how we construct the path.
| | 05:01 | They can get quite complex, but they're pretty much
like passing a string via a get command on a form.
| | 05:06 | Once you get the hang of the syntax, you can perform
some pretty complex queries into the open Graph API.
| | Collapse this transcript |
|
|
3. Working with User DataImplementing a path on a page| 00:00 | We've been learning a lot about paths
and how to use the Graph API Explorer.
| | 00:04 | Let's take a look at how we can integrate a simple
path in an application and how to work with photos.
| | 00:10 | We'll start off with the document we made
in the movie understanding Graph API paths.
| | 00:14 | I'll start by changing the title, and I'm
going to add a line to link this file to a
| | 00:19 | CSS document I'll create later.
| | 00:22 | I'm also going to delete the
line printing the user's ID.
| | 00:27 | Now let's delete the part where we print out
the user's information, and we'll start our
| | 00:32 | output by creating a new list group.
| | 00:36 | We've added an lgrid for left grid and a
group class so we can style these later.
| | 00:41 | Now we need to iterate
through each piece of data.
| | 00:43 | Let's go over to the Graph API Explorer, and
I'm going to modify this path by adding /friends
| | 00:49 | to the end of the default path.
| | 00:51 | This is going to give me this
user's current list of friends.
| | 00:55 | I can also use /me as the path,
which is what I do on the application.
| | 01:00 | This path is returning the name
of the friend, as well as an ID.
| | 01:04 | Let's go through each friend
by using the foreach statement.
| | 01:07 | Now I'm passing along this data field right
here, because if we look at the Open Graph
| | 01:14 | API Explorer, this object
returns an array of data.
| | 01:18 | Now let's create the code for
putting the user's data inside a list.
| | 01:24 | And now we're ready to output an image.
You don't have to do this from the Open Graph.
| | 01:28 | Default images of objects are public, so the
easiest way to get an image is to create an
| | 01:33 | img tag calling the Graph API, then adding
the ID, plus the /picture path afterwards.
| | 01:41 | So I need to make sure I add the
friends path into the API call.
| | 01:44 | Then I'll switch over to my app and refresh,
and I just see the list of photos come up.
| | 01:51 | You may notice that the app is no longer
printing the user's name right next to the word Hello.
| | 01:56 | When you change the paths so that it points
to /me/friends, you lose access to the first
| | 02:01 | name of the user, since now the data
from Facebook shows only your friends info.
| | 02:05 | It's not a big deal, since what we are most
interested in is experimenting with friends' data.
| | 02:11 | If your server is set to show notices, you may
want to delete line 22 printing Hello to the screen.
| | 02:17 | Now these photos aren't clickable to the
user's profile, so let's go ahead and add that.
| | 02:23 | To get the URL of the current object, you simply
type in facebook.com/the ID number of the object.
| | 02:31 | You want to make sure you use _top as the
target so that the browser doesn't try to
| | 02:35 | load the page into the canvas's iFrame.
| | 02:40 | So we'll save this and go back into our application,
we'll refresh the browser, and now these icons
| | 02:47 | should be clickable to each user's account.
| | 02:51 | It'd also be nice to have the
user's name under each photo.
| | 02:54 | So let's go ahead and add that.
| | 02:58 | So I'm going to go ahead and save this,
and I'll switch over to the browser, refresh,
| | 03:03 | and now the name is underneath each user.
| | 03:06 | This could look a lot better so I'm
going to go ahead and add some CSS.
| | 03:09 | I'm going to create a new CSS file, I
am using transmit as my FTP Application.
| | 03:14 | So I'm going to right-click, select New File
make sure you same name that I used earlier
| | 03:19 | when I created my link to my style sheet, and I'll
right-click and select Open With > Espresso, which is my editor.
| | 03:26 | It opens open in a new window, but I can just
click and drag it right here to enter it as a new tab.
| | 03:33 | So this is a list, I need to start by addressing
that when you float list item tags, the Container
| | 03:38 | loses track of the height of its content.
| | 03:40 | This is known as a Clear Fix, but I like
to use the word Group, instead of Clear Fix.
| | 03:45 | I've created a gist with the code you need,
so you can just copy and paste from right here.
| | 03:53 | And I'll paste that into my CSS file.
| | 03:54 | If you want to learn more about working
with Floats and the Clear Fix technique, check
| | 03:59 | out CSS page layouts in
the online training library.
| | 04:04 | So now let's create a style for the body tag making
sure that we establish some defaults for our document.
| | 04:09 | And now we'll add three simple styles
to make our grid of photos look better.
| | 04:14 | So let's go ahead and save this, and
we'll go back to our project and refresh.
| | 04:23 | And you can see our grid looks a lot better.
| | 04:26 | So applying paths in your projects takes a
little bit more set up, but it's pretty easy,
| | 04:30 | and you work with the foreach command to iterate
through each of the different elements returned
| | 04:35 | by the Open Graph API.
| | Collapse this transcript |
| Setting up a complex app| 00:00 | In the next few movies I'm going to build
a more complicated application that's going
| | 00:04 | to show me Movie Recommendations
from my friends based on their likes.
| | 00:08 | In this video I'll start by setting up the
application structure, so I'll get going with
| | 00:13 | the code from my previous movie, right now this
outputs a grid of images from this user's profile.
| | 00:19 | So I'll start by changing the name of the
application at the top, and I'm going to add
| | 00:25 | a header section to just
explain what this application does.
| | 00:30 | Now I'm going to take this logout link, and I'll
just move it to the top after we check for a user.
| | 00:37 | I'll add a class of notes so that I
can style it a little better later on.
| | 00:42 | In the same way I'm going
to modify the login link.
| | 00:46 | And I'll modify this so that the
text is a little more descriptive.
| | 00:50 | I'm also going to get rid of the Hello text.
| | 00:56 | Our movie will still need a list of our friends but
I don't want it to be in a grid like it was before.
| | 01:02 | We'll use a div to wrap around our data, and
then place all the friend's info in another div.
| | 01:08 | That other div is also going to
eventually contain a list of movies.
| | 01:13 | So first I'll take this URL right here, and
I'll modify it by making it a div, and I'll
| | 01:19 | call that div, moviegroup.
I'll change this closing ul to a closing div.
| | 01:25 | And I'll also get rid of
the code for the list items.
| | 01:30 | Underneath the name that is an h2 tag, I'm going to
add an h3 tag that just says the words Recommends.
| | 01:38 | Now we'll wrap each friend's
information with a class of friend info.
| | 01:43 | So we'll create another div.
| | 01:45 | The class is going to be friendinfo, and
this will also inherit our group class.
| | 01:52 | And we'll also need to close that right here.
| | 01:54 | So I'm going to go ahead and save and
switch back to my app, and I'll refresh.
| | 01:59 | And you can see that you
basically get the same information.
| | 02:03 | You now have a little bit of a headline, plus
you also have the photo and the name of each
| | 02:07 | user as well as the words Recommends.
| | 02:10 | There is a little more code that wraps all
this together into something that we're going
| | 02:14 | to style later, but for right now this
is looking exactly like what we want.
| | 02:18 | So even though we've done a little bit more
set up, and it doesn't quite look right we've
| | 02:22 | modified it, so we'll be ready to add a second path
and get our list of movies from each friend.
| | Collapse this transcript |
| Digging deep into the Open Graph| 00:00 | So far we've created an app that goes one
level deep to dig into our user's Open Graph.
| | 00:05 | In this movie I'm going to show you how to
dig deeper into the Open Graph to show a list
| | 00:09 | of movies our friends like.
| | 00:12 | So we're going to start from the quote from our previous
movie, right now it's displaying a list of friends.
| | 00:18 | I'll start by creating a new path to get
the list of movies from the Open Graph.
| | 00:22 | The path is pretty complicated, but it's
pretty much the same path we used in the movie on
| | 00:27 | working with connections,
sub-paths, limits, and sub-searches.
| | 00:29 | If you want to know more about how to put together
paths, check out the chapter on Working with Open Graph Data.
| | 00:37 | Whenever you're working with a path, it's
a good idea to use the Open Graph Explorer,
| | 00:40 | so I'm going to go there.
| | 00:42 | So I'll switch the application from Graph API Explorer
to our current app. and then I'll start building our path.
| | 00:51 | 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.
| | 00:57 | So I'll add the id, then the name, then the
movies, and from movies I'm going to get only
| | 01:04 | certain fields and the fields that I want
are the id of the movie, plus the name, plus
| | 01:10 | created time, plus picture, and I'm
going to specify a specific type of picture.
| | 01:17 | I want to make sure I get a square
picture, and I want to make sure that that
| | 01:21 | square has a height of 100 pixels
and a width of 100 pixels as well.
| | 01:28 | Then I also want the link, the description,
and the number of likes the movie has received.
| | 01:35 | So let me go ahead and hit the Submit button,
make sure that I get everything correct, make
| | 01:39 | sure that I get the proper return, and I get
this path that shows me that this user doesn't
| | 01:43 | have any movies that they've recommended.
| | 01:45 | However, this one does
have some recommendations.
| | 01:49 | So this application is going to assume that you
have at least one friend with a recommendation.
| | 01:54 | If your PHP server is set to display notices,
then you might get a notice about trying to
| | 01:58 | use a variable with no values.
| | 02:01 | If you're running this on some test accounts
just make sure you add a friend that
| | 02:05 | has at least one movie recommendation.
| | 02:07 | If your Facebook account has a ton of friends
while testing this application, you may want
| | 02:12 | to add a limit right here so
that your browser doesn't hang.
| | 02:17 | That would only limit it to a few
users, instead of your whole entire list.
| | 02:22 | So let me go ahead and get rid of this, and
I'm going to take this path, and I'll just
| | 02:28 | copy it, and then I'm going to switch back into my
application, and I'll paste it in a new variable.
| | 02:34 | So after the line that gets the user Graph
right here, I add a new variable called moviespath,
| | 02:41 | and I wan to make it just equal to the path
that I created in the Open Graph API Explorer
| | 02:46 | 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.
| | 02:56 | Now this is pretty much what I did over at
here except that I am dividing the two steps
| | 03:00 | just to make it easier for me to
update this path separately later on.
| | 03:04 | So we need to adjust our foreach
statement to use this new path.
| | 03:08 | So here I was going through each of the User
Graph data and setting it up as a key and a value.
| | 03:14 | So what I need to do here is switch it to my
new movies Graph data, so I'm using this new path.
| | 03:19 | Let's go ahead and save
this and refresh our screen.
| | 03:23 | It should look exactly the same except that now
it's using this new path that has the additional data.
| | 03:28 | Let's go back over here, what we want to do
is create a list for our user recommendations.
| | 03:34 | So this is going to go after this recommends
area right here, and what I want to here is
| | 03:39 | just output an unordered list and the class
is going to be movies group, plus I'll need
| | 03:47 | to close it of course.
| | 03:49 | So in between these two unordered list tags I'm
going to need to type in a new foreach statement.
| | 03:55 | So I'm going to be nesting two foreach statements,
and whenever you do that you have to be really careful.
| | 04:01 | We can use the value variable from our current
foreach statement to get inside the main data
| | 04:06 | object in our friends object.
| | 04:08 | So if we go back to the Open Graph API Explorer,
you'll notice that right now this object from
| | 04:14 | this path has a data
object in our friends object.
| | 04:19 | From there we need to get to the movies object,
and that also has a data object inside it.
| | 04:27 | So our foreach statement
is going to look like this.
| | 04:30 | So I'll pass it the value, and inside this
we want to access the movies object and then
| | 04:37 | we want to access the data
object inside the movies object.
| | 04:42 | And we want to make sure we use different
variables right here, because we're already
| | 04:46 | using key and value on this line.
| | 04:50 | So I need to make this something like movie key
and movie value so that they don't get confused.
| | 04:59 | So now we can start building our code for
showing this list. Of course, it's an unordered
| | 05:04 | list, so we're going to then have to print
out a list item for each element, and we will
| | 05:09 | need a closing version of that.
So now we can output some of the data.
| | 05:15 | We'll go ahead and start
with some of the easier data.
| | 05:18 | Let's get the name of the movie, plus a
description, and I know I want to style these later, so
| | 05:23 | I'll add some divs with classes so
that I can target them later with CSS.
| | 05:30 | It's always a good idea when you create a
lot of divs or repeating elements to go ahead
| | 05:35 | and put some comments in them.
| | 05:37 | Here we want to access the movie value variable and
get the info of the name that is inside that variable.
| | 05:46 | So that should take us to the name of the movie,
and in the same way we'll do a description here.
| | 05:54 | We'll just put that in a paragraph.
| | 05:58 | So that should take us to the information
for the description which is right here.
| | 06:03 | Some of these descriptions are the
descriptions for the page that this links to.
| | 06:08 | So this one doesn't have an awesome description
of the Avengers, but it's fine for what we're doing.
| | 06:13 | So let's go ahead and save this
and see what happens in our browser.
| | 06:19 | So we're getting a few errors right here.
| | 06:22 | Essentially, it's because some users are
not giving us recommendations for movies.
| | 06:29 | So this first user doesn't have any
recommendation, whereas this second user does.
| | 06:34 | And so we need to go ahead and deal with that.
| | 06:37 | So up to this first line I'm
going to add an if statement.
| | 06:41 | So I'm going to use the count method in
PHP to check to see if the movies data object
| | 06:48 | has at least one value.
| | 06:52 | So if we look at our Open Graph, we're
going to check to see if this movies object, if
| | 06:59 | the data array has at least one element.
| | 07:03 | Since this one doesn't have that element, then
it's not going to run any of this code right here.
| | 07:08 | So I need to do this and also need to
make sure I close it just like I did before.
| | 07:15 | I'll also add some
comments to this other section.
| | 07:20 | So I'll save, come back over here, refresh,
and we don't see the first user, because that
| | 07:28 | user doesn't have any recommendations.
| | 07:32 | So if at some point you don't see any data,
it could also be because we didn't necessarily
| | 07:37 | ask for all the permissions we need
to see this data in our application.
| | 07:42 | So in our login URL you want to make sure
that you add the friends likes to the scope.
| | 07:48 | So right here under scope,
we need to add friends_likes.
| | 07:53 | You may not see that problem in this
particular movie, because as I'm coding in and out of
| | 07:59 | different projects, I am adding some scopes
and deleting some scopes and Facebook is keeping
| | 08:04 | some cookies and sessions that
keeps some of that information around.
| | 08:08 | But just in case, to be safe, make sure the
have to friends_likes in your scope section
| | 08:13 | of the login URL, you may also need to log
out and then log back into the application
| | 08:19 | to make sure you get a new axis token.
| | 08:22 | Let's go ahead and add an
image for each one of our movies.
| | 08:26 | And that one is a little bit more complicated.
| | 08:29 | So if we look at the Open Graph the picture
that we want is in the movies object, inside
| | 08:35 | the data array and is listed as picture.
| | 08:40 | The URL for the image we want is
actually inside another data object.
| | 08:44 | We just can't say picture and then URL, we
have to go through that other data object.
| | 08:50 | A lot of times the Facebook API wraps all
the data inside an object around a data array,
| | 08:57 | and so you have to watch out for that.
So let's go back and add an image.
| | 09:02 | So we have got our headline, our description.
| | 09:06 | So I'll add that right after this movie info section,
and that's going to be a normal looking image tag.
| | 09:12 | Here is the tricky part, the src of the
image is going to be the movie value and then I'm
| | 09:19 | going to access the picture object, then I'm
going to access inside that, the data array--and I need
| | 09:27 | to put these in quotes--and then inside that I need to
access the URL element of that array.
| | 09:34 | Then I'll need to add the alt tag like we always do
with images, and that was just going to get the name.
| | 09:40 | I can also add a title so that when I rollover
images on certain browsers it shows me the name as well.
| | 09:47 | So it's just the same thing as the alt tag just
call it title, and I should have a space right there.
| | 09:56 | So let me go ahead and save that, and if I
did everything correctly, I should be able
| | 10:00 | to see the picture of each movie right on
the top of the name of the picture, and there
| | 10:05 | it is at 100x100 pixels.
| | 10:08 | That's another way of getting an image that's bigger
than the default tiny image that you get for the users.
| | 10:14 | So let's go back, and we actually want to make
these clickable to the different pages for the movies.
| | 10:20 | I'll need to add an anchor tag right up here.
| | 10:23 | So we'll do an anchor tag.
We'll close that one right here.
| | 10:29 | If when I get a link to the page, and we're
already in the movies object inside the data
| | 10:34 | array, then we can just go to this link URL,
that will take us directly to the page.
| | 10:39 | So I'm going to go back into my application and
in here all I need to do is type in movievalue,
| | 10:48 | and then I just access the link item.
| | 10:50 | Whenever you do a link that you want to take
over the entire screen, you need to make sure
| | 10:55 | that you add a target of _top, or it will
try to load within the canvas iFrame, and
| | 11:03 | that a lot of times will not load anything at all,
and you'll be wondering why that doesn't work.
| | 11:08 | So make sure you add target= _top.
| | 11:10 | So I'm going to save this, back to our browser,
back into our application, refresh, and now
| | 11:19 | these should be clickable to the pages,
and there's the Avengers page, awesome.
| | 11:26 | So creating an application involves
weaving in and out of the user data.
| | 11:31 | Before you master the Open Graph, you need
to learn to iterate through different objects,
| | 11:35 | as well as how to access just the
item you need in the Open Graph.
| | 11:39 | A really good tip is to always have the
Graph API Explorer open so that you know how to
| | 11:45 | build your objects and your associative
arrays to get to the right information.
| | Collapse this transcript |
| Styling your app| 00:00 | So right now the data we are getting from the Open
Graph API is great, but it looks a little boring.
| | 00:06 | So it's time to add some
style to our application.
| | 00:08 | We will have to add some additional divs so that
we can target specific areas a little bit better.
| | 00:14 | So let's dig right into the HTML.
| | 00:17 | Right now, we have a div for each friend,
called friendinfo, and it's on this line right here.
| | 00:24 | So I really want the friendinfo to be just a
div for the top part of my friends information
| | 00:29 | just the part with the photo, the name
of the friend, and the word Recommends.
| | 00:33 | So I am going to take this div and
close it right after the word Recommends.
| | 00:45 | I have an extra div down here, and I can't have that, but
I still need another div that encompasses each friend's info.
| | 00:53 | So right on top of what used to be the friendinfo div,
I am going to grab this and paste another
| | 00:59 | copy of it on top and just call it friend.
| | 01:04 | Now I have a div for the friends information
just these three lines, and then another div
| | 01:09 | for all the information, including
the movies that are within each friend.
| | 01:14 | One more thing that I need to do is move this div
for movieinfo, and put it right on top of the wrapper.
| | 01:20 | I want movieinfo to be just
the information about the movies.
| | 01:24 | I want to take that and make it a
popup when I roll over each of the images.
| | 01:29 | So now we are ready to get styling.
| | 01:31 | Let me go ahead and save this,
and I'll refresh this document.
| | 01:34 | It's not going to look any different,
the divs are just moved a little bit.
| | 01:38 | So I am going to switch over to my
Style Sheets, and I'll start working on some styles.
| | 01:42 | The first thing I am going to do is I am
going to get rid of everything called lgrid.
| | 01:48 | That's some old styles that we use to
make a grid of images on an earlier movie.
| | 01:53 | So I want to do something that I can only
do on my particular editor, and that is turn
| | 01:58 | on a feature called live preview.
| | 02:00 | To do that I need to go right here to the
Style Sheets and Select Manage Style Sheet Overrides
| | 02:07 | and then override the style sheet that it's
picking up for this preview window with the
| | 02:12 | style sheet that I have open here.
| | 02:14 | It's going to add a little bit of code right here,
and that's not really going to bother anything.
| | 02:18 | It's just a comment.
| | 02:20 | But it's going to make the application be
able to apply the styles as I'm typing them,
| | 02:24 | and that is going to be really useful.
| | 02:26 | First thing I want to do is I want to create
a style for my anchor tags and my anchor tags
| | 02:32 | are going to be a color: rgb: and the
RGB color is going to be 27, 129, and 140.
| | 02:42 | That makes them this blue right here.
| | 02:45 | So the cool thing about this editor is as
I'm typing things in, you can see what I'm
| | 02:48 | doing on the right-hand side, and that's going to
become really useful as I do some of the other styles.
| | 02:53 | So I have a header section and in my FTP program,
I've already uploaded a copy of this logo right here.
| | 03:02 | It's going to be the logo that's going
to appear right up here on the header.
| | 03:07 | I want to add the code for the header section
and first thing I'll do is I'll add some padding
| | 03:14 | just to make sure that all the
stuff moves to the right-hand side.
| | 03:17 | So 10 pixels, 10 pixels, and then 0 and 370.
| | 03:24 | That scoots everything over to
the right leaving room for my logo.
| | 03:27 | Then I'll set the height to be 130 pixels
and the color is going to be 555 just a little
| | 03:36 | bit of a dark gray.
| | 03:39 | Font size is going to be .9 ems, and
this is where I am going to put in my logo.
| | 03:43 | The background is going to be a URL and the
name of that file is recommendatorlogo.png.
| | 03:52 | That brings in that logo, and
it's in a nice position already.
| | 03:58 | So I had added a style a while back for the notes,
this logout URL and the login URL called notes.
| | 04:05 | So I am going to style that now.
| | 04:07 | Let's have padding of 10 pixels just to
give it some breathing room from the left.
| | 04:12 | Let's go ahead and style my friendinfo.
| | 04:15 | So friendinfo, this is going to have a simple 1
pixel border at the top, and I'll give it a color of AAA.
| | 04:26 | It gives it a nice light gray color.
| | 04:29 | I will add a little bit of margin just to
give it a little more breathing room and a
| | 04:34 | little bit of padding.
| | 04:35 | I will set the background to an
rgba color, 242, 197, 62, and .3.
| | 04:50 | That makes it have a little bit
of a blend with the background.
| | 04:55 | I'll add a little bit of
margin at the bottom of 1px.
| | 04:57 | You might not be able to see everything
until I put all the styles together, but you'll
| | 05:02 | get an idea of what's
going on as I'm typing things.
| | 05:05 | So next I am going to do
the friendinfo headline 2.
| | 05:09 | I'll change the font and let me
change these sizes here a little bit.
| | 05:17 | So I am just giving some color to the type
of the headline level 2 and just adjusting
| | 05:22 | the margin to the left just to push it in a
little bit over and delete the padding here.
| | 05:30 | So let me go ahead and get rid of that margin.
| | 05:38 | friendinfo headline level 3,
it's also going to have a font tag.
| | 05:43 | A little bit smaller font, and I
am going to give it a red color.
| | 05:49 | So color is going to be another rgba color.
So it's going to have that red color like that.
| | 05:57 | I'll get rid of the
margin and the padding as well.
| | 06:01 | Now let's work with the image in the
friendinfo area and what I'll do is I'll float it to
| | 06:08 | the left and then I'll add a margin
on the left-hand side of 10 pixels.
| | 06:15 | I forgot to put the letter here in friend.
| | 06:17 | But you could see that, that does just kind of
push the headlines to the right of the image.
| | 06:23 | Then I'll give it a little
bit of a margin to each side.
| | 06:27 | So margin-left and margin-right,
and I'll do 8 pixels to the right.
| | 06:32 | That just moves it in a little bit, and now
that's looking like a nice little info bar. Awesome.
| | 06:37 | Let's go ahead and style the movies.
This is the list of movies that are right there.
| | 06:44 | I'll clear out the margin and the padding,
and I'll change the list style to nothing,
| | 06:50 | so it doesn't have those bullets.
| | 06:52 | We don't see them, because they're actually pushed
over to the left, but they were there a minute ago.
| | 06:56 | Now I'll add a little bit of padding.
| | 07:01 | Then I'll control the styles for each of
the list items inside the movies class.
| | 07:08 | I am going to float these to the left.
| | 07:10 | I am going to set the position of them to relative
and the padding on the right-hand side to 10 pixels.
| | 07:20 | You are not going to see what this is
doing quite yet, but by setting the position to
| | 07:25 | relative, I am going to be able to float
this information for the movie later on.
| | 07:30 | Now let's take the movie information.
So, movies li .movieinfo.
| | 07:38 | First I am going to style it
and then I am going to hide it.
| | 07:40 | So I am going to do a webkit-border-radius of
10 pixels and then I will add a moz-border-radius
| | 07:54 | for Firefox and just a standard
border radius for normal browsers.
| | 08:01 | So the padding to 20 pixels just
add a little bit of room there.
| | 08:06 | I am going to set the font size to
.8 ems and make it a little smaller.
| | 08:11 | It doesn't need to be that big.
| | 08:13 | Set the width of this to 300 pixels, and
I am going to set a max height for this.
| | 08:19 | Max height is going to be only 200 pixels
just so that if I ever get into a description
| | 08:24 | of a movie that's too long, then
it's just going to crop it off.
| | 08:27 | What I am going to do next is actually hide
this by changing a display property to none.
| | 08:35 | So that actually hides all that
information that I just styled.
| | 08:39 | So if I take this off you could see it, if
I undo it, you see that they're gone, and
| | 08:43 | now that's making our little images
right there just be right next to each other.
| | 08:49 | I think I can just make this 5px,
0 on the styles for the movies.
| | 08:59 | Now I am going to a apply style to the
movieinfo wrapper, that internal part of that movie.
| | 09:05 | So I'll set the max height to be 100 pixels,
and I am going to set the overflow to be hidden.
| | 09:13 | So you are not going to see that because
all that stuff is being hidden right now.
| | 09:16 | But that's going to actually crop the
height of the wrapper and make the overflow still
| | 09:22 | scrollable but not necessarily visible.
| | 09:26 | So as I said this information right now is
hidden and with this next piece of code I
| | 09:30 | am going to actually show it. So, ul.movies.
| | 09:33 | Whenever you hover over a list item, I
want you to do the following to the movieinfo.
| | 09:40 | So here I'll set the background color of
this, because it hasn't been showing yet.
| | 09:43 | So it doesn't matter what the
background color was before.
| | 09:46 | This is going to be another semi-transparent color,
and I am going to set the display of it to block.
| | 09:54 | Now when I hover over these things, you
actually are going to see the description up here.
| | 10:01 | It's kind of shifting things around.
So I am going to fix that.
| | 10:05 | To do that I'll set the position to absolute.
| | 10:09 | So you see that it's not
shifting the tiles around anymore.
| | 10:12 | Fortunately some of these
are underneath the pictures.
| | 10:16 | So I need to fix that as well.
| | 10:18 | I'll align these to the bottom of each
image by 115 pixels, and to the left by 0.
| | 10:27 | Then I'll set the Z index to something
bigger than 0 so that it will appear on top.
| | 10:33 | So you could see now how that looks.
| | 10:35 | You can see some of the cropping now that's
happening when I roll over some of these items
| | 10:40 | that are getting cropped off.
| | 10:42 | And that's okay, because people are still
going to be able to click on these images
| | 10:45 | to get to the page with more of a description,
but this just gives them a quick idea about
| | 10:50 | what the page is supposed
to be about. So that's okay.
| | 10:54 | So let's work with the styles and the
movie information a little bit more.
| | 10:57 | So I'll do movies li .movieinfo h3.
So this is the headline of the movie.
| | 11:06 | I'll set the margin and the padding to 0,
that's just so you don't get running it out.
| | 11:10 | My color is going to be just
a hexadecimal color, 1B818C.
| | 11:19 | Change the line height to be 1 em, and add
some padding just to the bottom of 5 pixels.
| | 11:27 | You can see now that the headlines look a
little bit a better than they did a minute ago.
| | 11:32 | So I like that, I want to do all this again.
| | 11:35 | So I'll just copy this right there, and I
know that I now want to modify the paragraph
| | 11:40 | itself, and I wanted to set the
margin and padding to 0 just like I did.
| | 11:45 | My color is going to be different.
I'll just set it to 444.
| | 11:49 | It's just like a gray color
and the line I'll set to 1.4 em.
| | 11:56 | So now when we roll over some of these, the
paragraphs have a little bit better spacing
| | 12:00 | between each line and they look a little nicer.
| | 12:03 | Finally, I am going to take the images right
here and style them a little bit differently.
| | 12:12 | I am going to set the width
and the height to 100 pixels.
| | 12:15 | Then I am going to give them a little border.
| | 12:18 | Now this is because I am setting the width
and the height to 100x100, because sometimes
| | 12:22 | you get images back from the
server that are not exactly 100x100.
| | 12:27 | I know that I asked for them, but sometimes
you get something other than what you asked for.
| | 12:31 | So you may have images that are maybe more
like posters and they are a little bit taller,
| | 12:36 | or you may have images that
are actually a tiny bit smaller.
| | 12:40 | People just didn't upload
very high-resolution images.
| | 12:43 | This assures that I am going to get 100x100 pixel
image, whether the image is too big or too small.
| | 12:48 | Then let's add a nice round edge.
That's already looking a lot better.
| | 12:55 | So really styling Facebook
applications is exactly like doing any other page.
| | 12:59 | So I know this feature that I have called Live
Preview, it's not going to be on everybody's browser.
| | 13:02 | I am going to go ahead and save this, and
I'll go back into my application and refresh.
| | 13:09 | So styling a Facebook application is
exactly like styling any other page.
| | 13:14 | We have a lot of great courses on CSS.
I really like the CSS page layouts course.
| | 13:20 | So make sure you check it out if you
need help understanding how CSS works.
| | Collapse this transcript |
| Setting up pagination| 00:00 | The account I am using for this project has
only a handful of friends, and in reality people
| | 00:04 | can have hundreds of relationships on Facebook.
| | 00:07 | So we need to learn how to take large
amounts of data and divide it into pages.
| | 00:12 | So let's take a look.
| | 00:13 | So limiting the number of
results is actually quite easy.
| | 00:16 | All you need to do is add the keyword limit
to the end of your path and run your app again.
| | 00:22 | I am going to make it a little more official.
| | 00:23 | I am going to create a variable called
quantity and assign it a value of how many users I
| | 00:28 | want to ask from the open graph at a time.
So that's going to go up here.
| | 00:33 | I'll just create a variable
called qty and give it a number of 3.
| | 00:37 | I don't have that many users.
| | 00:39 | So you can make that number bigger if you
want to, but I have about eight friends in
| | 00:43 | this account, so this will
work a little bit better.
| | 00:46 | Now I am going to go to my path which is
right here, the moviespath, and I'm going to add
| | 00:52 | a limit of my quantity here.
| | 00:56 | Let me go ahead and save that, and I'll refresh
this app, and now we should only get a few accounts.
| | 01:04 | So now I am only getting two users, because some
users haven't liked any movies so they don't appear here.
| | 01:09 | So that's probably going to
happen to your application.
| | 01:12 | It's not a big deal.
| | 01:13 | Just remember that you may not get three
results even if you ask for three users.
| | 01:17 | So if I want to see the rest of the info,
I need to separate my requests into pages,
| | 01:22 | and I need a few things for that.
| | 01:24 | First, I need to find out how
many friends the current user has.
| | 01:27 | To get that information, I
can't use the moviespath.
| | 01:31 | The moviespath is now
being limited by our quantity.
| | 01:35 | So luckily I have another path called the user_
graph that I'm not really using in this application.
| | 01:41 | So I can take that to make a call
that returns the number of friends.
| | 01:44 | So right after this call right here to
this user_graph I can create a variable called
| | 01:50 | how many friends and use PHP's count method
which counts the number of items in an array
| | 01:59 | to pull the user graph and the
data object inside that user_graph.
| | 02:05 | Remember that when you query the Open Graph,
if you take a look at the Open Graph API,
| | 02:09 | and you get the user's friends, you're going
to get all the user friends info, and it's
| | 02:14 | going to be in a data array.
| | 02:17 | So we have to go into the data
array, not just the user_graph object.
| | 02:21 | Let's go ahead and print out the
number of friends we have on this account.
| | 02:25 | I am going to scroll down.
| | 02:29 | Right on top of this I'll add an echo command, and it's
going to print out the number of friends this user has.
| | 02:39 | I am also going to modify this div, because
it doesn't have a comment and just to make
| | 02:43 | sure that I put that this
is part of the paging area.
| | 02:46 | So I am going to save that, switch over to
my application, and refresh my screen,
| | 02:54 | and at the bottom of the application
it should say that I have eight friends.
| | 02:58 | Obviously, yours will be different, but this
account only has eight friends, and that's perfect.
| | 03:03 | Now that we have both the quantity of users
we want to use per page and the total number
| | 03:09 | of users, we can calculate the total number
of pages, the number of the current page,
| | 03:14 | and the offset we need for the next page.
| | 03:17 | So right after this line right here I am
going to add a new variable called totalpages, and
| | 03:24 | I am going to set it to $howmanyfriends
divided by the quantity or the amount of friends we
| | 03:32 | want to display per page.
| | 03:35 | So total page is going to be the amount of friends we
have divided by the $qty we want to show per page.
| | 03:41 | We are using the ceil method here, because
this number can have a remainder if everything
| | 03:45 | doesn't divide properly.
So ceil is going to round the number up.
| | 03:49 | So in other words, if we have seven friends,
and we want to ask for three users at a time,
| | 03:53 | 7 divided by 3 is 2.33, and we don't want to
just round the number, because that would give us 2.
| | 04:00 | If there is more than two pages
in reality we need three pages.
| | 04:04 | Even if that last page only has one result.
| | 04:07 | So let me just make sure I did everything
correctly, and I am going to just make a copy
| | 04:12 | of this $howmanyfriends, and I'll
output the variable $totalpages here.
| | 04:18 | Even though we are not going to use it in
our application, I just want to check to see
| | 04:22 | that we have everything typed in perfectly.
| | 04:25 | This is a really good idea.
Occasionally, you're going to make some typos.
| | 04:27 | You don't want to go too far before you test
to see that everything is working properly.
| | 04:31 | So I am going to save and switch over to my app
and refresh, and it says you have three pages.
| | 04:38 | Sometimes you will see
this kind of weird scrolling.
| | 04:41 | This is because the canvas
iframe is sort of getting cropped off.
| | 04:45 | You can refresh the page.
| | 04:46 | That sometimes helps a little bit or just kind of
scroll up and down, which is what I am doing here.
| | 04:50 | So it's correctly saying that since I am dividing
my pages three users at a time, this application
| | 04:56 | is going to end up having three pages.
In order to get to each of these pages,
| | 05:02 | we are going to need to apply
an offset to our Open Graph path.
| | 05:05 | To apply an offset to our Open Graph path,
we are going to be creating links on our page
| | 05:09 | with a variable called offset.
| | 05:12 | We need to go ahead and create a variable that
reads the offset from the URLs we will be creating.
| | 05:17 | So I am going to go all the way to the top
of my file, and right after I get this quantity
| | 05:22 | variable I want to create a $currentoffset
variable and set it to read the server command
| | 05:28 | $_GET and get a value from URL called offset.
| | 05:35 | So now we'll modify our paths
take advantage of this new value.
| | 05:44 | Now that I have this, I am going to
create a couple of other variables.
| | 05:46 | So I'll scroll down all the way down here, and I'll
create a variable for the number of the current page.
| | 05:56 | That's going to be the value of the currentoffset
divided by the amount of users I want to display per page.
| | 06:02 | Normally, that would return a set of values
that start with 0, so I am going to add 1 to it.
| | 06:07 | And then finally, I am going to
get the value of the $nextoffset,
| | 06:11 | what I need to send to the next
page to get the next number of users.
| | 06:19 | I'll add some comments here.
| | 06:24 | As I said, it's always a good idea to
make sure that you check everything.
| | 06:27 | I am just going to copy this line,
paste it a couple times,
| | 06:31 | and just modify the variables that
I am getting here just to see
| | 06:35 | if I have done everything correctly.
| | 06:37 | So this is going to be Current Page, and this is going
to be Next Offset, always a good idea to check your work.
| | 06:47 | So we'll save that.
| | 06:48 | Let's go ahead and go to our app and refresh it.
Hopefully, we won't get any errors. Excellent.
| | 06:51 | And if we scroll it to the bottom,
we should see all that information.
| | 06:56 | So this app is going to have three pages.
| | 06:59 | This is page number one, and the next
offset will start after user number three.
| | 07:04 | So just to make sure, let me go
back and delete these three lines.
| | 07:09 | I am not going to need them in my
final application, I will refresh.
| | 07:14 | Make sure that data is no longer there.
| | 07:16 | I just want to have how many friends the
user has and then I want to go back to my page.
| | 07:21 | So to create pagination you need to figure
out the amount of users to list per page,
| | 07:26 | how you want to offset each call to the Open
Graph API, and based on that you can set up
| | 07:31 | variables that calculate the total amount
of pages, the current page number, and the
| | 07:36 | offset of the next page.
| | 07:37 | Since we have that ready, we will be tackling the
code for showing our pagination in the next movie.
| | Collapse this transcript |
| Showing navigation| 00:00 | In the last movie we set up the variables we need
to be able to navigate through our different pages.
| | 00:05 | In this video I'm going to walk you through
showing our pagination in our Facebook application.
| | 00:11 | So first things first. We only want
pagination on a page if there's more than one page, so
| | 00:17 | I'll add an if statement to check for that, and
I'm going to end that if statement right here.
| | 00:27 | So now I'm going add a div so that I can
style our paging section. Let's add a line that
| | 00:34 | lets our users know which page they're on.
| | 00:40 | The navigation I'll build will have
previous and next buttons, plus a series of numbers
| | 00:45 | so that users can jump to each page.
| | 00:47 | So we need to create a div
for this section as well.
| | 00:50 | I am going to call this pagenav.
| | 00:57 | To make it look a little bit clearer, I'm going
to modify this comment to say moviegroup, and
| | 01:02 | let me go ahead and indent
this a little bit better.
| | 01:10 | Let me go ahead and Save this, and to make
sure we haven't made any mistakes, I'll switch
| | 01:13 | back to my application, and
I'll hit the Refresh button.
| | 01:16 | Now I'm going to scroll all the way to the bottom,
and it should say something like Page 1 of 3 right here.
| | 01:25 | Now we're ready to create our links.
| | 01:26 | We'll start with the next link or the next
button. I want to check that this isn't the
| | 01:31 | last page, because we don't need a next button on
the last page, so we have a variable for next offset.
| | 01:37 | If the next offset is bigger than the number of
friends we have, then we can output this link.
| | 01:43 | So what we're doing here is passing the
URL of this page, which we do by checking the
| | 01:48 | server variable called _server and pass in
the command SELF, it gives you the URL of
| | 01:54 | this page, to that we add the offset
by passing our next offset variable.
| | 02:00 | So it looks good to me. I'm going to save
this and switch over to my app and then refresh
| | 02:05 | the page, and now I can see a Next link.
| | 02:09 | So as I said, sometimes this page come a
little funky because of the iFrame, so just scroll
| | 02:15 | up and down until it looks good to you.
| | 02:17 | So if we roll over this link, you can see
at the very bottom that we are calling the
| | 02:20 | same page, plus and the offset of three, so
I'll click on that, and it should be going
| | 02:26 | to the next group of data.
| | 02:27 | Now remember there are some users that did
not like any movies, so that's why this page
| | 02:32 | only has one result. Just go ahead and click
on Next again, and it takes us to the last
| | 02:37 | page, and that's Page 3 of 3, so we know our
navigation to go forward is working properly,
| | 02:44 | and now we need to build
navigation to go the other way.
| | 02:48 | So now we can do a Previous link, it's
pretty similar to the Next link, so I'm going to
| | 02:52 | copy this code, and I'll paste it right on top.
I'll modify its variable to be the current
| | 03:04 | offset minus the quantity, which will take
us back to another page, and this time I'm
| | 03:10 | going to check that the current offset is
less than or equal to the quantity of users,
| | 03:17 | that's to make sure that there
is no link on the first page.
| | 03:22 | On the first page, the quantity is going to
be the same as the current offset, so this
| | 03:26 | will not show, and I need to modify
the class of this span to say Next.
| | 03:32 | So let me save that, and I'll switch over to my
app, refresh the page, scroll down to the bottom.
| | 03:39 | I see the next link, so I need to click on
this first to go to my next page, and now
| | 03:44 | I see a Previous link, as well as a Next link,
let's click on the Previous link, it takes
| | 03:49 | us back to our first page, click on Next a
couple of times to go to the last page, make
| | 03:56 | sure we don't have a Next link on the last
page, and that our Previous link does show
| | 04:01 | up, so this is working great.
So now let's go ahead and output page numbers.
| | 04:06 | For that we're going to use a forloop, and we'll
do that in between the Previous and Next links.
| | 04:15 | So we're going to take to the I variable
in the loop is greater then the total pages,
| | 04:25 | and it's going to be a little strange we're
going to create a span, but we're not going
| | 04:29 | to close it right here; we're going to leave
it open so that we can add another class if
| | 04:33 | this happens to be the current page.
Because of the zero indexing of this loop, we need
| | 04:38 | to check for current page -1.
| | 04:46 | Now we can close the opening part of our span tag,
and I'll go ahead and output the closing tag as well.
| | 04:53 | Now we're ready to output each page number
that's going to be a regular anchor tag, but
| | 05:03 | that is going to point to the current page
and then we'll pass it an offset variable,
| | 05:13 | and the offset variable will be the current
number of the loop times the quantity, which
| | 05:19 | will be how much we want to offset on each
page, and as the label, we're going to want
| | 05:25 | the I variable +1, because it's zero indexed.
| | 05:30 | So, it looks like I missed the comma, let
me make sure I put this comma right here,
| | 05:36 | and I need to fix another typo at the
bottom of the screen. I want to add a closing angle
| | 05:41 | bracket to this div right here. I'll save
it, and I'll refresh my page, scroll down
| | 05:51 | to the bottom, and even though it doesn't look that
great right now, we can see that there's pages 1, 2, and 3.
| | 05:58 | The number 1 sets you need to offset 0, the
number 2 to offset 3 and the number 3 to offset 6.
| | 06:05 | So that should paginate correctly. If we
click on those links, we go to the second page,
| | 06:09 | you can see the Previous and
Next links right next to each other.
| | 06:12 | So creating the pages is just a matter of
putting our variables to work that allow us
| | 06:16 | to programmatically create
the links to different pages.
| | 06:20 | This doesn't look very good right now, but in the next
movie I'm going to show you how to style our navigation.
| | Collapse this transcript |
| Styling the navigation| 00:00 | So our navigation at the bottom of our
page is working very well, but it doesn't look
| | 00:05 | great and is a little bit hard to use since these
numbers are so close together, so let's take a look.
| | 00:10 | I have a live preview of my application on
the right-hand side and the CSS on the left.
| | 00:15 | I'm going to scroll all the way down to the end of
the CSS, and I'm just going to add a few classes here.
| | 00:21 | So I have a paging section and to that I'm
going to add a little bit of padding, just
| | 00:27 | 10 pixels, that just moves
everything a little bit to the right.
| | 00:30 | And then I'm going to align the text to the
center, so it moves everything to the center.
| | 00:35 | Then I'm going to take the page
navigation, which is just the numbers, and
| | 00:39 | I'm going to add a border at the top and make
that border dotted and just leave it at 333.
| | 00:46 | Plus, I'm going to add a little bit of padding
just at the top and bottom and not on each side.
| | 00:57 | Then I'm going to do the numbers, so I'll
take the paging and then the number class
| | 01:02 | and target the anchor tags in there.
| | 01:05 | And inside the anchor tags I'm going to add
a little bit of padding just to either side,
| | 01:11 | that gives us a little bit
more breathing room right here.
| | 01:13 | I'm going to modify the links or the text-
decoration to be none, so the inside numbers in between
| | 01:20 | the previous and the next links are not going to
have underlines, even though the next link will.
| | 01:26 | And finally, I'm going to add a
little bit of style to the current number.
| | 01:33 | So the links that are styled with an extra
class of current, that should be the current
| | 01:40 | number, are going to get a little bit of a different style,
so I'll style them as inline-blocks, color them white.
| | 01:52 | I need to make sure that these are together
like that, since they're part of the same class.
| | 01:59 | I'm going to modify this item to be an inline
block, that way I can control the width and
| | 02:05 | the padding, as well as have a white color.
| | 02:08 | And then I'll give it a background color that's
going to be the red that I'm using in other places.
| | 02:15 | That looks pretty good.
| | 02:18 | And I'm going to add a
little bit of a border radius.
| | 02:24 | That makes the current page be a circular dot
of that color, which I think looks really nice.
| | 02:30 | And I'm going to add the prefixes for
Mozilla and just the regular border-radius prefix.
| | 02:40 | When I give that number that red background,
it actually looks like that number is a little
| | 02:45 | bit closer to the number 2.
| | 02:47 | So I'm going to add a little bit of a margin
of nothing at the top and bottom and 5 pixels
| | 02:53 | on each side just to give it a little bit
more breathing room so that it displays nicely.
| | 02:58 | And that's pretty much it.
| | 03:00 | I'm going to Save this, and I'll hit the 2
link right here, and if I go to the bottom,
| | 03:04 | you can see that that's showing up pretty
well, the previous link works well, and the
| | 03:09 | next link looks really good, everything
is center, and that looks really good.
| | 03:12 | With just a few lines of code
we've made our navigation look great.
| | 03:16 | So if you want to learn more about CSS, make
sure you check out the online training library
| | 03:20 | for courses like CSS Page Layouts.
| | Collapse this transcript |
|
|
4. Using FQLUnderstanding FQL| 00:00 | Using the PHP SDK gives you the benefit of
being able to access the Open Graph with a
| | 00:05 | special language called FQL.
FQL stands for Facebook Query Language.
| | 00:11 | And if you're used to SQL, then FQL will be
very similar to you, so most PHP developers
| | 00:16 | should be able to pick it up quickly.
| | 00:18 | The language has some features not in the
Graph API, like the ability to batch multiple
| | 00:23 | queries in a single call.
| | 00:25 | Unlike SQL, the FROM clause can only contain a single
table, that means you can't do joints with this language.
| | 00:32 | However, the IN keyword can do
sub queries, but only within its own scope.
| | 00:38 | Queries must be indexable, which means
that you can only perform queries that include
| | 00:42 | WHERE on fields that are indexable.
| | 00:44 | So you can't, for example, say, give me
the user ID of every user in Facebook.
| | 00:49 | You have to qualify that by saying that you
want users who are also your friends.
| | 00:54 | You can check the documentation to see which
fields need to be used in the WHERE clause.
| | 00:58 | Let's look at the tables on the left of the
documentation and click on any one of these
| | 01:02 | tables, and the fields that are
indexable will be marked right here.
| | 01:06 | So you need at least one of
those in your WHERE clause.
| | 01:09 | You can use ORDER BY and LIMIT clauses. Just
remember that this is not full SQL so there's
| | 01:14 | always limits to what FQL can do.
| | 01:17 | Also the data is returned in the JSON format, so
we have to parse that using the file_get_Contents
| | 01:22 | method to read the queries and then feed
those results into the JSON-encoded method.
| | 01:27 | That will give us an associative
array that we can work from.
| | 01:30 | So although you might be disappointed that
FQL is not as powerful as SQL, it does give
| | 01:34 | you another great tool to dig into the
user data available through the Open Graph.
| | Collapse this transcript |
| Using the Graph API Explorer with FQL| 00:00 | Using FQL lets you access the Open Graph in a
way that is not exactly like Graph API paths.
| | 00:05 | So let's take a look at how to test
FQL access with the Open Graph Explorer.
| | 00:10 | You can find the Open
Graph Explorer at this URL.
| | 00:14 | Once you're in the
Explorer, click on the FQL tab.
| | 00:16 | It's not as easy as the Path Explorer because
you don't have the easy to use expansion Plus
| | 00:21 | signs that you do with the Graph API, so
you really have to know what commands you want
| | 00:25 | to send and type them in manually.
| | 00:26 | It's a good idea to have the
FQL documentation on another tab.
| | 00:31 | So, for example, I can come in here
and type in what looks like an SQL query.
| | 00:40 | I'm going to hit Submit, and I
basically get my user information.
| | 00:45 | So looking at this you may think, hey, I can
just get all the columns by using the star token.
| | 00:50 | Let's try that. If you submit that, you'll get an error.
Notice that SELECT * is not supported.
| | 00:57 | Please manually list the
columns you are interested in.
| | 01:00 | So this is proof that using an FQL query
is not exactly like using an SQL query.
| | 01:05 | So let's try a few fields.
| | 01:14 | Remember that to make queries in FQL you have to
use at least one indexable field in the WHERE clause.
| | 01:20 | So for users the main indexable
fields are uid, username, and name.
| | 01:26 | If you ever want to check, just go to the
Facebook Query Language documentation and take a look
| | 01:31 | at the tables on the left-hand side.
| | 01:33 | When you click on a table, say like Album,
you can see the fields that are indexable,
| | 01:38 | there should be at least one of those in the
WHERE clause, and you can see the other fields
| | 01:41 | that you can search for.
Let's take a look at the user fields.
| | 01:45 | So there's a lot of information
that we can gather from this.
| | 01:48 | Let's go back and try a subquery.
| | 01:54 | So this query lets me
get all my friends at once.
| | 01:59 | If I want to, I can limit the query with the
LIMIT field, and I can offset the query with
| | 02:05 | the OFFSET field. That allows me
to paginate through different data.
| | 02:09 | Let me get rid of these for a
second, and I'll hit Submit again.
| | 02:14 | You may notice that there are some friends
that haven't rated any movies, like this first
| | 02:17 | friend right here, and this other one down here.
So we can actually test for that in our query.
| | 02:24 | So we'll add AND movies not
equal to nothing and hit Submit.
| | 02:31 | And that allows me to get only the
friends that have recommended movies.
| | 02:35 | So there's a lot more you
can do with the FQL Explorer.
| | 02:38 | Make sure that you browse the FQL
documentation and take a look at the different tables and
| | 02:44 | try requesting some of these different fields.
| | Collapse this transcript |
| Integrating a query into an application| 00:00 | Integrating FQL queries into your application is
pretty similar to feeding paths to the API method.
| | 00:06 | Let's take a look at some of the
differences in a very simple example.
| | 00:10 | So I have a document that looks pretty much
like the examples we've been using, it requests
| | 00:14 | a Facebook object with your appID and secret,
than checks to see if the user is logged in
| | 00:19 | and creates a logout and login URL.
| | 00:21 | Now, if you remember from the chapter on
accessing Open Graph data, this page in the Facebook
| | 00:27 | PHP documentation has
instructions for creating paths.
| | 00:31 | If you scroll all the way to the bottom and
then come up a little bit, you can see that
| | 00:36 | we pass a path to the Facebook
API object and optionally a method.
| | 00:41 | This is how you make FQL calls, you simply
add a method variable with the value fql.query
| | 00:46 | to the array we send to the API
method, plus the query that you want.
| | 00:51 | So let's take a look at how this is
going to work on a simple example.
| | 00:54 | I'm going to create a call to the
Graph API called $moviefriends_graph.
| | 01:01 | This is going to be fed an
array with a couple of variables.
| | 01:09 | One is going to be the method fql.query and
the other one is going to be our query, and
| | 01:17 | I'm going to want double quotes instead of
single quotes here, because some of thing
| | 01:20 | I'm going to pass will include single quotes.
| | 01:23 | So let me delete this comma and just delete
that right there, and now we're ready to insert
| | 01:28 | the query that we want.
| | 01:30 | I've already prepared this
query on the Graph API Explorer.
| | 01:34 | This query returns the name, user ID,
the movies, and a picture from our friends.
| | 01:41 | You may notice that the movies information
that we get doesn't look like what we got
| | 01:45 | when we did a path to query movies, it's
just a list of the movies, not the user ID and
| | 01:50 | the picture, and all the information we had.
| | 01:53 | And that's one of the issues with FQL, you
don't always get the same data, and you more
| | 01:58 | than likely don't get the richness of the
information coming back as you did with the Graph API.
| | 02:03 | So let me go ahead and copy this query, and I'm
going to switch back and paste that query right here.
| | 02:09 | So I was using double quotes because this
query includes a check to see if the movies
| | 02:13 | field is empty, and in there I use single quotes,
so this just makes it easier since the single
| | 02:19 | quotes of my query right here will not
get confused with these single quotes.
| | 02:24 | So now that we got this, let's just go ahead
and print out the path on the browser so we
| | 02:27 | can see what it looks like.
| | 02:30 | Let me go Save this, and I'll switch back
over here, and I'll go to my application,
| | 02:35 | and I'm going to make sure I type in the name
of my page, which is fqlquery.php at the end
| | 02:41 | of the normal path to my application.
| | 02:44 | So let me Refresh that page, and now
we can see the data that we get back.
| | 02:49 | Now, notice that there's a slight difference
between what we're seeing here and what you
| | 02:53 | see on the Graph API Explorer.
| | 02:55 | When you query with the Graph API
Explorer, you get an item called data.
| | 03:00 | When we get the results from doing the PHP
SQL query, we do not get an item called data.
| | 03:05 | So you have to remember to not include that,
like you did when we query it with paths.
| | 03:11 | Now that we know that, we can
print out just a list of images.
| | 03:16 | So we'll do a foreach statement, and
we'll pass it the $moviefriends_graph.
| | 03:20 | Now, in previous movies we included data
as the object that we passed to this foreach
| | 03:26 | statement, but we don't need to do that here
because the FQL query doesn't return that,
| | 03:32 | and all we have to do is just output the image.
| | 03:37 | So let me go ahead and Save that, and I'll
go back into my application and Refresh this
| | 03:41 | page, and we just see a
little grid of images right here.
| | 03:46 | Let me go back and get rid
of the printout of our object.
| | 03:50 | So I'll Save this, come back here, Refresh
this page, and now you see the grid of images.
| | 03:56 | Now, the cool thing about this list is that it's
only the list of friends that have recommended movies.
| | 04:02 | So working with FQL is pretty
similar to using paths with the Graph API.
| | 04:06 | I'm not sure if you can tell, but you
might notice that FQL calls tend to be a little
| | 04:10 | bit slower than regular path calls.
| | 04:13 | However, it was very easy for us to get
only the list of users with movies, which was a
| | 04:18 | problem with our previous application.
| | 04:20 | It does let you perform some queries that
you couldn't otherwise, so sometimes you have
| | 04:24 | to make tradeoffs between speed and
functionality when choosing whether to use paths or FQL.
| | Collapse this transcript |
| Creating a blended app with API paths and FQL requests| 00:00 | There's a small problem with our application,
and it's due to the differences between working
| | 00:04 | with the API through paths, or FQL.
| | 00:07 | With FQL, we can easily get a list of
friends who have recommended movies, but we don't
| | 00:11 | have rich access to the data within the
movies, like the description or the picture.
| | 00:16 | With paths, we can get the rich
data, but not the filtered list.
| | 00:20 | The best solution is to combine both.
So let's take a look.
| | 00:23 | If you take a look at the
application, you can see the problem.
| | 00:26 | I don't always get the same amount of
results when I'm on different pages.
| | 00:30 | In this page I'm asking for three
users, but I'm only getting two.
| | 00:34 | On the next page, I get only one user.
| | 00:38 | That's because even though I'm requesting three users,
only the ones that have recommended movies show up.
| | 00:43 | So I can easily fix that with FQL.
| | 00:45 | I can easily calculate how
many friends have liked movies.
| | 00:49 | So I'm going to go to this line right here, and
I'll replace this user_graph query with a call to FQL.
| | 00:57 | When we use an FQL query, we need to pass
an array with a method of fql.query and the
| | 01:02 | query that we want to process.
| | 01:05 | I already have the query that I need in the
Graph API Explorer, by including this last
| | 01:10 | part right here, movies does not equal blank, this
will return only the friends that have liked movies.
| | 01:16 | So I'm going to copy this and come
back here and paste that into our query.
| | 01:20 | To calculate how many friends we have, we
need to modify how we count the results.
| | 01:25 | If you remember from the previous movie, the
array we get in return doesn't have the data
| | 01:30 | object, so we can take that out.
| | 01:32 | There's a couple of lines I calculate our
movies path right now, and we're going to
| | 01:35 | create a new version so we'll delete these.
So I'll set up another FQL call right here.
| | 01:44 | I also have this version in
another call to the API Graph Explorer.
| | 01:48 | Now, using an OFFSET in this query is going
to cause a problem if we leave the code like
| | 01:52 | it is because when the application
first runs, OFFSET would not have a value.
| | 01:58 | So if we take this out, and we try
to run this query, we'll get an error.
| | 02:02 | The keyword OFFSET always has
to have a number next to it.
| | 02:05 | So if we copy and switch back to our
application, we'll paste it right here, and we'll pass
| | 02:10 | it along the quantity variable and normally
I would pass it along the currentoffset here.
| | 02:15 | But I can't do that because the first time
this runs, currentoffset will not have a value,
| | 02:20 | and this would result in a bad query.
| | 02:22 | So I need to take this out of here and add
another variable here called offsettext, and
| | 02:30 | if the variable called currentoffset exists,
then it's going to set the offsettext variable
| | 02:38 | to OFFSET plus the currentoffset.
| | 02:43 | If it doesn't exist, then
it will just make it blank.
| | 02:48 | So now we can pass this
offsettext variable right here.
| | 02:53 | This question mark is known as a ternary
operator, and it's sort of a shorthand if statement.
| | 02:58 | It will make an assignment to offsettext,
depending on whether or not the statement is true or false.
| | 03:05 | Now we need to adjust our foreach statement.
| | 03:08 | We'll use the moviefriends_graph variable,
and we don't need to use this data field because
| | 03:14 | the FQL queries are not
going to return the data object.
| | 03:18 | I don't need this if statement right here,
because that's used to check if the user had
| | 03:22 | at least one recommendation, and we're only
getting movies that already have recommendations.
| | 03:26 | So I can delete this right here and make sure that
I delete the second part of it, which is down here.
| | 03:32 | Now, weirdly enough, when you query the API with
paths, it returns the user ID as a field called id.
| | 03:40 | When you do an FQL query, it
returns it as something called uid.
| | 03:44 | So we need to change the ID right
here to uid, and this one as well.
| | 03:49 | Now we're ready to pull the graph for
the info about each user's movie graph.
| | 03:53 | We'll do that with the regular
call to the API with the path.
| | 03:59 | And our foreach statement is going
to use this new movies_graph variable.
| | 04:05 | I will need to leave the data
object because this is a path API call.
| | 04:09 | So let's go back into our
application and hit the Refresh button.
| | 04:16 | And if everything is working correctly,
this page should have three users, and it does.
| | 04:21 | And I should only have two pages, because I only
have four friends that have recommended movies.
| | 04:26 | So by combining our two query types, we were
able to get the best of both worlds, a list
| | 04:31 | of only friends who like movies, as well as detailed
information about the movies using an Open Graph path.
| | 04:38 | It's definitely always better to have
many tools in your Web Development Toolbox.
| | Collapse this transcript |
|
|
ConclusionNext steps| 00:00 | Thanks for watching this
course on the Facebook PHP SDK.
| | 00:04 | One of the reasons I wanted to do a course
on Facebook Application Development is that
| | 00:08 | the documentation online and in
existing books can be quite confusing.
| | 00:12 | The Facebook APIs and SDKs change all the
time, so sometimes you'll find articles for
| | 00:18 | things like FBML that have been deprecated
and no longer valid, or you'll find code on
| | 00:24 | how to do things in one SDK, say the JavaScript SDK,
but not on how one might do that in the other PHP SDK.
| | 00:32 | So I highly recommend that you check out
stackoverflow.com when you have questions about the SDK.
| | 00:38 | Facebook has a special deal with Stack Overflow
and even their own special URL that makes
| | 00:43 | it the best place to ask questions.
| | 00:46 | Also check out my course, Facebook
Applications with HTML and JavaScript.
| | 00:50 | That course goes deeper into things like
dialog boxes, social plug-ins, and achievements.
| | 00:56 | I consider this a sister course to this course,
because they're similar and do some of the
| | 01:02 | same things just with different SDKs.
| | 01:05 | Chances are you'll end up doing some things
with the JavaScript SDK and some things with
| | 01:10 | the PHP SDK, even within the same application.
| | 01:13 | You may also want to check out my blog at
iviewsource.com where I write articles about
| | 01:17 | responsive design, graphic design, and new and different
libraries that I enjoy, like BootStrap and EaselJS.
| | 01:25 | Also checkout my course list on lynda.com
to find other courses that I've written.
| | 01:29 | Once again, thank you very much for
watching this course, and enjoy programming the web.
| | Collapse this transcript |
|
|
