IntroductionWelcome| 00:03 | Hey there! This is Ray Villalobos, and welcome
to Building Facebook Applications with JavaScript.
| | 00:09 | In this course we'll look at how to build
Facebook applications using the JavaScript
| | 00:12 | APIs and JavaScript SDK.
| | 00:15 | I'll start by showing you how Facebook applications
work and how Facebook stores data through the social graph.
| | 00:20 | Then I'll show you how to register users and ask them
to authorize your application using authorization dialogs.
| | 00:26 | We'll also see how to use JSON to read data
from the Facebook social graph and generate
| | 00:30 | content for your app using
YouTube and WordPress JSON feeds.
| | 00:34 | Finally, I'll show you how to add social plug-ins, dialogs,
and create achievements for your Facebook application.
| | 00:39 | We'll be covering all these features and lots more, so let's
get started with Building Facebook Applications with JavaScript.
| | Collapse this transcript |
| Using the exercise files| 00:00 | If you're a premium member of the lynda.com
online training library, or if you're watching
| | 00:04 | this tutorial on a DVD-ROM you have access to
the exercise files used throughout this title.
| | 00:09 | In the exercise files folder you'll find
folders for each of the different videos.
| | 00:13 | If you open up one of those folders you'll
see a folder called finished with the project
| | 00:19 | after I finish the video.
| | 00:21 | You'll also find a working folder, I'll start each
project by copying that working folder onto the Desktop.
| | 00:26 | Now I'm going to hold down the Option key,
while I drag to make a copy onto the Desktop.
| | 00:33 | Unlike in most projects, we're going to be
working directly off the server, so inside
| | 00:37 | the working folder you
should see a _start folder.
| | 00:41 | That has a copy of the facebook folder as it
stood on our server when we began this video.
| | 00:46 | There is also a codesnippets file and a lot
of the times I will already have opened this
| | 00:50 | file into a text editor.
| | 00:54 | You might see some additional files
that need to be copied onto our server.
| | 00:57 | So I also have my FTP application running, and I
have the server already open, I'll double-click
| | 01:06 | on the shortcut here to open up more servers,
and I'm usually working inside the facebook folder.
| | 01:12 | We're going to open files directly from our
server, so most of the time I'll be clicking
| | 01:16 | on one of these files and selecting
Open by right-clicking and choosing Open.
| | 01:21 | We're using the Command key
on a Mac, it is Command+O.
| | 01:24 | So open this file, and you
will see something like this.
| | 01:28 | So I'll work with the codesnippets to copy
some of the code that we're going to be using
| | 01:31 | in the video, and I'll be inserting things
in different files like, this index file.
| | 01:36 | If you need help learning how to work with
servers, make sure you check out my video
| | 01:40 | on Managing Hosted Web servers on
the lynda.com online training library.
| | 01:44 | If you're a monthly member or an annual
member of lynda.com, you don't have access to the
| | 01:48 | exercise files, but you can follow
along from the Scratch with your own assets.
| | 01:53 | So let's get ready to
build Facebook applications.
| | Collapse this transcript |
|
|
1. Understanding App DevelopmentIntroducing Facebook applications| 00:00 | Before we get into the nitty-gritty of
Facebook app development, let's take a look at what
| | 00:04 | Facebook applications are and how they work.
| | 00:07 | Facebook applications are regular web
applications that are accessible from within Facebook.
| | 00:12 | A web application is a set of web technologies
that performs some type of function, like a game.
| | 00:18 | A game Angry Birds, for example, is one of
the thousands of web applications you can
| | 00:22 | add to your Facebook account.
| | 00:24 | What makes Facebook applications unique is
that they're able to integrate with data Facebook
| | 00:28 | already has on you, to
create unique experiences.
| | 00:32 | Facebook connects lots of data
about its users and their friends.
| | 00:35 | So, for example, you can compare scores with
some of your other friends who also have installed
| | 00:39 | the Angry Birds application, or
you can invite friends to do so.
| | 00:44 | Permissions are really important to Facebook.
| | 00:46 | In order to add applications you'll need to
grant the applications permissions to some
| | 00:50 | of your social data, who your friends are,
perhaps your email address or allow the app
| | 00:55 | to post things like scores into your Timeline.
| | 00:57 | Apps in Facebook can be built with a few
languages like PHP or JavaScript using different tools
| | 01:03 | called Software Development Kits or SDKs and
target different platforms like the Desktop
| | 01:09 | or iOS and Android devices.
| | 01:12 | When you add an app, it will appear as a
Bookmark on your home screen, the screen you first
| | 01:17 | log into when you visit Facebook.
| | 01:19 | Apps can communicate with users in a
variety of ways through requests like when you ask
| | 01:23 | your friends to join you in playing an app,
notifications which is perhaps letting you
| | 01:28 | know when you have reached the high score or
bookmark counts, which appear as red rectangles
| | 01:33 | with numbers and let users know that
there's some action waiting for them in the game.
| | 01:38 | Apps can also post to a user's feed as long
as the user allows them. Spotify, for example,
| | 01:44 | can automatically post on
your FEED when you play a song.
| | 01:47 | Once an app reaches 10 users, it will also
be searchable through the search bar at the
| | 01:51 | top of Facebook, before then, it's only
available through its own Facebook URL.
| | 01:56 | Apps also get their own special page with
the Facebook navigation and search at the
| | 02:01 | top and a special app sidebar on the right.
| | 02:04 | This is different than a regular Business
or Fan Page, and although you can add one
| | 02:08 | of those pages as well when you create the
app, this is the standard look that the app
| | 02:13 | has when you launch it.
| | 02:14 | The part of the app that is not the top Facebook
nav or the special sidebar is called the canvas,
| | 02:19 | it's where the user
interacts with the application.
| | 02:22 | This is a real important concept and one
that you'll hear a lot when working with apps or
| | 02:26 | reading the developer documentation.
| | 02:28 | The canvas is an iFrame that is a window
onto a web site that is not hosted on Facebook,
| | 02:34 | but on a separate server.
| | 02:36 | This is really important, the app itself
doesn't exist on Facebook, it lives on its own server.
| | 02:41 | If you're an app developer, you'll have to
get your own server, so you can develop and
| | 02:46 | host your app. When you create your app,
the app will be drawn into that special space
| | 02:51 | on Facebook?s app page called the Canvas.
| | 02:54 | Facebook applications are very powerful,
because you run the application on your own server,
| | 02:59 | you have a lot of control
over what your application does.
| | 03:02 | Facebook gives you access to the social
connections and user information you need to create powerful
| | 03:07 | applications that leverage the social network.
| | Collapse this transcript |
| Understanding the social graph| 00:00 | Normally I'm the type of person that likes
to get straight into coding pages, but with
| | 00:04 | Facebook development, it's really important
that you understand a few concepts that are
| | 00:08 | critical to how Facebook apps work.
| | 00:11 | In the last video we talked about the canvas, the
iFrame or window that Facebook applications live in.
| | 00:17 | In this video we'll cover something that is
probably the most important concept for understanding
| | 00:21 | how Facebook works with the social graph.
| | 00:24 | Just take a look, the social graph is a
representation of how a person uses the Facebook social network.
| | 00:31 | The connections they make and the
objects they utilize within Facebook.
| | 00:35 | It's more than just a concept, it's
actually how Facebook stores information about its
| | 00:40 | users on its database.
| | 00:42 | When working with applications, it's
crucial to understand how these relationships are
| | 00:46 | built, because it impacts
the way you access information.
| | 00:49 | When a user first joins Facebook, they
immediately start friending people, describing their likes,
| | 00:55 | posting content and adding applications and all
these actions create a series of relationships
| | 01:01 | or connections between these objects.
So let's talk about those connections.
| | 01:06 | Posting content, for example is
one of the types of connections.
| | 01:09 | As a user interacts with their version of
the social network, they can generate content
| | 01:13 | by creating posts, uploading photos or albums,
posting videos, creating pages, or even building
| | 01:20 | their own applications.
| | 01:21 | Things you create become objects and what
you do with those objects become connections.
| | 01:27 | Posting like I said is a type of connection.
| | 01:29 | If it's all there was to Facebook,
it would be a boring place to visit.
| | 01:32 | Facebook is about more
than just posting content.
| | 01:35 | A lot of the appeal of Facebook is that it
lets us interact with content from other users.
| | 01:40 | By interacting with content from others, we
create connections to their content and the
| | 01:45 | social graph is a representation of all
the connections we make within Facebook.
| | 01:48 | Facebook users can connect to other objects
by friending, liking, sharing, playing, poking
| | 01:55 | and making other types of connections.
| | 01:58 | As a user connects to content from other users,
those connections will be available to them.
| | 02:03 | For example, once your friend someone, you'll
be able to see their Posts, Photos, Likes, et cetera
| | 02:08 | and make connections to those.
| | 02:10 | So the important thing to remember about the
social graph is that it's a way to describe
| | 02:14 | the types of connections a person makes
creating their own version of a social network.
| | 02:19 | Facebook applications are different from
traditional web applications, because they have access
| | 02:24 | to the user's social data, otherwise known as
the social graph. We have access to the
| | 02:28 | social graph through
something known as Facebook APIs.
| | Collapse this transcript |
| Working with the Facebook APIs| 00:00 | Once you understand that an application lives
in the Facebook canvas and how Facebook stores
| | 00:05 | your user data through the social graph,
it's time to learn about the APIs that Facebook
| | 00:10 | provides for creating your
apps. So what is an API?
| | 00:14 | An API is an Application Programmers Interface.
| | 00:18 | It's a way for developers to
access content on certain web sites.
| | 00:22 | APIs allow you to have access to information
about user FEEDS, user data and other types
| | 00:28 | of information from another company.
| | 00:30 | All the major players like Google, Facebook and
Twitter at APIs for working with their content. Why?
| | 00:37 | Because APIs allow companies to let others
extend the functionality of a web site beyond
| | 00:42 | what the original developers thought possible.
Part of the rise in popularity of Facebook
| | 00:47 | is due to social games like Farmville, and Mafia
Wars. Which were made possible through their APIs.
| | 00:53 | Facebook provides three different ways for
developers to interact with social graph.
| | 00:58 | The web site API lets you access open graph
data, a term used for certain social graph
| | 01:03 | information you can put on your web sites.
| | 01:06 | The mobile API lets you integrate Facebook
into mobile device applications running on
| | 01:11 | platforms like iPhone and
Android operating systems.
| | 01:14 | Apps on Facebook, the API we'll be exploring
in this course lets you build apps that show
| | 01:19 | up as pages within Facebook.
| | 01:21 | Remember, the pages live on a separate
server, but show up in the Facebook canvas.
| | 01:26 | So when you develop apps on Facebook,
Facebook lets you interface with the social graph for
| | 01:31 | something called an SDK or Software Development
Kit and SDK is a software that Facebook engineers
| | 01:37 | have developed and make available to users.
| | 01:40 | Facebook provides two flavors of the SDK for App
development, one in PHP and another in JavaScript.
| | 01:47 | In this course I am going to show you
how to work with the JavaScript SDK.
| | 01:51 | Most of the time you'll be able to do the
same types of things using different SDKs,
| | 01:55 | but there are some instances that
require you to use one or the other.
| | 02:00 | So remember that when we work with Facebook Apps,
we are going to need to work with two things.
| | 02:05 | First, we will need to work
with the App container on Facebook.
| | 02:09 | This is the canvas on Facebook's App page.
| | 02:12 | The canvas is an iFrame that
is a window to your application.
| | 02:16 | The iFrame points to web site where
you code the app using one of the SDKs.
| | 02:22 | The series of pages you create on your web
site is nothing more than regular HTML with
| | 02:26 | hooks into Facebook data, using
commands that we'll learn about in this course.
| | 02:31 | So now you have a handle on the terminology,
you're ready to start working with the SDKs
| | 02:36 | to create the Apps.
| | 02:37 | The process Works like this: first we'll
create the container for our App on Facebook.
| | 02:42 | Then we will create the page on our server
unless you want an app that's just plain HTML,
| | 02:48 | you want to take advantage and learn about
the features and the social data that the
| | 02:51 | Facebook APIs provide.
| | Collapse this transcript |
|
|
2. Creating a Basic AppInstalling the Facebook Developer App | 00:00 | If this is the first time you are creating
an application on Facebook, you will need
| | 00:04 | to install a special app called
the Facebook developer application.
| | 00:08 | It allows you to manage the
applications you are going to install on Facebook.
| | 00:11 | So let's take a look.
| | 00:12 | First we will need to sign into
Facebook, and we will click on Login.
| | 00:17 | Now to get to the Facebook would developer's
page, we are going to navigate to the Facebook
| | 00:21 | developer site, which is @
developers.facebook.com.
| | 00:27 | Now you may want to check around this
particular page, it has a lot of really good information,
| | 00:32 | this is the hub for Facebook developers, so you can
check for status updates on the application itself.
| | 00:38 | Take a look at some of the news and see the
information about the different types of APIs.
| | 00:42 | For example, if you're interesting in
adding things to web sites, and click on this link
| | 00:46 | to go to the Facebook for Websites.
| | 00:50 | If you click right here, you'll see the Build
for Mobile section, which has a lot of information
| | 00:55 | about adding Facebook data to
existing applications and mobile devices.
| | 01:00 | The one that we will be spending a lot of
time with is this Build Apps on Facebook which
| | 01:05 | is where we will work with
the JavaScript or PHP SDK.
| | 01:09 | In this course we are going to focus on the
JavaScript SDK and the manual is right here.
| | 01:14 | But for right now we are interested in
adding the Facebook application to our page.
| | 01:19 | So we are going to go up to the top
of the page and find this Apps link.
| | 01:22 | I am going to click on that and Facebook
will ask me to add the Facebook developer app.
| | 01:29 | So all I need to do here it is click on this Go to
App link, and now I am ready to start creating apps.
| | 01:37 | Now you are not going to see this if you've
already installed other Facebook applications,
| | 01:42 | so you're only to see that other
add the application window one time.
| | 01:46 | So that's the first step
towards building your own apps.
| | 01:49 | If you haven't already done it make sure you
do go through the Facebook developer web site,
| | 01:53 | it has a lot of great information
that will make your apps better.
| | Collapse this transcript |
| Creating a container for your application| 00:00 | Once you've got the Developer app installed, it's
time to create the container for our application.
| | 00:05 | This container is what creates the page that
holds the infamous Facebook canvas, the iFrame
| | 00:11 | into which our application
will load, so let's check it out.
| | 00:14 | So, to get to this page where you can create your new
app, you want to go to developers.facebook.com/apps.
| | 00:21 | Once you're here you can click on
this button to create a new app.
| | 00:25 | This is what the page looks like when you
haven't created any apps, when you've got
| | 00:28 | some apps, it's going to
look a little bit different.
| | 00:31 | So, once I hit the Create New App button,
I'm going to need to type in an app Name this
| | 00:35 | is just what our users going to know the app as.
| | 00:38 | So I'll type in Source Foo here, and it's
going to check to make sure that's a valid
| | 00:43 | and available name, and then I
need to type in an App Namespace.
| | 00:47 | An App Namespace is Facebook's internal name
for your app, it's formatting, it's much more
| | 00:52 | restrictive than the app name, so let's try
to typing in source foo, and you'll see that
| | 00:57 | I'll get a Failed error, it doesn't really
explain why until you roll over this little
| | 01:02 | question mark, and it's going to tell you
that the app space can only contain lower
| | 01:06 | case letters, dashes and underscores,
so this space right here is not good.
| | 01:10 | So I'm going to hit the Delete
there, and that name is available.
| | 01:15 | If you want to, you can click on this, I
would like free web hosting provided by Heroku.
| | 01:19 | However, it's a little bit complicated to
set up and the way that I have created my app
| | 01:24 | is by hosting it on a separate server,
which we'll talk about in another movie.
| | 01:29 | So I'm going to click on Continue, and
sometimes you might see a Security Check like this.
| | 01:34 | These are getting really hard for me to
figure out nowadays--I think, maybe that's a word--
| | 01:40 | so let's try Submit, and that seems to have
worked, that's great! Okay, so you may have
| | 01:46 | to retype the App Namespace, I'm not
sure why, but sometimes it doesn't take it.
| | 01:51 | So sourcefoo, and you want to type in your site
domain, so these are the web addresses of your web site.
| | 01:58 | So whatever your web site address
is this is what you would type in here.
| | 02:01 | I'm going to type in iviewsource.com, hit
the Tab key, and I'm going to click back in
| | 02:07 | here, and I'll also type in
the www version just in case.
| | 02:12 | So iviewsource.com, hit Tab key again. You
need to pick a Category for your app, and
| | 02:17 | that is sometimes going to impact the types of
things that you can do with the open graph data.
| | 02:22 | So, for this one I'm going to choose Games,
because although this is not really going
| | 02:26 | to be a game per se, it's going to use some
of the game functionality to add achievements.
| | 02:31 | I'm going to click on that, it's not any of these
types of Games, so I'm just going to choose Other.
| | 02:36 | And next, we need to specify what types of
integration we want to do with this Facebook app.
| | 02:42 | I'm going to click on Website, and I am going
to type in the Website URL here, that should
| | 02:48 | just be your web site address,
with http://ivsource.com.
| | 02:54 | Make sure you put the trailing slash right
there, or it might cause some problems later on.
| | 02:58 | You also are going to be creating an app on
Facebook, so I want to click that on and type
| | 03:03 | in your canvas URL.
| | 03:04 | This is the URL to where your Facebook application is
on your web site, it's probably going to be in a folder.
| | 03:11 | So I'm going to type in my web site address/
facebook, and I'm going to put that trailing slash.
| | 03:17 | I'm also going to need a Secure Canvas URL,
which will look something like this, it'll
| | 03:21 | have an HTTPS, instead of an HTTP, that is
something that you're going to have to set up
| | 03:27 | with your hosting company.
| | 03:28 | The ability to create a Secure version of
your web site is really important, and it's
| | 03:34 | required by Facebook as of last October.
| | 03:37 | So, that's really all you need for this site,
I want to make sure I typed in everything
| | 03:41 | correctly, it's really, really important, I
going to hit Save Changes, and looks like,
| | 03:48 | because I was previously creating this App
Namespace, it's not going to allow me to do
| | 03:52 | it, so, if you can narrow like that, it
means that I'm going to have type in a different
| | 03:57 | App Namespace, and I want to just type in an extra
O there, and hit Save Change, see if it takes that?
| | 04:05 | So these two numbers are the app ID, which
is just an ID for this particular application
| | 04:10 | and the other is an app secret, which
you'll need whenever you're working with certain
| | 04:15 | types of functions in JavaScript.
| | 04:17 | You obviously can't memorize this, but you'll be
going back here to get the app secret and the app ID.
| | 04:23 | So, now that you've set up the container for
your app most of the Facebook work is done,
| | 04:28 | in essence, we've created the page on
Facebook and set up the canvass for our application.
| | 04:34 | Now, you're ready for the second part of
the equation, which is setting up your hosting
| | 04:38 | and the page that you're going
to use to feed into the canvas.
| | Collapse this transcript |
| Getting and setting up a web host| 00:00 | The second part to the Facebook app
equation is setting up a web host.
| | 00:04 | Let's take a minute to talk about the kind
of host you'll need, as well as the process
| | 00:08 | for creating apps and some
of the software you'll use.
| | 00:11 | There are lots of different types of servers and many
plans you can use to host your Facebook applications.
| | 00:17 | Developers need just a few critical
features to create apps on their server.
| | 00:21 | First, you'll need a server
with the ability to run PHP.
| | 00:23 | PHP is a server site language that allows a
server to process certain files before you
| | 00:29 | send them to a client, even if you're only
using the Facebook, JavaScript, API, you'll
| | 00:34 | need to be able to do certain things with PHP.
| | 00:36 | Facebook itself is written in PHP and is
the largest PHP installation on the planet and
| | 00:42 | although the JavaScript API is sometimes easier to work
with, it's always good to have both options available.
| | 00:48 | You'll need to set up an FTP
account and download an FTP client.
| | 00:51 | There are a lot of capable FTP applications.
| | 00:55 | If you're on a Mac, you might want to
check out Transmit. It's what I use for most of
| | 00:58 | my project, and although it's not free, it's
a super reliable and very capable FTP client.
| | 01:03 | If you're on a Mac or a PC and are looking
for free application then checkout Cyberduck,
| | 01:09 | it's a pretty capable FTP client
that works on both Macs and PCs.
| | 01:13 | Also both of these, Transmit and
Cyberduck, are available on the Mac App Store.
| | 01:17 | As of last October, Facebook requires that you
install or have an SSL certificate available on your server.
| | 01:24 | An SSL certificate will allow you to create more
secure connections between Facebook and your sites.
| | 01:31 | Most web host will not provide an SSL certificate by
default, so it's an add-on on most beginners or low-cost plans.
| | 01:37 | It's not a lot of set up involved, other than
purchasing the certificate and pointing it to your domain.
| | 01:42 | So, let me go into the 1&1 Control panel
that I use for a lot of sites, and I am going to
| | 01:47 | go to the Domain section right here, so I
am going to click on this, and if I have an
| | 01:52 | SSL certificate installed, I should
see an SSL button here in the navigation.
| | 01:57 | This is one of the entry-level plans on this
particular domain, so it's not available right now.
| | 02:02 | So if I want to add it, I need to back into
the Start menu and click on Order More Features
| | 02:09 | under Contract Data.
| | 02:11 | From here you want to go to the Dedicated
SSL plan right here, so click on that, it'll
| | 02:16 | open up a new window.
| | 02:19 | So from here you want to scroll down a little
bit and find the section called SSL certificate,
| | 02:24 | you add an SSL certificate just by
selecting 1 right here and clicking on this button,
| | 02:29 | and once you go through the process of
paying that, you'll be able to go back into your
| | 02:33 | Control panel and see the
button for SSL under your domains.
| | 02:39 | So back over here, and you just see an
additional button called SSL right there and all you
| | 02:44 | do is click on a domain that you want to
add the SSL plan to, and then click on the SSL
| | 02:50 | and add domain there.
| | 02:51 | So it's really, really simple to set up.
| | 02:53 | If you need more information about setting
up and working with web hosts or using FTP
| | 02:58 | applications, make sure you check out my course
on Managing a Hosted Web Site on the lynda.com
| | 03:03 | online training library.
| | 03:04 | One thing that is different about working
with Facebook apps is that they need to be
| | 03:08 | on a live server that Facebook
has access to in order to work.
| | 03:12 | When we develop normal web sites, we usually work
on a local machine, say your laptop or your desktop.
| | 03:17 | When you're finished, you usually upload
the Finished files to your server where people
| | 03:21 | can access them from the web .
| | 03:23 | With Facebook, you usually load files from
your live server, edit them in a text editor,
| | 03:28 | and then save them back to your server.
| | 03:30 | If you've got questions about how to do this,
make sure you watch the movie called Creating
| | 03:34 | a workflow on Managing a
Hosted Website it's right here.
| | 03:37 | To edit the files you can use a number of
text editors, I like to use a program on my
| | 03:42 | Mac called Espresso from MacRabbit, but
you can use any text editor at your disposal.
| | 03:48 | If you're on a Mac, you might want to check
out TextWrangler, it's a free and very capable
| | 03:52 | text editor that is
available on the Mac apps store.
| | 03:56 | As you get deeper into web development, you
also might want to check out its cousin BBEdit,
| | 04:00 | which has better web features.
| | 04:02 | If you're on a Mac or PC, you might want to
check out Aptana Studio, it's a really nice
| | 04:08 | free open source editor, and I
really like its code assist features.
| | 04:12 | I like another text editor that also
works on Macs or PCs called Sublime Text.
| | 04:18 | It really doesn't matter which text editor you use,
as long it is something that you're comfortable with.
| | 04:22 | Pick one, and make sure you learn
its shortcuts and advanced features.
| | 04:26 | Once you have your server with the right
installations and software, you are ready to get started
| | 04:30 | developing your Facebook applications.
| | Collapse this transcript |
| Creating a basic app page| 00:00 | And app on Facebook is nothing more than an
HTML page that can have some additional ties
| | 00:05 | to the Facebook data using one of
the Software Development Kits or SDK.
| | 00:09 | Let's start building our project by
setting up our folder structure on our server and
| | 00:13 | creating a basic page.
| | 00:15 | So I am at the developer site for Facebook, and I
want to click on this Apps link to get to the app.
| | 00:21 | So this is what your app page looks like once
you've created an app, and we have got one right here.
| | 00:26 | So what I want to do is show you that
there's a couple of important URLs right here.
| | 00:31 | We created this page, we
created this canvas URL.
| | 00:33 | This is where the Facebook is going to look
for the page that's going to be on our web site.
| | 00:37 | So I need to create this
folder on my Web server.
| | 00:40 | The other import URL is the Canvas Page URL.
| | 00:43 | So this is how users will be able to
get to our page from within Facebook.
| | 00:48 | Once you have 10 people liking your app,
your app will be searchable through the search
| | 00:52 | bar at the top of Facebook.
| | 00:54 | But before we get ten people, we will be
able to access our page by going to this URL.
| | 00:58 | So I am going to go and minimize this, and I
have a codesnippets.txt file already open, where
| | 01:04 | I am going to grab some of the code that I
am going to use for this particular project.
| | 01:08 | And I have an FTP application running, so I am
going to double-click to login to View Source.
| | 01:13 | And this is just a standard WordPress
installation, you can see all the wp files right there.
| | 01:18 | And what I want to do is create a new folder,
so I am in Transmit right now, I'm going to
| | 01:23 | right-click and select New Folder, and this
New Folder is going to be called Facebook,
| | 01:28 | because that's what we told the Facebook
App Page that we wanted to call our folder.
| | 01:33 | So there it is I am going to open that up,
and I need to create a few additional folders,
| | 01:38 | so I am going to right-click
and create New Folder.
| | 01:40 | And I am going to make in images folder, I
will also made an _ folder, I like to have
| | 01:46 | all my JavaScript and CSS files organized
at the very top of the page, so I like to
| | 01:51 | create this folder to make sure
that it goes on top of everything else.
| | 01:55 | And in there I am going to
create another folder and call it CSS.
| | 02:00 | And another folder called
js for my JavaScript files.
| | 02:03 | I am going to go ahead and create the
JavaScript and a CSS file, so I will double-click on
| | 02:07 | this, and I will create a New file in there.
And this file is going to be called mystyle.css.
| | 02:16 | It's where we are going to be
putting our styles in the future.
| | 02:18 | So I am going to back-up a folder, on the
Mac I can hit Command+Up, I am using Transmit.
| | 02:25 | And I am going to double-click on the
JavaScript folder and make a new file in there, this
| | 02:31 | file is going to be called myscript.js,
and that's going to hold our JavaScript.
| | 02:37 | So I am going to backup a couple of levels,
back to the Facebook folder, and I am going
| | 02:42 | to go to the Desktop my working folder.
| | 02:45 | In my working folder I have a file called
vs_monogram.png, and I want to drop that into
| | 02:50 | the images folder, because we
are going to be needing that later.
| | 02:52 | So I want to drag that in there,
let it go, it's going to copy.
| | 02:56 | And the last file we are
going to need is an index file.
| | 02:59 | Now normally I would name this index.html,
but when working with Facebook, it's actually
| | 03:05 | better to name them index.php.
| | 03:08 | So even though we are just working with
JavaScript SDK, there are some instances where we are
| | 03:12 | going to need the power of the PHP SDK.
| | 03:14 | So I am going to place the PHP extension
there just in case that I'm going to need it for
| | 03:20 | later, which I know I will.
So I am going to just Enter to accept that.
| | 03:24 | I am going to open this file
with BBEdit, so I am right-clicking.
| | 03:28 | I have set this Transmit up to actually automatic
open this, so I could just double-click on these.
| | 03:34 | And there is the empty index.php file.
| | 03:36 | So I am going to switch over to codesnippets,
and I am going to grab a very basic HTML page.
| | 03:42 | You can see that this is just a simple HTML
structure with a title, and I have a div for
| | 03:48 | the content right there.
| | 03:49 | So I am going to hit Copy and go back into
index.php, paste our page, when I save this
| | 03:55 | you will notice that it will upload to the
server, you can tell, because there is a little
| | 03:59 | bar that appears right here
for a fraction of a second.
| | 04:01 | Okay, next I want to go back to my codesnippets.
php file, and I want to load up some Google fonts,
| | 04:07 | because I am going to use some
custom fonts for this particular app.
| | 04:11 | So to do that what I did is go to a site called
Google webfonts which is at google.com/webfonts.
| | 04:19 | And find some fonts that I
want to use within my project.
| | 04:21 | I'm using a couple of fonts,
one of them is called exo.
| | 04:26 | So once you find the font that you want, all
you have to is hit this Add to Collection button.
| | 04:32 | And I also use another font called average,
and I am going to add that to the collection.
| | 04:38 | Once I'm ready to use the fonts, all I
need to do is click on this Use button.
| | 04:43 | Load up whichever weights I want,
and then copy this URL right here.
| | 04:48 | Now because I'm working in Facebook and Facebook
wants all pages to be secure pages, I am actually
| | 04:53 | going to have to modify
this URL to be an https URL.
| | 04:58 | Google is not going to mind, because their
pages are securely served, and it will prevent
| | 05:03 | those from getting an error in Facebook.
| | 05:05 | So I am going to just close that out, or you have the
line of code here with the two fonts that I'm using.
| | 05:09 | So I am going to copy that, go back into index.php and
right underneath the title, I will add that right there.
| | 05:17 | So this is a link to my Google fonts.
Next, I am going to go back into codesnippets.
| | 05:22 | And I need to load the stylesheet that is in the
_ folder and the CSS folder, and it's called mystyle.css.
| | 05:29 | So I am going to copy that line of
code, and I'll paste that right there.
| | 05:34 | So back into codesnippets, the next
thing I need is to download and load jQuery.
| | 05:39 | Now here's a line that is linking to a local
copy of jQuery, but you need to download it
| | 05:43 | from the jQuery server.
| | 05:44 | So I am going to go back into Safari, and I need to
go to the jQuery web site, which is at jquery.com.
| | 05:51 | And I need to download the
latest production version.
| | 05:53 | It happens to be 1.7.2, so
I am going to hit Download.
| | 05:59 | If you get something like this it means that
it didn't actually download the file, it just
| | 06:03 | loaded it up on your browser.
| | 06:04 | All you got to do is just go the File menu
and select Save As, and I am going to make
| | 06:10 | sure that is set to Page Source, not Web Archive,
and I do want to add the .js extension to that.
| | 06:16 | So I am going to save it on the Desktop for easy
access, hit the Save button, I am going to minimize this.
| | 06:23 | And now I have a copy of
jQuery 1.7.2, which has minified.
| | 06:27 | So I am going to open this up right here,
open up my JavaScript folder and copy that
| | 06:33 | file into the JavaScript folder.
| | 06:36 | So I will delete this one,
because I don't need anymore.
| | 06:40 | On a Mac I just hit Command +Delete to delete
a file that is anywhere on the file structure.
| | 06:46 | So back into my codesnippets, I want to get
the jQuery file, and paste it right there.
| | 06:54 | And of course, the next thing would be to
actually load of My Scripts, which is in this
| | 06:58 | file called myscript.js.
| | 07:00 | So I am going to grab the next piece of code,
this is just a link to myscript.js, back over
| | 07:07 | here, paste that in, Save
that, it's updating right here.
| | 07:13 | Back to codesnippets, and I want to grab
some very basic HTML code, this is nothing too
| | 07:18 | exciting, I am going to grab this right here, I
will copy it and paste it into the index.php file.
| | 07:23 | So I am going to put this in the Content
section, because it's on content right now just to
| | 07:28 | make sure that our app is working correctly.
| | 07:31 | So I am going to hit Save, and now that I've
created this page, this page exists on iviewsource.com.
| | 07:37 | So I am going to open up a browser, and
I can close out of jQuery if I want to.
| | 07:42 | I will make a new window here or a new tab,
and I am going to go to http://iviewsource.com/
| | 07:51 | and the location of my Facebook folder.
| | 07:53 | If I hit Return, it should show me the view
source app, and it looks a very, very simple
| | 07:59 | HTML page, so there is really nothing to this.
| | 08:02 | Cool thing is that if you remember, when
we were in the Facebook Developer section of
| | 08:07 | our app, it told us that there's
also a Canvas URL for this application.
| | 08:12 | So if you look at this right here that's the
Canvas URL, so I am going to copy that, switch
| | 08:17 | back to my tab and just paste that.
| | 08:19 | This is how people can get
to my application right now.
| | 08:22 | And if you look at it, it looks exactly
like a Facebook application with the search bar
| | 08:27 | and the custom menu at the top and an
additional sidebar on the right-hand side.
| | 08:33 | So we have created an actual Facebook
application by just creating a very basic HTML page.
| | 08:39 | And this is a fully functional application
that people can get to right now on Facebook.
| | 08:44 | It's not very exciting, because it doesn't
hook up to the user data, we will talk about
| | 08:49 | how to do that later.
| | Collapse this transcript |
|
|
3. Registering Users with the JavaScript APILoading up the JavaScript SDK and initializing Facebook| 00:00 | So right now our app is technically a Facebook
App, but with no access to the social graph data.
| | 00:06 | This is not necessarily a bad thing, you
can create a fully functional app that doesn't
| | 00:10 | require any kind of authentication
and is visible to everyone on Facebook.
| | 00:15 | But the beauty of Facebook is that
you can have access to this data.
| | 00:18 | In this movie I am going to show you how
to initialize and load the JavaScript SDK.
| | 00:22 | So let's go to the developer's page
on Facebook at developers.facebook.com.
| | 00:28 | And I am going to click
on Build Apps on Facebook.
| | 00:31 | And then I'm open up the SDK
Reference just right there.
| | 00:34 | I need to pick my SDK which in
this case is the JavaScript SDK.
| | 00:39 | I will click on that, and you will see that
it gives you a lot of information about the
| | 00:44 | core methods and other functions that you
could use when you have the JavaScript SDK loaded.
| | 00:50 | Now the first thing that you will need to
do on any app is to make sure you initialize
| | 00:53 | the SDK, and this is how
Facebook wants you to do it.
| | 00:57 | So to initialize the Facebook page we
generally place this code after the opening body tag,
| | 01:02 | but we have a slightly different structure in our
project, I don't really want everything to be on one page.
| | 01:08 | So the way that I've organized my
application is by creating a JavaScript and CSS folder
| | 01:14 | inside and _ folder.
| | 01:17 | So we are going to need to
change things a little bit.
| | 01:19 | I already have my codesnippets.txt file.
| | 01:22 | And one of things that we need to do is open up
myscript.js file on our server. So I will do that.
| | 01:28 | And we will go back into codesnippets, and we
will grab our version of these two functions.
| | 01:34 | So, grab all those right there, go
back into myscript.js and paste them.
| | 01:40 | Now I will go ahead and save.
| | 01:41 | And I will show you what's going on here.
| | 01:43 | This is the part of this code that
loads the JavaScript SDK asynchronously.
| | 01:49 | That really big word just means that it's
loading it in the background as the rest of
| | 01:53 | the page is loading, whenever it's ready it's
going to fire up an additional function called
| | 01:58 | window.fbAsyncInit.
| | 02:00 | So once the function finishes loading the
JavaScript SDK, it's going to execute this
| | 02:05 | other function, and this other function is
going to try to initialize the SDK, it's going
| | 02:10 | to need a couple of things your AppID as
well as your domain.com here for a channel file.
| | 02:17 | So let's get the AppID, and I'll
talk about the channel URL later.
| | 02:20 | So you can get your AppID by going back to
the developers page, and then clicking on
| | 02:25 | this Apps link on the top right.
| | 02:27 | When we get here, since this is the only app we
have, it's the one that's showing up right now.
| | 02:30 | Now you can just click on this link right
here, and it will show the app that you want.
| | 02:35 | Now we need this right here,
which is our App ID/API key.
| | 02:39 | So I am going to go ahead and copy that to
the clipboard, and then I am going to go back
| | 02:44 | into BBEdit, my code editor and make sure that I
replace this App ID with the App ID from that page.
| | 02:51 | So I am going to hit Save.
| | 02:53 | There is one more thing that we need.
| | 02:54 | If we go back into the SDK--let's go back
by hitting the Back button a couple of times
| | 03:00 | into the Reference JavaScript.
| | 03:02 | Notice that there is an additional little
line that I didn't copy, and this is a special
| | 03:06 | div that should appear on any page
that has Facebook data called fb-root.
| | 03:11 | So we'll need to add that into our HTML.
| | 03:13 | I am going to go back into my Text Editor
and back in to Transmit, because I need to
| | 03:19 | open my index.php file.
| | 03:21 | So I will open that up, go into my
codesnippets, and I will grab this fb-root div.
| | 03:29 | Now this div is what Facebook uses when
it needs to draw something onto the screen.
| | 03:33 | So we need to make sure
it's somewhere on the page.
| | 03:36 | So I will just add it right next to the
body tag, doesn't really matter where it is as
| | 03:40 | long as it's somewhere.
| | 03:41 | Looks like these aren't tabbed
exactly, so let me go ahead and tab these.
| | 03:46 | Okay, that looks a little bit better.
| | 03:49 | So I am going to save that, and we have got
most of the things that we need ready to go.
| | 03:55 | There's another thing that you need to know about,
and that is this thing called the Channel URL file.
| | 04:00 | So if we go back into Facebook and read the
initializing documentation, so back to the
| | 04:05 | JavaScript SDK, we will see that there's a
section here that talks about the channel file.
| | 04:10 | This channel file is a file that addresses
some problems that used to happen with cross
| | 04:14 | domain communications in some browsers.
| | 04:16 | It used to happen to me a lot.
| | 04:18 | So this is really cool, I
am glad they added this.
| | 04:20 | And what you need to do is essentially
create an HTML file with this single line.
| | 04:25 | If you read a little bit further, you'll
notice that they recommend that this file be cached
| | 04:28 | properly and they give you a little bit of code
right here, and that's what we are going to use.
| | 04:32 | So I am going to go back into my Text
Editor and grab this next piece of code, this is
| | 04:37 | just a code from Facebook, and I am going
to copy it to my clipboard, and I am going
| | 04:42 | to need to create a new file.
| | 04:44 | Now remember that they suggested that you
call the file index.html, you're actually
| | 04:50 | going to create a file called index.php. Why?
| | 04:53 | Because we added a little bit of ph code at
the beginning of the file, I will call this
| | 04:58 | channel.php, and I'm open that up,
and I'll paste the code in there.
| | 05:04 | Because we have added a bit of PHP at the
beginning of this page, we need to make sure
| | 05:10 | that our extension is .php.
| | 05:12 | Some servers will not process PHP
files unless they are named .php.
| | 05:16 | So I am going to save that, and I am going
to go back into myscript file, and make sure
| | 05:24 | they put in the right location of our channel file, which
will be our domain, which is iviewsource.com/channel.php.
| | 05:35 | And I'll save this file.
| | 05:36 | Now there is one more thing that I want to do,
this is sort of optional, but it's something
| | 05:41 | I like very much, and this is adding a
frictionless request option to our initialization code.
| | 05:47 | So I am going to grab this, and I am going
to copy it and go back into myscript file
| | 05:53 | and just put this somewhere in here.
| | 05:55 | I'll just add it right there
and format it a little bit better.
| | 06:00 | So let's go into Safari and take
a look at frictionless request.
| | 06:06 | It's the part of dialogs, when you go here
if you do a search for frictionless requests,
| | 06:11 | I will just do it a couple of times, right
about in the middle of the page, there is
| | 06:15 | a good explanation of why these are important.
| | 06:18 | Many times when a user is within an app, they
can make requests to their friends for certain
| | 06:24 | things, so you could say, hey Joe! I want
to play game with you, or check out my high
| | 06:28 | score and frictionless requests allow you
to send additional requests, once you've sent
| | 06:35 | a user a request already without
having to see another dialog box.
| | 06:40 | So it kind of stream slice the process of
sharing with friends by not making you have
| | 06:44 | to see a box every time you
send something to somebody.
| | 06:48 | And that definitely makes
things a little more efficient.
| | 06:51 | So let's go back into our app and just reload,
everything should be fine, nothing is really
| | 06:59 | happening differently right now, but we have
with these lines of code loaded the JavaScript API.
| | 07:06 | Once you loaded the JavaScript API, you can
check and see whether or not a user has logged
| | 07:11 | into your app, and we will do that next.
| | Collapse this transcript |
| Checking for registered users| 00:00 | Before we access social graph data, we
can check on the user's login status.
| | 00:05 | We can find out if a user is logged in to
Facebook, and if they have authorized our app.
| | 00:10 | We do that with the
getLoginStatus method of the API.
| | 00:14 | So let's take a look.
| | 00:15 | When you use a Facebook API, you will be
working with different types of methods.
| | 00:19 | The ones that you are going to use more
often are the core methods which are right here.
| | 00:24 | They are FB.init, which handles the loading of
the Facebook API, we've already used that one.
| | 00:30 | The FB.api, which handles access
to the social data or social graph.
| | 00:34 | Finally, there's the FB.ui, which lets you access
parts of the Facebook user interface like dialogs.
| | 00:42 | The next section is what we are
interested in, the Authorization Methods.
| | 00:44 | To check to see if a user is logged in,
we use the FB.getLoginStatus method.
| | 00:50 | So let's click on that.
| | 00:53 | The example right here gives you three options,
and it's really nicely commented so you can
| | 00:57 | read that if you want to, but essentially,
we want to find out if the user is logged
| | 01:01 | in to Facebook and has authorized our app.
| | 01:04 | If they are logged in to Facebook, but haven't
authorized our app, we won't be able to do something then.
| | 01:09 | Finally, if the user is not even logged in
to Facebook, we also want to know about that.
| | 01:14 | Now remember that users can access your app
outside of Facebook, because frankly, it's
| | 01:19 | just a simple web page.
| | 01:21 | So you need to figure out what your
authorization strategy is going to be.
| | 01:24 | Do you want users to go to your web site and
see that page outside of Facebook or do you
| | 01:30 | want them to only have access within
Facebook, and that's what this function is about.
| | 01:35 | So let's take a look at
how we would implement that.
| | 01:37 | First, I am going to go to BBEdit and pull up
Transmit right here, and I have some versions
| | 01:44 | of the getLoginStatus method.
| | 01:46 | So what I am going to do is I am going to
open up my JavaScript file over here and just
| | 01:51 | double-click on that.
| | 01:53 | So if you remember, we loaded the
JavaScript SDK Asynchronously here, and once this SDK
| | 02:00 | is loaded, then it's going to execute this
fbAsyncInit function, and we wanted to make
| | 02:05 | sure that we initialize the JavaScript API here,
and we can add some additional stuff right here.
| | 02:12 | This is still part of the function.
| | 02:14 | So this is going to happen only
after the SDK has successfully loaded.
| | 02:18 | So we are going to go back into codesnippets
and grab the first version of our function.
| | 02:23 | So here we are going to check to see if a user
is logged into Facebook and authorized our app.
| | 02:29 | So I am just going to grab that, go
back here and paste that code right there.
| | 02:35 | We're finding out if the user is actually
logged in, so this getLogin function gets
| | 02:41 | a response from the Facebook API
that tells us if a user is connected.
| | 02:46 | If the user is connected, then it gives
us a user ID as well as an accessToken.
| | 02:51 | An accessToken is a security measure that
allows us to communicate with certain parts
| | 02:56 | of the Facebook API.
| | 02:57 | Unfortunately, we haven't really discussed
how to allow a user to have access to our app.
| | 03:02 | So this is not going to do anything.
| | 03:04 | So if I save this, go back into my browser
and take a look at the app, this is going
| | 03:11 | to load, but it's really not going to do anything,
because we haven't added this app to this user.
| | 03:17 | So let me go back into BBEdit, and I am
going to get the next version of the code which
| | 03:23 | lets us do something if the user is logged
in to Facebook, but hasn't authorized the app.
| | 03:29 | So if the response status is not authorized,
the user is obviously in Facebook, because
| | 03:33 | it's getting some sort of response,
but hasn't authorized our app.
| | 03:36 | So I am going to copy that and click right
here and replace this function, now I am going
| | 03:43 | to delete this part right
here and give that some space.
| | 03:47 | So if the user is not authorized, but
is in Facebook, we could do something.
| | 03:52 | So let's test that out by adding a dialog box.
| | 03:54 | Let me just do an alert here, and I'll just
put in "User is in Facebook. But not your app".
| | 04:06 | So I'll save that, and I am going to go
back into Facebook and reload this app, and we
| | 04:12 | get this dialog box, because the user is in
Facebook, but hasn't given access to our app.
| | 04:17 | I am going to click OK.
| | 04:18 | Now sometimes you may want to debug
something without producing an alert.
| | 04:22 | So for that you can use something called console
.log, and treat it just like an alert, save it,
| | 04:29 | and I'll go back into Safari, and I'll refresh.
| | 04:32 | Now it's not going to give us the dialog box,
but if we go to the Develop menu, and select
| | 04:39 | Show Web Inspector, and then click on
Console, we'll see that it gives us a message.
| | 04:44 | Sometimes we want be able to push silent
messages onto this Console, and that's a really, really
| | 04:48 | good way of doing it, and
it's a great way of debugging.
| | 04:51 | If you don't have the Develop menu, make
sure you go to the Safari menu > Preferences and
| | 04:57 | under the Advanced tab turn on
Show Develop menu in menu bar.
| | 05:00 | This is in different places in different
browsers, but just about every browser has some sort
| | 05:05 | of developer tools.
| | 05:08 | So let's go back into BBEdit and into our
codesnippets and grab the last version of our function here.
| | 05:14 | So it looks like I have a
couple of the duplicated lines.
| | 05:16 | So let me just get rid of this one.
| | 05:18 | So here I find out, if the user is logged in, if
they are logged in, then I can do something right here.
| | 05:23 | This is if they're logged
in and authorized our app.
| | 05:26 | Next, if they're logged into Facebook, but
not our app, then we could do some thing else
| | 05:29 | here, which we've done in our sample app.
| | 05:32 | So if the user is not logged into Facebook,
but has access our app through our web site,
| | 05:37 | then we could do some thing.
| | 05:38 | And one of the things that we could do is
just redirect a user to log into Facebook.
| | 05:42 | So you don't necessarily have to do this,
but if you want to make sure that users are
| | 05:47 | logged in to Facebook before using your app,
you want to maybe send them back to log in
| | 05:52 | to Facebook, by changing the
window location of the browser.
| | 05:57 | So let's see how that would work.
| | 05:58 | I am going to grab this, go back into my
code here, and I'll replace this, and so now I
| | 06:10 | am going to refresh this page, I am
going to go ahead and close the Console here.
| | 06:14 | You are not going to see anything,
because I'm obviously logged into Facebook.
| | 06:20 | So let's go to another browser,
and I have another user right here.
| | 06:24 | Let's try going to our app
right now and see what happens.
| | 06:27 | So you see this user is logged in
and he's got into the app just fine.
| | 06:31 | So now I am going to go over here and just log him
out, and I am going to try to go to the app again.
| | 06:39 | So it goes to the app for just a second, and then
it redirects the user to the Facebook Login page.
| | 06:45 | Now if somebody tries to access your app just on
your server, it should do the exact same thing.
| | 06:53 | So you could see there that it also kicked
you back to the Facebook page because the
| | 06:56 | only way to see that page or that
app is by logging into Facebook first.
| | 07:02 | So like I said, you really have to decide
what your authorization strategy is going to be.
| | 07:06 | Do you want people to access the page that
is on your server, whether or not they're
| | 07:11 | logged in, you can give special privileges
or show different things to people that are
| | 07:15 | both logged in to Facebook and your app, and
it's just something that you have to decide yourself?
| | Collapse this transcript |
| Using the OAuth dialog| 00:00 | After we check the registration status of a user,
we can ask them to log into our application.
| | 00:05 | Authorization can happen in a few ways.
| | 00:08 | We can choose to make our application
visible to any user, regardless of whether they're
| | 00:11 | logged into Facebook or not, and this is what we've
already done in a movie Creating a Basic App Page.
| | 00:17 | We can also choose to show a normal version
of our app to some users and a more enhanced
| | 00:21 | version to users who are logged in.
| | 00:23 | Finally, we can require anyone who
comes into page to log into Facebook.
| | 00:28 | Let's take a look at some simple
authentication with the FB.login method.
| | 00:32 | So if you go to the JavaScript Developer
section of Facebook developers, you can see a function
| | 00:38 | down here if you scroll down a bit called
FB.login, and this is the one that we are
| | 00:42 | interested in adding to our application.
| | 00:45 | It's a pretty simple function, you call it,
and it prompts the user to authenticate your
| | 00:48 | app using a dialog.
| | 00:50 | I have a slightly simpler
version of this function.
| | 00:52 | And I am going to switch over BBEdit, also open up
Transmit, and I want to open my JavaScript file right here.
| | 01:00 | I will go into codesnippets, and I am going to
grab a super simple version of that function,
| | 01:06 | it just says login a user.
| | 01:09 | Go back into myscript, and I want to put it
right here where if a user is not authorized
| | 01:14 | to user application, I am going to ask
the user to authorize it with FB.login call.
| | 01:21 | So I'll save that, and I am going to go back
into my application Safari, and I will refresh.
| | 01:31 | If nothing happened, it's because Safari
is blocking pop-up windows, and that's one of
| | 01:35 | the problems with using the function like this.
| | 01:37 | It causes the browser to launch a pop-up window,
and because of years of pop-up misuse, most
| | 01:43 | of the browses have learned to block them.
| | 01:45 | So if you use this method, people might not
see the dialog come up at all, for that reason,
| | 01:50 | FB.login should be called as result of a click.
| | 01:52 | We will do that in a minute.
| | 01:54 | First I am going to show you that we will
undo Block Pop-Up Windows, and I will refresh,
| | 01:59 | and we should see the
Authorization dialog come up, there it is.
| | 02:03 | Now the other problem with this method is that it
will only retrieve the basic information from the user.
| | 02:10 | So it shows things like their ID, name picture and
other things depending on their Privacy Settings.
| | 02:17 | Basic permissions are not too exciting, so
we can add permissions to our call by adding
| | 02:21 | them to our FB.login in the Scope variable.
| | 02:24 | I am going to hit Cancel
here, go back into BBEdit.
| | 02:29 | And I'll grab a different version
of the FB.login function like this.
| | 02:34 | You can see that this uses a JSON like
object to add the Scope variable, where I can type
| | 02:39 | in a number of different permissions I want.
| | 02:42 | So I will copy that back into myscript, I will replace this one,
that one and indent it a little bit. Let's get rid of that.
| | 02:51 | I will save it, go back into my app.
| | 02:55 | I will refresh the page
and wait for it. There it is.
| | 03:01 | And now you can see that it's asking, not only for my
basic info, but my email address as well as my likes.
| | 03:06 | Now, you might be asking yourself, where can I
find all the different permissions that I can ask for?
| | 03:11 | I am going to hit Cancel here.
| | 03:14 | And I am going to into
the Permissions Reference.
| | 03:19 | So at this URL you can find all the
different kinds of permissions that you can ask for
| | 03:23 | in your application.
| | 03:25 | You might be tempted to ask for all
permissions and although you can do that, people are vary
| | 03:29 | of giving certain types of information, and
you should know that the more things you ask
| | 03:34 | for, the less likely people
are to install your application.
| | 03:37 | Asking for certain things like email addresses
will dramatically lower your chances of people
| | 03:42 | installing your app.
| | 03:43 | So we need to deal with the pop-up problem
as I mentioned, because a lot of browsers
| | 03:47 | block pop-ups, you should make the FB.
login call when a user clicks on a link.
| | 03:53 | This way you can also choose to show a
version of the page to users who are logged in and
| | 03:57 | a different version to users who are not.
| | 03:59 | So let's do that. We are going to go
back into BBEdit and also pull up Transmit.
| | 04:04 | So I am going need to open a few other files.
| | 04:06 | I am going to need the index.
php as well as the stylesheet.
| | 04:10 | I already have the script open,
so I am going to open those two.
| | 04:17 | And the first thing I need to do is make
sure I replace the monogram with some content,
| | 04:22 | so I will grab this, monogram was just a picture that
was at the top of the application, which is right there.
| | 04:29 | And I will paste this over here.
| | 04:31 | So what we're doing here is we are creating
two different sections, one that people will
| | 04:36 | see if they're logged off and one that
people will see if they're logged in.
| | 04:41 | So if a user is logged off, they will get
this welcome message, and it has a link they
| | 04:45 | can click on to a function that
we are going to create a bit later.
| | 04:48 | I am going to save that, the next thing I
need is to make sure that not everything is
| | 04:53 | showing up when somebody loads the
page, but just the parts that I want.
| | 04:57 | So back into codesnippets,
and I want to grab these styles.
| | 05:01 | So by default the logged off section is going
to be on or displayed and the logged in section
| | 05:08 | is going to not be displayed.
| | 05:09 | We are going to assume that people are
logged off, when they come to our applications.
| | 05:13 | So I will copy that, go
in to mystyle.css, save it.
| | 05:18 | Okay, so we've got that, the next thing we
need is the actual gologin function that we
| | 05:24 | are calling when somebody clicks.
| | 05:25 | So I am going to grab this right here
and copy it, go back into my script.
| | 05:30 | I am going to take out this login function
because I don't want to automatically pop-up
| | 05:34 | the window anyways.
| | 05:36 | What I want to do is just put this
function outside of the AsyncInit.
| | 05:42 | So this is the function that
executes as soon as the SDK has been loaded.
| | 05:47 | So I needed to just be a regular
function, it's going to go outside that.
| | 05:50 | Let me delete that, and you probably
want to comment this a little bit better.
| | 05:56 | When function start looking like this, it's a
little bit confusing as to what goes with what.
| | 06:00 | So I am going to type in a comment here, put
fbAsyncInit right there and make sure I put
| | 06:09 | in this goes with getLogInStatus, so I will add
that comment, and this one is response.status.
| | 06:19 | I want to make sure I comment it so, //.
| | 06:22 | So now it's a little bit better, because I
can read what's what, and that's a good practice
| | 06:26 | when you're coding some of these pages.
| | 06:28 | So as soon as somebody clicks on this, it's
going to call the FB.login function and also
| | 06:34 | turn on the logged in section or the logged
in class, and turn off the logged off class.
| | 06:40 | So people will see the proper things,
it's still asking for the same permissions.
| | 06:44 | So let's save that, and let's go back into
Safari, back into our app, and we will reload this.
| | 06:51 | We could see the logged off
version of the application right now.
| | 06:56 | In order to login, we
will have to click on Log in.
| | 06:59 | And here's the same
Permissions, we will hit Play Game.
| | 07:03 | Now that we've authorized our app, we could
see the app with the logged in stuff showing.
| | 07:08 | And that's pretty cool, but there's a
problem with this app, let me go ahead and refresh
| | 07:12 | the page to show you what's happening.
| | 07:15 | So if I refresh the page, even though I'm
logged in, the application things, I'm not
| | 07:20 | logged in or at least it's showing me the
things that I should see when I'm logged off.
| | 07:24 | Let's switch back to BBEdit, that's
because when it executes a reload of the page, it
| | 07:30 | goes through all the stuff right here, and
it notices that we are connected, creates
| | 07:37 | the user ID and the access token, but let
it never gets to the part right here where
| | 07:42 | I am hiding the different elements.
| | 07:45 | So I need to make sure that I copy that,
and I paste it right here to make sure that I
| | 07:50 | turn things on and off properly.
| | 07:54 | And save that, that's also in
the codesnippets at the very end.
| | 07:57 | So actually this is wrong right here,
let me paste that there, save it.
| | 08:02 | And when I come over here, and if I refresh
the page, I should see the logged in version.
| | 08:08 | You are going to see the logged off
version for just a little bit, you could fix that
| | 08:12 | by messing around with the CSS files and
controlling what people see when they log in and what
| | 08:17 | people see when they're logged off.
| | 08:20 | So this way we have got a pretty sophisticated
login system, that makes your content available
| | 08:24 | to users who are logged in or out of your
app, and you can choose to show different
| | 08:29 | things depending on a user status.
| | Collapse this transcript |
| Exploring Canvas app authorization and data output| 00:00 | We have talked about ways of
authorizing users for different scenarios.
| | 00:04 | In this movie I am going to show you how to force
a user to be registered in order to see our app.
| | 00:08 | We will also take a look at the response we
get back from our server and see how we can
| | 00:13 | output it to the browser.
| | 00:14 | So I am going to go over to the JavaScript SDK,
and then I am going to click on Core Concepts.
| | 00:20 | From here I am going to go over to the
Authentication section and take a look at some of the options
| | 00:24 | that we have right here.
| | 00:25 | As you could see there are many different
ways of authenticating an app, depending on
| | 00:30 | where it's coming from.
| | 00:31 | So you can do authentication for native
Android apps, iOS apps, as a tab, which is really
| | 00:37 | deprecated, and it probably won't be around
that much longer, but we can also do authentication
| | 00:42 | with a canvas page which
is what we've been doing.
| | 00:44 | So I am going to click on that, and you'll
see that even on this page there is a lot
| | 00:49 | of different options on the process
that you can do to authenticate a user.
| | 00:54 | I want to modify my page so
that it just becomes a canvas app.
| | 00:58 | If a user comes to the page they will be
required to log in to Facebook and your app.
| | 01:02 | To do that I am going to redirect the page to the
Authentication dialog if the user is not logged in.
| | 01:08 | Once the user logs in,
they'll be Redirected back.
| | 01:11 | This happens to be option 2a on this page.
| | 01:14 | So this is just a bit of code, I am going
to switch over to BBEdit, make sure I have
| | 01:18 | Transmit, because I am going to
need to open some of these files.
| | 01:21 | So the first piece of code that we need is
right here, I am going to open up the JavaScript
| | 01:26 | file, as well as the CSS file and
the Index file. So opens those up.
| | 01:34 | Okay, and the first thing we need is to
edit the JavaScript, so we'll go over here, and
| | 01:42 | I want to take off some of these
things that we did in the previous movie.
| | 01:45 | So after the access token we are going to
delete these two lines, and we are going to
| | 01:50 | delete the goLogIn function here.
| | 01:53 | And we are going to paste this code right here.
| | 01:56 | So if the user is not authorized, then they
will be taken to the Authentication dialog
| | 02:02 | box which you can get to by
taking the to this URL right here.
| | 02:08 | And then you can specify a
few additional parameters.
| | 02:10 | So you are going to need your client ID to
do that, we are going to go have to go back
| | 02:14 | in to our application, so I need to
come over here and click on this Apps tab.
| | 02:20 | I am going to hold down Command while I click on
this Apps, so that the app opens up in a new tab.
| | 02:25 | So here it is I need this AppID/APIKey so
I am going to copy that, switch back over
| | 02:31 | BBEdit and make sure that I paste that here.
| | 02:35 | This is our client or our App ID.
| | 02:37 | So after the page finishes registering a user,
it's going to come back to this URL, which
| | 02:43 | is the URL of the page on Facebook.
| | 02:45 | Under the Scope variable we are going to
add all the different permissions that we want
| | 02:48 | from the user, so I have quite a few right here.
| | 02:52 | Finally, after we construct this URL, we just set the
location of the window to the oauth_url, which is that.
| | 03:00 | So I am going to save this, and I also need
to edit the CSS file, we are no longer going
| | 03:04 | to need these, so I will
just delete that, save that.
| | 03:07 | I need to go into my codesnippets and get a
new version of our HTML, this is just going
| | 03:12 | to be almost back to the
original and a slightly simpler version.
| | 03:18 | So I am going to take all of the stuff inside
the content tag and just paste this new version,
| | 03:23 | which actually happens to be
the old code that we had before.
| | 03:26 | I think we are done. Let's check out our app.
I am going to come back here, I am going to
| | 03:33 | refresh, and I'm probably
already logged into this app.
| | 03:36 | So you can see that this page is a little
bit different than it used to be before.
| | 03:40 | If you ever want to make sure that you see
the Authentication page again after we have
| | 03:44 | already logged into one of these examples,
you want to go back to your page, and then
| | 03:48 | find the Source Foo app here and just click
on this Edit button, and then remove the app.
| | 03:53 | This will delete the app, so
that's no longer available to you.
| | 03:57 | So once we do that, then we can go back to
the App page, I think it's the Back button here.
| | 04:02 | So I'll hit Cancel, when you try to go to
that page, it's going to send you to this
| | 04:06 | Authentication dialog page.
| | 04:08 | And here you can hit this Play Game button.
| | 04:14 | And so we verify that the changes that we
have done, force the user to authenticate,
| | 04:19 | and then take the user back
to the original Facebook page.
| | 04:22 | So now that we've done this, let's take a look
at some of data that we get back from Facebook,
| | 04:26 | because this is where the cool stuff happens.
| | 04:29 | Once the user is logged in, I am going to post
the data into the console, so we can peek at it.
| | 04:33 | So let me go back into BBEdit
and back into my codesnippets.
| | 04:38 | So what I want to do is copy this FB.api method,
and then get the data back from that function
| | 04:45 | and just output it to the console.
| | 04:47 | So I am going to copy this
and go back into myscript file.
| | 04:53 | And I want to do this after the user is logged in,
and we get the response here in the accessToken.
| | 05:02 | So right here I want to paste that here.
| | 05:06 | And what we're doing is calling this FB.api
function, that is one of the core functions
| | 05:13 | for the JavaScript API, we can look up that
page and the Developer tools, and that function
| | 05:19 | returns this info, and that
info can be output to the console.
| | 05:24 | This is only going to work with
browsers that let you preview the console.
| | 05:28 | So make sure you have something like
Chrome or Safari installed in your machine.
| | 05:32 | I think Firefox might do it as well.
| | 05:33 | Okay, I will hit Save, and I am going to come
back into my App just refresh the page, it's
| | 05:40 | not really going to do anything, but if we
go to the Develop menu, and we select Show
| | 05:45 | Web Inspector, what you want to do is you may
be showing the Elements tab or the Resources
| | 05:52 | tab depending on what you've
been doing with your application.
| | 05:55 | What you want to do is go to this Console tab,
when you go the Console tab you are going
| | 05:59 | to see this object right here, when you click
on that, you are going to be able to see all
| | 06:02 | the user data that you get from Facebook.
| | 06:05 | So this is everything that you ask for,
including Birthday, Education, the Email address, first
| | 06:11 | name of the user, their
gender etcetera, etcetera.
| | 06:14 | you can see that some of these are objects
or arrays so this is an array right here.
| | 06:19 | And if I open that up I can see that
there's another object here, and this object talks
| | 06:25 | a little bit about the
user's school information.
| | 06:28 | So this is actually in a format called JSON, I'll
be talking a lot about that format in another movie.
| | 06:35 | So if you don't know how to work with JSON data,
that's probably going to be a good thing for you to watch.
| | 06:41 | So let's take a look at some of these other
stuff, sports, I am going to click that Open,
| | 06:46 | open this up, you can see they are into Cycling
and Triathlons and Running, that's pretty cool.
| | 06:54 | And the fact that we have access to this
data is pretty awesome because now we can build
| | 06:58 | apps that do a lot.
| | 06:59 | So let's see how we could do that.
| | 07:01 | I am going to go back into BBEdit and instead
of just printing out everything to the Console,
| | 07:06 | I am going to go back into my codesnippets.
| | 07:08 | I am going to output
something to the div called welcome.
| | 07:13 | So if you look at the index.php document, one of
the things that we added is this new div right here.
| | 07:19 | So I want to print something right there.
| | 07:21 | And what we want to print will go right here.
| | 07:26 | So we will find in the element welcome
and make the inside HTML, we enter HTML.
| | 07:31 | It's "Hello there", and we'll get the info from the FB
.api function and output the first name of the user.
| | 07:40 | So I am going to save that, go back into my
app, if I go right here, then you can just
| | 07:47 | make that a little smaller, if it bothers
you, you just close it, we don't really need
| | 07:51 | it right now, so we will reload.
| | 07:54 | And after a little bit you'll see that their
name comes up Hello there Stuart, that's something
| | 07:59 | that you got from the social graph of this user.
| | 08:02 | So let's go back and take a look at a
couple of things that we could do here.
| | 08:06 | One of the things we did when we created
this structure for our app is load up jQuery.
| | 08:11 | So I really like the way jQuery gives you
additional functions and additional capabilities
| | 08:16 | when working with browsers.
| | 08:18 | So I like to use that instead of straight
JavaScript, so this is the jQuery version
| | 08:22 | that does the same thing.
| | 08:24 | I want to go back into my JavaScript file and
just replace this with our new jQuery version.
| | 08:31 | It does the same thing, it's just done
with jQuery, instead of regular JavaScript.
| | 08:37 | So anything that you want can be
output by just putting it right there.
| | 08:41 | Let's try outputting something else.
| | 08:43 | Let's go back over here to Safari just take a
look at the object data, and let's try outputting
| | 08:49 | maybe the birthday.
| | 08:50 | So we will switch back to BBEdit, and we'll
type in here birthday, save it, back to our
| | 08:57 | browser, refresh, and let's
see if the birthday comes up.
| | 09:00 | And there you go you have got the birthday.
| | 09:02 | So anything from this object can be
accessed since we have permission now.
| | 09:07 | So you could do quotes, you could do one
of the sports, time zone, anything that's on
| | 09:13 | the user data, you can go ahead and output.
| | 09:16 | So there is his last name, I guess a
link to their profile etcetera, etcetera.
| | 09:22 | This is pretty cool, there is a name right
here that you can use to output the entire name.
| | 09:26 | So that's pretty awesome, that's access to
the data. Let's take a look at some other stuff.
| | 09:30 | I am going to go back into my codesnippets,
work on the API we've been using this uid
| | 09:37 | that's in our script.
| | 09:39 | You could use that if you want to.
| | 09:40 | Notice right here, this uid is something
that you get from the response that comes back
| | 09:46 | from the login status.
| | 09:47 | Now, you don't have to use uid, you
can actually use something called me.
| | 09:52 | And the way that you do that is you just put
in quotes "/me" save it, and I want to come
| | 10:00 | back here, refresh, and just show you that
it's the same thing, it's going to work in
| | 10:05 | the same way, but instead of using the
user ID, because you're already logged in, you
| | 10:11 | can use this little variable called me,
which it's not really that big of a deal, but it
| | 10:15 | seems a little slicker.
| | 10:18 | So instead of this uid, you can
come in and replace it with /me.
| | 10:23 | Once you have access to the social data,
otherwise known as the social graph of the user, the
| | 10:29 | possibilities of what you can do with data
are endless, you do have to understand a bit
| | 10:33 | of how a JSON works, but I will be
showing you that on the next chapter.
| | 10:38 | In the meantime, get familiar with the user
information you can gather from the social
| | 10:41 | graph, because it is truly awesome.
| | Collapse this transcript |
|
|
4. Adding JSON Data FeedsIntroducing JSON| 00:00 | When working with the Facebook JavaScript API,
you will need to understand how to access
| | 00:04 | user data in the Open Graph, that
data is stored in a format called JSON.
| | 00:09 | Let's tack a look at what JSON is.
| | 00:11 | So JSON stands for JavaScript Object Notation,
it's a way to describe data so that JavaScript
| | 00:17 | can easily interpret it.
| | 00:19 | If you're used to RSS or XML feeds, you will
find that JSON is much easier to parse, but
| | 00:24 | it can be a little bit harder to
read, especially when minified.
| | 00:28 | JSON data is nothing more
than text in a specific format.
| | 00:31 | And when it all comes bunched
together, it's a little bit tough to see.
| | 00:35 | Lots of different companies like Facebook and
Google provide access to their data in JSON format.
| | 00:40 | And as I mentioned, the
JavaScript SDK relies heavily on JSON.
| | 00:44 | The most basic type of
JSON data is a JSON object.
| | 00:48 | It's simply text wrapped in curly braces,
inside they have a string usually a variable
| | 00:54 | name and a value separated by a colon.
| | 00:57 | You can specify more than one element in
the object by separating them with commas.
| | 01:02 | So straight on the left is usually a variable name,
but it's pretty much like a standard C string.
| | 01:07 | If you need to escape a character,
you can use the back slash.
| | 01:10 | The value on the right of the object can be
lots of different things that includes nesting
| | 01:15 | objects inside other objects, or even an array,
which in turn can also have other objects.
| | 01:21 | Here's an example of a JSON data file.
| | 01:23 | You can see an object
with a string called users.
| | 01:26 | Strings can and sometimes need to be quoted,
and then you'll see a semicolon and an array
| | 01:31 | with a bunch of other objects.
| | 01:33 | So the other objects are in curly braces.
| | 01:36 | You can see also that this word joined is
also another object with a bunch of data in it.
| | 01:42 | So that gives you an idea of how you
can put objects inside of other objects.
| | 01:47 | So although JSON works well with JavaScript,
there are a number of PHP functions that can
| | 01:52 | easily parse JSON data.
| | 01:53 | JSON has some security features that usually
prevent you from loading files from external
| | 01:58 | URLs without some type of permission, and as
I mentioned before, the Facebook Open Graph
| | 02:03 | API calls return data in JSON format,
especially in the JavaScript API.
| | 02:09 | JSON is a wonderful tool for JavaScript,
when you format data in this manner, it will be
| | 02:14 | parsed, and it'll be easier
for you to use in your projects.
| | Collapse this transcript |
| Creating Open Graph data with the Graph API Explorer| 00:00 | Facebook provides a number of
tools for working with apps.
| | 00:03 | One of the coolest tools
is the Graph API Explorer.
| | 00:07 | It allows you to preview the data the API
returns in JSON format. Let's take a look.
| | 00:12 | If you have been following along with the
exercises, we have seen the data we receive
| | 00:16 | from the API, can be sent to the Console.
| | 00:19 | So if I go to the Develop menu and Show Web
Inspector, so if we open up this Object that
| | 00:25 | we output to the Console, you can see all the
data that we've gathered from the Facebook API.
| | 00:31 | This is not exactly in JSON format, it has
been interpreted for us, and this is actually
| | 00:35 | a good way of visualizing the data.
| | 00:37 | But sometimes you want to see--especially
since we are talking about JSON itself--the
| | 00:41 | raw data that comes from Facebook.
| | 00:43 | To do that, we can use
the open Graph API Explorer.
| | 00:47 | To find it, just go to the Developers
section and under the Tools section, if you're in
| | 00:52 | the JavaScript SDK, it's right underneath it.
| | 00:54 | Just click on Tools and
open up the Graph API Explorer.
| | 01:00 | So when you run it, you will see the basic user
information that anyone can access about our account.
| | 01:05 | So this is public data, the name of this user,
first_name, last_name and the link to their
| | 01:12 | profile plus their gender and their locale.
| | 01:15 | Now if we try to access some of this other
data, you can see the connections that can
| | 01:19 | be made to other types of data.
| | 01:21 | Let's try to click on
family and see what happens.
| | 01:23 | You will see that it says that "An access
token is required to use this resource."
| | 01:27 | So this is kind of interesting, too, if you
actually put this in a browser, you will be able to
| | 01:32 | get this to this data as well.
| | 01:34 | So if we grab that number--and
I am going to open up a new tab.
| | 01:39 | The URL is a little bit funky, graph.facebook.com,
so graph.facebook.com, and I'll put a slash and that number.
| | 01:48 | So this is actually our ID number, and as
you can see, anybody can actually type that
| | 01:52 | into a browser and get this user information
about you, including your ID, first_name and
| | 01:58 | last_name and whatever you have made publicly
available in your Permissions and your Profile.
| | 02:05 | So Facebook is doing exactly this.
| | 02:07 | It's actually sending a request to the graph.
You can see this is graph.facebook.com and
| | 02:13 | retrieving the data, and it
comes back in JSON format.
| | 02:16 | So if we go back to the API Explorer, and
we switch over to our application--right now
| | 02:21 | we only have one application, and it's this
one right here--you'll see that it creates
| | 02:26 | an Access Token, that's this
security measure right here.
| | 02:30 | It's just an encrypted piece of text that allows
Facebook to make sure that this is a good request.
| | 02:35 | We can see a lot more data, scroll down here
because we have authorized this application
| | 02:41 | to let us see a lot more data than we have.
| | 02:44 | So now, if we do something like go to albums,
we'll be able to see the albums for this user.
| | 02:51 | Now still some of this data is
not going to be available to us.
| | 02:54 | Let's see this, activities might be just
empty because the user didn't fill anything out.
| | 02:58 | But if we try to click on addaccounts, you
could see that managing this requires extended
| | 03:02 | permissions that we didn't ask for.
| | 03:05 | So we could see the friends lists, doesn't
really have anything, the user's feed and
| | 03:12 | notice how the Graph API URL also changes.
| | 03:16 | So we can actually make calls within our
application to the Facebook Graph API with these different
| | 03:22 | URLs and get the data that we need for
whichever part of the application we're working on.
| | 03:29 | You also have the ability to do a GET or a
POST or a DELETE command, so you can send
| | 03:34 | different types of commands to the Graph API.
| | 03:38 | And when you go through developing applications,
you'll know that--let's go back to the Developers
| | 03:45 | let's just Command-click to create a new tab--
a lot of times you will be asked to do certain
| | 03:50 | things like create a post or a GET command
to access different types of elements, so
| | 03:56 | back to the JavaScript SDK here.
| | 03:59 | So some of these functions say FB.api will
perform some of those calls to the URL exactly
| | 04:06 | like what we're doing in the Graph API, and
get a response. The response will be the JSON
| | 04:13 | data in the format that we saw in the Graph API.
| | 04:16 | So by taking a look at the Graph API, you
can see the data that returns. By taking a look
| | 04:20 | at this URL, you can see what you need to
type into the FB.api command, you just paste
| | 04:26 | the URL right here, and then the response
that you get will be that nicely JSON formatted
| | 04:32 | data that we've been seeing so far.
| | 04:34 | So if we go into our application, you could
see that this Console doesn't exactly give
| | 04:40 | you the data in JSON format, but it's
sometimes a little bit more useful because you know
| | 04:46 | that if you need to get say the education
of this user, you need to go to the object
| | 04:51 | that you get back, the data, and then get an array--
and right now, I guess this array only has one item.
| | 05:00 | So we can get to this data in the exact
same way that we would get to an array.
| | 05:04 | So if I wanted to get to say, the user's
first degree here, the degree name then we could
| | 05:13 | do something like--and I'll switch back
into BBEdit, scoot it over side by side.
| | 05:20 | So if we wanted to print something else out,
we could get to that same object by querying
| | 05:25 | the Graph API with the me function--that
just gets the data for whichever user happens to
| | 05:31 | be logged in at the moment--and then we type
in education because it's the next node right
| | 05:36 | here, and then the education is going to be
an array, and we want the first item in the
| | 05:43 | array which is the 0th item.
| | 05:45 | Don't get confused by this Array 1 thing. That just
means that that there is one object in that array.
| | 05:50 | The index of the array is zero.
| | 05:53 | So we have to type in education 0, and then
we just type in name which is the next thing
| | 05:58 | that we want, and then we can just hit Save,
and go back into our App and reload.
| | 06:09 | And then it looks like we are undefined for some reason,
so education, this should be education, and
| | 06:16 | then zero, and then object, the 0th
object and looks like I missed something.
| | 06:22 | Let's go back into
BBEdit and see how I wrote it.
| | 06:25 | So info.education, and then it looks like I
forgot--I put name, but I didn't put the
| | 06:30 | name of which thing that I want which will
be degree or school. Let's open up school here,
| | 06:36 | school name, okay, great, so I'll switch back
here, and I just forgot the words school right
| | 06:43 | here, school.name, save that and Refresh and
hopefully I get it right this time, and we
| | 06:52 | get the school name for that particular user.
| | 06:55 | So when you want to sort of visualize what
the JSON data looks like, so that you know
| | 07:01 | how to get this, you can either use the
Console--just log in the object to the Console, it's
| | 07:06 | a little bit easier to read. If you want to
see the raw data, you can use the API Explorer.
| | Collapse this transcript |
| Creating the app's shell| 00:00 | Now that we've handled registration, and we
know how to dig into the graph API, I want
| | 00:04 | to take some time to do a little bit a set up.
| | 00:06 | We're going to update the app logo and
start building the structure for our app.
| | 00:11 | So I'm going to go to the developer's page
and click on this Apps link at the very top,
| | 00:17 | and I want to update the icon
that Facebook uses for my app.
| | 00:21 | Right now, it's just generic icon, and it's
going to look really bad on the app page and
| | 00:26 | in other places when we get
notifications for this app.
| | 00:29 | So I'm going to click on this Edit button,
and I'm going to hit Choose File, and I have
| | 00:34 | the working folder already on my Desktop,
has a copy of the monogram that I use for
| | 00:40 | this app, so I'll click on it, hit
the Choose button, it should update it.
| | 00:46 | If not I'm going to try
refreshing it, and there is it.
| | 00:49 | So that's pretty cool.
| | 00:50 | It's nice to have an app icon, it should be
probably about 200 pixels square I mean you
| | 00:55 | could make other sizes but I like this rectangular size
it works really well, and it looks nice, when it's small.
| | 01:02 | So now that we've got our app icon it's
time to change the structure of our app.
| | 01:07 | Right now, this is really just a generic sort
of placeholder text for what my app is going
| | 01:12 | to be, I want to have two
for columns for this app.
| | 01:15 | So I need to just code that HTML and create some
CSS to make sure that it can handle that structure.
| | 01:21 | So, I'm going to switch
over to BBEdit, my Text Editor.
| | 01:28 | So I want to open up the working folder and
open of the codesnippets into my Text Editor,
| | 01:34 | and there it is it already exists up there.
| | 01:36 | And I want to make sure
my facebook folder is open.
| | 01:40 | And I need to edit the CSS file just for
some basic styles, so I'm going to open that up
| | 01:47 | and also update my index.
php file, with some changes.
| | 01:52 | So I'll start with the CSS, go back into
codesnippets and just grab the CSS, paste it into my CSS
| | 01:59 | file, and I'll save it, and I'll
just explain what some of the stuff is.
| | 02:04 | I have this group class right here that is
going to take care of some issues that happen
| | 02:10 | when you float items.
| | 02:13 | Sometimes, the containers of the floats do
not understand the height of the content that
| | 02:18 | they contain and so this is a fix for that.
| | 02:21 | If you want to learn more about CSS, make
sure you check out James Willison's Excellent
| | 02:25 | CSS Fundamentals Course on
the online training library.
| | 02:29 | Let me go back to my CSS file, and
explain some of the other things that I'm doing.
| | 02:34 | So usually when you create any sort of
HTML doc you want to create a default font for
| | 02:40 | the entire document, and
that's what I'm doing here.
| | 02:42 | I'm setting the font to normal 100% size
and just a standard font, lucida grande.
| | 02:49 | I'm setting up standard paragraph size, and
I set up the two sidebars or the main section
| | 02:56 | of my code and the
sidebar that are here and here.
| | 03:01 | So this is just essentially the core
structure of my page, I'm going to save this.
| | 03:07 | And now I need to modify this because obviously,
I don't have those sections included in here.
| | 03:13 | So I'm going to go back in to codesnippets
and just grab the next section of code, and
| | 03:18 | this is just what goes inside the content area.
| | 03:21 | So I'll copy that, and I will delete all this,
leave the content tag right there. I'll paste it.
| | 03:28 | Let me go ahead and indent it a little bit.
| | 03:31 | So in our content, we have a main section as
well as a sidebar, and we'll put some sidebar
| | 03:38 | content in here in other movies.
| | 03:41 | Now we have the fb-root div which is
important because Facebook needs that div in order to
| | 03:46 | place its content within the app.
| | 03:49 | The next item we have here is a message,
this is sort of my version of fb-roots.
| | 03:56 | It's going to be a place for me to put messages
that I want to communicate to the user of the app.
| | 04:02 | Finally, we have the welcome ID, that we
did before so we can publish some of the data
| | 04:09 | that we get back from the Facebook API.
| | 04:12 | So I'll save that, and we need one more thing
need to update the JavaScript so that we just
| | 04:17 | output the user's name.
| | 04:19 | Right now, I believe it's outputting the
location of the user school which doesn't necessarily
| | 04:24 | look that great it's
outputting this name here of the school.
| | 04:27 | So I'm just going to reset
that back to the user's name.
| | 04:30 | So to do that, I'm going to
need to open up my JavaScript file.
| | 04:37 | I'm going to replace this line where I
output the user's education with the new version
| | 04:42 | of it that just outputs the name.
| | 04:45 | So this is not going to look super exciting, but
it's going to have the basic structure of our page.
| | 04:50 | So let's just Refresh, most of the stuff is
going to be gone, and we are just going to
| | 04:55 | see the sidebar content and Hello undefined, right
now let's see if we made some sort of mistake here.
| | 05:02 | I didn't need to put education first name.
| | 05:05 | So let me fix that, it just needs to be info.first_
name, copy that and back into myscripts, and I will
| | 05:20 | replace this with first name of the user,
back into our app, we'll reload here, and
| | 05:30 | now it's going well.
| | 05:32 | It's not exactly exciting, but it's important
to pay attention to details like the app icon,
| | 05:39 | you can see it already appearing right here
that looks a lot better than it did before,
| | 05:44 | and we've set up the base structure
for what's going to go on our page.
| | Collapse this transcript |
| Adding a JSON video feed with YouTube APIs| 00:00 | Most apps need to communicate with data of
some sort, usually some type of database.
| | 00:05 | If we were using PHP we might
hook up to a MySQL database.
| | 00:08 | Since we are focusing on the JavaScript API, we
need to stick to what we can do with JavaScript.
| | 00:14 | Thankfully, we can use JSON formatted
data to add some dynamic content to our page.
| | 00:20 | In this video, I am going to show you how
to display a feed from a channel in YouTube.
| | 00:23 | So I am going to switchover to BBEdit and
also Transmit, open up, make sure I have my
| | 00:29 | facebook folder open here.
| | 00:32 | And the first thing I need to do is modify
the HTML to add the placeholder where I am
| | 00:37 | going to put on my video.
| | 00:38 | So I'll open up the index file, and
that's going to go in the sidebar.
| | 00:43 | So here's my sidebar, and I'll delete the
thing that says Sidebar content because we
| | 00:47 | are adding some content,
and indent it a little bit.
| | 00:50 | So now we are ready to put some
content in this video group section.
| | 00:55 | So back into codesnippets, the next thing
I need to do is add the YouTube JSON call.
| | 01:00 | So let me just copy that, that's going to
go at the bottom of our page just before the
| | 01:06 | closing bodytag right there,
and I'll indent it like this.
| | 01:12 | You can see that this is querying a URL from
YouTube, looking for feeds of a specific type.
| | 01:18 | So in this case, I am going to look for a
channel called lynda, and look for the uploads
| | 01:24 | of that channel, make sure that I am in a
JSON format, and then it's asking YouTube
| | 01:32 | to return to a function called populateVideos.
| | 01:36 | So I'm going to have to create this
function called populateVideos in my JavaScript.
| | 01:41 | And I'm asking for seven results, and
the category is going to be my last name.
| | 01:46 | So if you actually take this and copy the
URL, so I am just going to copy this URL and
| | 01:52 | put it on a browser, let me open a new tab here,
you're going to get a feed of JSON data like this.
| | 01:59 | This is really hard to read, and this is
normally what happens with JSON, it's really tough
| | 02:05 | for human beings to read it
when it's minified like this.
| | 02:08 | But thankfully, there is a place called the
JSONLint which is a validator, you can just
| | 02:14 | paste that in here, and hit Return or hit
Validate, and it'll pull up the file in a
| | 02:21 | much more human readable format.
| | 02:23 | So you could see that we can get to different
parts of what we need from YouTube, and mainly
| | 02:29 | let's see if we can find the list of videos.
| | 02:31 | So category, go to the key words here
thumbnail, title and all kinds of other user data.
| | 02:39 | It's still a little bit tough to read but if
you parse this out you'll be able to figure
| | 02:43 | out how to get to the data that you want.
| | 02:45 | So I am going to go back in to BBEdit, and
so right here I've got this script that is
| | 02:52 | going to load the videos, and it's calling a
function when it's done that we need to create.
| | 02:58 | So I'll go back into my code snippets, and
I need to add this populateVideos function.
| | 03:03 | So I am going to grab the code from here.
| | 03:06 | So what this does is it reads the data that
it got from YouTube, always remember the other
| | 03:13 | call in the index file is
sending us to this function.
| | 03:17 | So it takes the entire YouTube feed
and puts it in the entries variable here.
| | 03:21 | So what this function does is it grabs all
the data from YouTube, and it feeds it into
| | 03:25 | a variable called entries, and then we start
by preparing an output variable that we are
| | 03:31 | going to use to output these things later
on into our page, you can see that it goes
| | 03:36 | to getElementById, finds the videogroup,
and it displays the output variable.
| | 03:41 | And what we do is we want to go through
each one of those entries in the YouTube feed.
| | 03:46 | And to get that, I am going to go to the
data which is the entire feed, and then find the
| | 03:51 | feed section, find the entry section, and then
find out how many items are in that entry section.
| | 03:58 | So if you looked at the JSONLint, you'd be
able to find something called feed entry.
| | 04:03 | So let's say we can find it feed, and
there's the feed right here, and we can do another
| | 04:09 | search for entry and here's an entry.
| | 04:12 | And there should be all the
entries following from here.
| | 04:16 | So let's say, here is the entry let's see an
entry is a array, and you can see the first
| | 04:24 | entry is right there and all the different
pieces of data are going to be right there.
| | 04:30 | So back into BBEdit, that's what it is doing,
and it's going through all the entries one
| | 04:35 | by one, and then it's kind of
parsing what I need from each entry.
| | 04:39 | I need to get the ID from one of these entries.
| | 04:44 | And what I need to do is find this thing
called $t, it's one of these things right here, see
| | 04:51 | the $t, right that appears in
different places, here it is again.
| | 04:56 | So I'm finding one of those from the ID
section, so back in here, I look for ID.
| | 05:02 | You can see that right underneath ID there is a
$t, and it's going to appear in several places.
| | 05:09 | So here's a normal entry.
| | 05:11 | In the ID, if I look at the $t variable,
it gives me a link to the YouTube video.
| | 05:17 | I don't need this entire YouTube link, I
only need these last few letters right here, so
| | 05:23 | I can get rid of all this other
stuff and just grab that last part.
| | 05:26 | And that's what I'm doing in this section.
| | 05:28 | I am taking the substring of the last few
letters and putting them into the entries
| | 05:34 | ID, which I can use to get a
number of different things.
| | 05:37 | So, next I do the same thing and just find
the title of the entry, the description of
| | 05:43 | each entry, and the thumbnails for each entry.
| | 05:47 | So you could see where all
those are in this JSLint structure.
| | 05:51 | And then I just output or at least, I feed
the output variable a list item for the entry
| | 05:58 | title here, and then I use that number that
I got from doing a substring, feeding it into
| | 06:06 | this entriesID variable, and I put that entriesID
into a link that I'm sending to YouTube, specifying
| | 06:14 | that the video that I want has that entriesID.
| | 06:16 | Now let me scroll over to the right, and then
I just create an image and the image is going
| | 06:22 | to have the Thumbnail name here, and as the
Alt section is going to use the entriesTitle.
| | 06:28 | So this is going to get the videogroup
and place the output inside that tag.
| | 06:33 | So we need to put this into the JavaScript
section, so we are going to have to open Transmit
| | 06:39 | and open up our script file and go back into
codesnippets, grab the populateVideos function here.
| | 06:48 | And I do need to save this one, then go back
into myscript.js and just place this anywhere.
| | 06:54 | It doesn't really need to be part of the
initialization, because as soon as YouTube finishes loading
| | 07:01 | the data, it's going to feed, or it's going
to transfer to this function which is going
| | 07:07 | to populate our videogroup area.
| | 07:09 | So I am going to save that, and I want to go
into our application and do a refresh here.
| | 07:17 | And, as you can see, we're already
getting a list of the latest videos.
| | 07:22 | This is cool because I don't have to worry
about updating this page, it'll automatically
| | 07:26 | be updated as I load, or as new
videos are loaded into that section.
| | 07:31 | So this is kind of a cool piece of script.
| | 07:35 | If you want to, you can
modify this to be your own videos.
| | 07:38 | Notice that when I'm asking for that feed,
I'm specifying that I want to use the channel
| | 07:43 | called lynda, and that's what
I put right here, users/lynda.
| | 07:47 | You could use your own if
you want to right there.
| | 07:49 | Just put your own username.
| | 07:51 | And I want to make sure that I only
grab items with a category of my last name.
| | 07:56 | Now this category can also be keywords or
tags, so it doesn't have to be a category,
| | 08:02 | it can be actually a tag in the video.
| | 08:05 | So you could request a feed of not just the
channel, but a set of videos from your channel.
| | 08:11 | Let me show you the
videos that I am talking about.
| | 08:14 | So if you go over here, we have all the
videos that belong to me from lynda.com.
| | 08:20 | I did a search on YouTube
just for my name and lynda.com.
| | 08:25 | If I just clicked on lyndapodcast, you'd be
able to see every single video that lynda.com
| | 08:31 | publishes for free on
YouTube, which is really cool.
| | 08:34 | But it's kind of hard to get to my videos
since there are so many videos that we publish.
| | 08:39 | In that section, mine are
just a simple subset of that.
| | 08:43 | So by going to YouTube with those specifics
I can get only the videos that belong to me.
| | 08:50 | Let's go back to BBEdit,
take a look at our codesnippets.
| | 08:55 | And that's really cool but I really
would like to have a playable video.
| | 08:59 | One more thing let me show you, I am going
to go back into Safari and go back into the
| | 09:03 | app and show you that
these are actually just images.
| | 09:06 | And if we click on these, right here, it's going
to launch and let you play that video on YouTube.
| | 09:13 | So I want to have a version of the video that
sits at the very top that's a playable version
| | 09:18 | of the latest video in that channel.
| | 09:21 | So I have a slightly different version of
the populateVideos function, I am going to
| | 09:26 | grab that, and I'll paste it into
myscript.js just replace the entire function.
| | 09:34 | And the difference here is that I am asking
this function, if it's the first time that
| | 09:41 | we run this function, then I want you
output something slightly different right here.
| | 09:46 | If it's not the first time then go ahead and
output the small thumbnails with the descriptions.
| | 09:53 | So this is slightly different version, I'll
save that and switch back to my app and refresh.
| | 09:59 | And now at the very top, we have a
playable version of one of the videos.
| | 10:04 | So that's pretty cool, it doesn't look particularly
great, so we need to style this a little bit better.
| | 10:09 | I am going to go back into BBEdit, and I am going
to open up my css folder on my server, open that up.
| | 10:18 | I need to add some styles into this section.
| | 10:20 | So back into codesnippets, we created a
label that goes at the top of our video feed, so
| | 10:24 | I am going to style that first.
| | 10:26 | I'll grab that and switch
back to mystyle, at that label.
| | 10:32 | We're going to end up using that label a lot.
| | 10:34 | Let's see how it looks, back into my app,
and I'll refresh, and the label looks like
| | 10:41 | this, looks really nice.
It's 50% of the size of the container.
| | 10:44 | As a blue background, I tried to match the
bar right here, and it uses one of the custom
| | 10:49 | fonts that we loaded from Google.
| | 10:51 | So let's go back, so let's take a look 55%,
Normal font, here's the custom font that we
| | 10:56 | used from Google, color background like
Facebook, etcetera, etcetera, pretty simple CSS.
| | 11:03 | So let's go back into codesnippets and
grab the stuff for our normal video feed here.
| | 11:09 | This is the style for the
first element of our video feed.
| | 11:13 | Go back into mystyle.css, paste that, and
for each one of the first elements I want
| | 11:18 | to give the headline a slightly different look.
| | 11:21 | And then go ahead and control the font size
of the paragraph here and also control the
| | 11:27 | size of the frame that plays our movies.
| | 11:30 | So I'll save that, and I'll go back into
our app and refresh, and you can see there's a
| | 11:36 | slightly different look
for our styles right here.
| | 11:40 | That's not bad, back in here, and we need to
obviously style the rest of the list, which
| | 11:45 | is our video feed, which
is this code right here.
| | 11:49 | Pretty simple just controlling the
headlines and the paragraph within the videogroups,
| | 11:55 | and also creating styles for the list item,
clearing out the margins, getting rid of the bullets.
| | 12:02 | Then I size each one of those list
items to be 50% of the width of the column.
| | 12:09 | Let me go ahead actually and copy this, and
it will actually make more sense when you're
| | 12:13 | seeing it, rather than me talking
about what I am doing here first.
| | 12:17 | So down here, I am going to paste this,
save it, go back to Safari and refresh.
| | 12:26 | And there's my sidebar, and you could see
that my videos are now here at the bottom,
| | 12:31 | and I have a pop-up version of the content,
the description or the title for these videos
| | 12:38 | that appears when I roll
over these little thumbnails.
| | 12:41 | So that's pretty cool, the way they I did
that, now hopefully it will make more sense
| | 12:46 | when I show you the CSS.
| | 12:48 | So the way that I did that is I created some
styles for the video, headline and paragraph
| | 12:54 | right here, some basic styles for the
unordered list, hiding the margins, hiding the bullets,
| | 13:01 | and then made each one of the list
items half as wide as the column.
| | 13:06 | Floated each item to the left, so they
appear side by side, and took out any border and
| | 13:13 | positioned them relatively, so that when I
hover over an item, that hovered item is going
| | 13:21 | to be positioned absolute, so that it appears right
next to the position of each one of these list items.
| | 13:29 | The iframes, the width right here's a 100%,
but because each list item is 50% it's going
| | 13:36 | to be 100% of 50%, which is 50% as well.
| | 13:40 | And I need to specify a height, otherwise the
default height for the iframes is a little bit too small.
| | 13:45 | You can play around just take that
out, and you'll see what happens.
| | 13:48 | And then, I need to create a style for my
entriesTitle, so that the title that now
| | 13:54 | appears when I roll over
is in the right position.
| | 13:58 | So I move it to the left a 110%, so
they appear left of the thumbnail.
| | 14:04 | And I originally have them hidden, that's
what this means right here, display: none,
| | 14:08 | top: 0, it's just the position is
right at the top of the thumbnail.
| | 14:13 | And next to that when I hover over each one of
these list items, I display them, or I show them.
| | 14:20 | The width is still the same.
| | 14:21 | Change the color or actually color the font
white and add a little bit of padding so it
| | 14:27 | has a little bit of an area around, you know
I have the opacity at 90% that's why you can
| | 14:31 | see a little bit of this black right here.
| | 14:33 | So it's a pretty good looking stuff for
our page for this section, which just shows a
| | 14:38 | few YouTube videos.
And it was really easy to do.
| | 14:41 | All we did is just go to YouTube's version
of their APIs and grabbed some of the code,
| | 14:48 | inserted it into our JavaScript
file, and it's working pretty well.
| | 14:53 | And don't forget that you can create your
own version of your data that you want to
| | 14:56 | put on your web sites.
| | 14:58 | You could do it by using some sort of JSON
variable or some service JSON feeds that allows
| | 15:03 | you to pull from an existing web site.
| | Collapse this transcript |
| Debugging cross-browser security issues| 00:00 | So I wanted to show you an issue that happens when we
start calling in feeds and other data from external sites.
| | 00:06 | It's something that you have to
watch out for and program around.
| | 00:08 | So let's take a look.
| | 00:10 | Our video feed from YouTube is doing really
well, but if you go to the developer console--
| | 00:14 | I am going to go to
Develop and say Web Inspector.
| | 00:19 | Right now, we're already on
the developer console tab.
| | 00:22 | Sometimes this thing doesn't come up perfectly,
so I'm just going to click on this icon and
| | 00:26 | then click on it again, and there
the window shows up like it should.
| | 00:30 | So you could see that we're getting a lot
of warnings, and the warnings are all related
| | 00:35 | to insecure content
coming in from somewhere else.
| | 00:38 | Essentially from our Google Feed, the
problem is that Facebook requires you to use an SSL
| | 00:43 | certificate on your site.
| | 00:45 | And that allows the transfer of information
between your app and Facebook to be more secure.
| | 00:49 | But it means that we have to be careful when we
code the pages or when we import code from other places.
| | 00:55 | When working on a site with the SSL certificate
on, if we link the data with a regular http://
| | 01:00 | you will see this warning.
| | 01:03 | It's not got to be problem in a
lot of browsers, but we should fix it.
| | 01:07 | So to do that, I'm going to modify the
code from Google and use https links.
| | 01:11 | Now, it's going to be a little weird in
some places because some of this data is being
| | 01:15 | read directly from Google's Feed.
So let's take a look.
| | 01:19 | I'm going to switchover to BBEdit--and
there's my codesnippets file--and open up transmit,
| | 01:24 | open up my facebook folder, and in here I
need to pull the JavaScript file as well as
| | 01:31 | the index.php file.
So we need to fix a couple of problem lines.
| | 01:35 | Essentially, these two lines that right now in
the code will say http need to be changed to https.
| | 01:41 | Let me go ahead and open these files.
| | 01:45 | There's the myscript. Looks like I un-clicked
on the index file, so I'll open that as well.
| | 01:50 | So here's the call to the gdata from YouTube.
| | 01:52 | I'm going to go ahead and put an
S right here and save the file.
| | 01:57 | You can copy them from code snippets, but
it's really just easier to type the esses in here.
| | 02:02 | And somewhere in here is the call to our video,
and here's another one right here. Http needs
| | 02:08 | to be changed to https, and this one is well.
| | 02:12 | I'm going to save this, and what you could
do is you could do a find and replace in most
| | 02:15 | programs just do a search for http and
make sure there are none other ones there.
| | 02:21 | So, http:// right now. I don't
have any more, so that's perfect.
| | 02:26 | And once I save those, I'm going to
switch back into my app and refresh it.
| | 02:35 | And now you can see that there's a lot
less errors, but there's still this error right
| | 02:38 | here, which is because I'm using a
link that the Google Data Feed provides.
| | 02:46 | You can see these images down here
that are the thumbnails for the videos.
| | 02:50 | Those are being read from the Google Feed.
| | 02:52 | So we're going to need to fix
those in a slightly different way.
| | 02:55 | Let me go ahead and see if I can make this a
little bigger. No, that's about as far as it'll go.
| | 03:00 | So let me go back, and I'll go into my
codesnippets, and I will grab this piece of code because
| | 03:05 | it's a little bit gnarly.
| | 03:06 | So I'll grab this last piece right here and look
for the same piece of code on the populateVideos.
| | 03:14 | Here's where I'm reading the
thumbnail for the files from the Google Feed.
| | 03:19 | Now I'm going to paste this and show
you what I am going to do differently.
| | 03:23 | If I read this URL, it's just going to get me a URL that looks
like this: http://i. something ytimg, et cetera, et cetera.
| | 03:32 | So if you look at this link, it's pretty
much a link where this middle piece right here
| | 03:38 | is the ID of the video that we want to see.
| | 03:41 | So we could grab this entry right here and
remove the ID and insert an https instead of an http.
| | 03:49 | But it's really just simpler to type the link
in and just use the slash and entrance ID variable
| | 03:55 | that we've already created up here when we
took part of the string that we get from Google
| | 04:01 | and took a little piece of it
so that we have the ID by itself.
| | 04:06 | So this is just going to take the proper
name of the image with the https at the end, and
| | 04:11 | I want to make sure that I save this.
| | 04:13 | Go back here, refresh, and now
our app should look perfectly clean.
| | 04:20 | We were outputting the object
here, so that's still there.
| | 04:22 | And you can see that all the errors are fixed.
| | 04:25 | So as you work on your site, you'll
occasionally want to perform this type of change.
| | 04:29 | Go into the developer tools and take a look
at the Errors and Warnings section, and see
| | 04:34 | there's anything that you have to fix.
| | 04:36 | It's best not to have any warnings, even
though on some browsers it is not going to be a
| | 04:39 | problem just because you want to make
sure things are as clean as possible.
| | Collapse this transcript |
| Installing the WordPress JSON plug-in| 00:00 | It would be nice to have a feed of stories
from the web site associated with this app.
| | 00:04 | That happens to be a web site called iviewsource.com.
This is a companion site to my weekly series
| | 00:10 | on lynda.com called iviewsource.
| | 00:12 | So I write bunch of stories and blog posts
right here, and I want to have that feed of
| | 00:16 | content on my web site.
| | 00:18 | It's WordPress site, and you might be tempted
to just query the SQL database but in keeping
| | 00:23 | with the JavaScript theme
we need a JSON solution.
| | 00:26 | Thankfully, there's a great plug-in you can
install on a WordPress site that will generate
| | 00:30 | a JSON feed of your data.
| | 00:32 | The plug-in is called JSON API,
and this is the URL for it.
| | 00:36 | You just download from right here.
| | 00:38 | But it's easier to just log into your
admin center, so I am going to type in wp-admin
| | 00:44 | and get into my admin screen and
just install it directly from here.
| | 00:48 | So I'm going to click on plug-ins. To find
the JSON API plug-in, all we need to do is
| | 00:52 | hit this Add New button and then type in
json api on the search, click on Search Plugins,
| | 01:02 | and it should find the plug-in right there.
| | 01:04 | So we could just hit this Install Now button
Are you sure you want to install this plug-in?
| | 01:11 | Yes, it will take a second.
It's successfully installed.
| | 01:14 | I am going to go ahead and click on the Activate
Plugin button, and now that plug-in has been activated.
| | 01:20 | So let's just check it out. There it is. It's been
successfully activated, and it can be that easy.
| | 01:26 | If interested in learning more about
WordPress and Plug-ins, make sure you checkout WordPress
| | 01:30 | Essential Training on the lynda.com
online training library.
| | 01:34 | So let's take a look at what you can do with
the plug-in. The documentation for the plug-in
| | 01:38 | is right here at this URL, and you could see that
it has a lot of descriptions about what you can do.
| | 01:45 | And the basic example of how to call the plug-in
is right here, the Implicit mode example.
| | 01:49 | Really, all you have to do it is find a page
for a location on your web site that you want
| | 01:55 | to get a JSON feed of, and
then add the ?json=1 at the end.
| | 02:01 | So let me go back to my site, and
I'll just click on this link up here.
| | 02:05 | Go back to View Source and all we have to do
is just add ?json=1 that is going to generate
| | 02:12 | a feed of our site.
| | 02:14 | This is a little hard to read, and this is
where JSON kind of becomes a little troublesome
| | 02:18 | to actually parse visually.
| | 02:20 | So what I want to do is copy this URL, so I
want to go to jsonlint.com and put the URL
| | 02:26 | right here. You can also paste
to JSON directly into this window.
| | 02:29 | I'm going to click on Validate, and it's going
to show me the JSON feed in a more human readable
| | 02:37 | form, so you could see that here we have posts, and
every post is going to have a different object entry here.
| | 02:45 | So here's another post, there's a comma
separated part, and we can get into any of the data
| | 02:49 | from the post by digging into this stuff.
| | 02:52 | So you could also just go to any page on
the web site, so let me back up, and I'll just
| | 02:57 | go to this first article on using JSON, and I'm going to
take that link right there, and I'll just add a question mark
| | 03:08 | and do json=1, and now we get
a feed of only this article.
| | 03:13 | So if we want to get all text
of the article, you could that.
| | 03:15 | You can also get the most recent posts,
just like this: json=get_recent_posts.
| | 03:26 | There's the latest posts, and if you want
a specific amount of posts, all you have to
| | 03:31 | do is add count= whatever number you want
here, so I'll say 2, and this way, you will
| | 03:38 | only get the most recent two posts, and then
hit Validate. And now we can see here is the
| | 03:45 | posts variable here with the array, and the array
will have two posts because that's what we specified.
| | 03:52 | So if you're not using WordPress, you will
need to create your own feeds. The JSON format
| | 03:56 | is not particularly tough to create and understand,
but having a plug-in like this sure makes your life easier.
| | Collapse this transcript |
| Adding a JSON post feed onto a page| 00:00 | Since we've installed the JSON plug-in into
our WordPress site, we have access to a feed
| | 00:04 | of information, and we can pull that
data into our Facebook application.
| | 00:08 | We've already done something similar
when we pulled in our YouTube feed.
| | 00:12 | So let's take a look.
| | 00:13 | So I am going to go into BBEdit and make
sure my codesnippets file is already open.
| | 00:17 | And I am also going to go into
Transmit and open up our Facebook folder.
| | 00:22 | I need to open the JavaScript file, so I will
open up this _ folder, the js folder, and click
| | 00:28 | on the myscript.js, and I will
also need to open the index.php file.
| | 00:32 | I will select both of those and open them.
| | 00:36 | The first thing I need to do is add a div
to hold my content. It needs to go after this
| | 00:40 | welcome div, so I am just
going to open this up right here.
| | 00:43 | And I am going to go into codesnippets and
grab this placeholder for our blog content.
| | 00:49 | So all the blog content is going to be
inserted into this div, back into index.php and just
| | 00:54 | paste it right there, and we will
just indent it with everything else.
| | 00:58 | Now that the JSON is there, we need to
pull our JSON feed from the WordPress site.
| | 01:03 | So I will render a little bit of
JavaScript code to handle that.
| | 01:05 | Let's take a look, go back into codesnippets,
and here is the code that we need to insert
| | 01:11 | into our JavaScript file. It's very similar
to the script that retrieves the YouTube feed,
| | 01:16 | and we worked on that on the movie on
adding a JSON video feed with YouTube the APIs.
| | 01:21 | So if we take a look at this, it's doing
pretty much the same thing, setting up a couple of
| | 01:24 | variables, and then setting up an
output that starts with a heading.
| | 01:28 | Then it's going to go through each of the
posts that the JSON feed returns, and it's
| | 01:33 | going to store that information into the
output variables, such as reading the data from the
| | 01:38 | JSON plug-in that we installed in WordPress,
and then it's outputting in a variable that
| | 01:43 | we can then insert by calling this getElementById and
looking for the blog div that we placed into our HTML.
| | 01:51 | And then setting .html to the output variable that we
are going through and setting to the posts each time.
| | 01:56 | So I am going to copy this.
I am going to go into myscript.js.
| | 02:02 | And that needs to be at the same level as our
populateVideos function, which is right here.
| | 02:07 | So I am going to place that right on top
of that, so I will paste that right there.
| | 02:11 | So now that we've created this
function, we also need to call the function.
| | 02:15 | So this code is not going to execute
unless it gets called from somewhere, we want it
| | 02:19 | to be called after the initialization for the
Facebook API is complete, so that would go right here.
| | 02:25 | So let's go back in the codesnippets, and
just grab this code, we are going to put that
| | 02:29 | into this line right here, and
that's going to call our function.
| | 02:35 | Indent it out a little bit, and I need to
make sure that I save both of these files.
| | 02:38 | By placing it here, we assure that after
the Facebook API has been loaded it's going to
| | 02:44 | execute that function.
| | 02:45 | We then need to do that with the populatedVideos
because that was automatically called by YouTube's
| | 02:51 | API, and that was done, so if we go back into
our index page, you could see that this code
| | 02:57 | that we inserted from YouTube has a callback
right here that targets our function called
| | 03:04 | populateVideos as soon as the
information has been loaded from the YouTube API.
| | 03:10 | So we then need to put this function into
our JavaScript file, because it's already
| | 03:16 | been called by that YouTube API.
| | 03:18 | So we will insert that there, and now we
are ready for this information to come in.
| | 03:23 | So let's go ahead and
make sure that they're saved.
| | 03:25 | And I want to switch back in to
Facebook, I want to refresh this page.
| | 03:31 | So now our feed of information is coming in,
it doesn't look very good, but we will fix
| | 03:34 | that with some CSS later on.
| | 03:36 | I do want to show you one
thing that is not working here.
| | 03:38 | If we click on this link right here, its
going to open up a new window and take you to that
| | 03:42 | article on view source.
| | 03:45 | Now if we click on this link right here,
it's going to actually open that link up in the
| | 03:50 | Facebook iFrame, and that's not good.
| | 03:53 | So I am going to click on this Back button.
| | 03:55 | If it asks you, if you want to send the form again,
just hit Send. It's not going to really make a difference.
| | 04:00 | So the problem is happening if we click on
these links. These links are coming directly
| | 04:06 | from the feed that comes
from our WordPress site.
| | 04:09 | So they're already in there. We can't
modify those links. We have already got a link to
| | 04:13 | the content up here, so I could just get
rid of these continue reading links, and then
| | 04:18 | our feed will look just fine.
| | 04:19 | So I am going to do that. I am going to back
into codesnippets with a little bit of jQuery.
| | 04:25 | So back into codesnippets, and I am going
to grab the next piece of code, this piece
| | 04:29 | of code is going to remove the links from the
feed that comes in from our WordPress plug-in.
| | 04:34 | So I am going to copy this and go back
into myscript.js. You need to scroll down while
| | 04:40 | it's going through each of these articles.
| | 04:42 | I want to make sure that I
insert that function right there.
| | 04:47 | So as that information is being read from
the WordPress plug-in, we are going to create
| | 04:52 | a temporary variable and feed the excerpt
into that temporary variable and then use
| | 04:58 | this little bit of jQuery to remove all
the anchor tags from that temporary variable.
| | 05:04 | Then we'll feed that back
into a variable called excerpt.
| | 05:07 | So that excerpt variable will have the
data from the YouTube feed that is the excerpt
| | 05:12 | without any of the anchor tags.
| | 05:14 | So we will need to modify
our code a little bit more.
| | 05:17 | Change this right here so that it doesn't
output the excerpt but it outputs this new
| | 05:21 | version of the excerpt which
gets rid of the anchor tags.
| | 05:25 | Back into codesnippets really quick.
We will grab this next line of code.
| | 05:28 | This just makes sure that we have the new
version of the excerpt, so we will replace
| | 05:33 | this right here and save that.
| | 05:37 | And now we'll go back into our
Facebook application, hit Refresh.
| | 05:43 | These links the anchor tags that use
to be there are now gone, which is great.
| | 05:47 | So all we have to do now is make this look
great, go back into codesnippets, and I have
| | 05:52 | prepared some CSS that's
going to style the blog posts.
| | 05:55 | So let me grab this code right here,
and I'll paste it into our CSS file.
| | 05:59 | Looks like we didn't open that, so I am going to go
back into Transmit, look for the CSS, open this up.
| | 06:08 | So I will put this at the very end of the
file, I'll save it, and then I'll go back
| | 06:12 | into Facebook and Refresh.
| | 06:15 | And let's take a look at--it looks a lot nicer.
| | 06:18 | Let's go ahead and pull this over to the side so I
can go over the CSS and show you what I've done here.
| | 06:23 | It's really simple CSS--let me make this one a little
bit smaller so you could see them both side by side.
| | 06:28 | So, see just setting up a little bit of a
margin, changing the font to this XO font that
| | 06:32 | we've imported from Google fonts.
| | 06:35 | And then just making because some basic changes to
the way that everything looks on our Facebook page.
| | 06:41 | There's nothing too complicated on this page.
The only thing that you may see that's a little
| | 06:46 | bit different is we are changing the cursor
here so that when you go over these links
| | 06:51 | it gives you that little
pointer cursor that's a hand.
| | 06:54 | So our feed is looking great. Content on
your app can be data you get from other sources
| | 06:59 | like web sites, YouTube
feeds, or any other kind of feed.
| | 07:03 | JSON with a little bit of jQuery gives you the ability
to easily parse and feed data into our application.
| | Collapse this transcript |
|
|
5. Adding Social Plug-Ins to Your ApplicationIntroducing social plug-ins in your app| 00:00 | Social plug-ins are way to add
features from Facebook into your content.
| | 00:05 | Normally, these are features you can add to
web sites by copying and pasting some code from Facebook.
| | 00:10 | You're probably familiar with things like
Comments, the Send and the Like button, et cetera.
| | 00:14 | So let's take a look at how you
can integrate them into an app.
| | 00:17 | So, when you first log in to the developer
site, you see this sort of division between
| | 00:22 | building things for web sites and building
for mobile and building apps on Facebook.
| | 00:27 | We have been focusing on the building apps
on Facebook section, and if we click on Build
| | 00:32 | Apps on Facebook, and we go to the SDK Reference,
go to the javaScript SDK, you'll notice that
| | 00:38 | there's no mention of social plug-ins.
That's really because social plug-ins are part of
| | 00:44 | the building for web sites.
| | 00:45 | And we can find them here by going to Core
Concepts and then hitting Social Plugins.
| | 00:51 | So here's all the plug-ins that Facebook
provides. There's are quite a few of them, the Like
| | 00:54 | button, the Send button, Subscribe,
Comments, Activity Feed, and other things.
| | 00:59 | If you click on the Like button, you'll see
that when it talks about adding this to your
| | 01:05 | sites, it assumes that you're
going add it to a web site, not an app.
| | 01:09 | So we'll have to watch out because
the code is a little bit different.
| | 01:12 | So if we scroll down, we'll notice that there
is a code generator right here. It's pretty cool.
| | 01:16 | You can put in a URL that you want to like.
| | 01:18 | We can type in, for example, our app URL, and
then we can customize the button by clicking
| | 01:27 | on different things, changing the width, showing
faces if there's anybody that's already liking
| | 01:34 | this app, Color Scheme, et cetera, et cetera.
| | 01:37 | And when you hit Get Code, it's going to give you
three options here to use the code that's HTML5.
| | 01:44 | This is really what we want.
| | 01:45 | XFBML is something that you don't want
to use or IFRAMES in this particular case.
| | 01:50 | So if you look at the code that it gives you,
the first thing is it wants you to use the
| | 01:55 | fb-root div, and we've
already added that to our site.
| | 01:58 | So we definitely don't to copy that.
| | 02:00 | Next you see a script, and that script is
essentially the JavaScript SDK being loaded.
| | 02:05 | There's little bit of a pop-up here, so it can
populate some of these fields for your particular app.
| | 02:11 | If you have more than one app then
you would see more than one right here.
| | 02:14 | And this piece of script right here is
obviously loading the JavaScript SDK.
| | 02:19 | We already have that code on
our site, so we don't need that.
| | 02:21 | The only thing that we need is this right here.
| | 02:24 | So when you're reading these social plug-ins,
it's kind of important to understand which
| | 02:29 | parts of the code that it's telling you,
you need and which parts you don't.
| | 02:31 | So I'm going to copy that and click OK.
| | 02:34 | And if you scroll down, you'll see the
different attributes that you can add, so you can do
| | 02:40 | these manually, because we just copy the code. You
can see a section here about getting Open Graph Tags.
| | 02:45 | We don't need to do that, the app is already
connected to Facebook, and through the JavaScript
| | 02:51 | SDK, the web site already
has all this information.
| | 02:54 | So on a normal web site, you would need to
grab all this code. In working with apps,
| | 02:59 | you don't need any of that at all.
| | 03:01 | And let's see what else.
| | 03:02 | There are few other options here, but
all we need is to go back into BBEdit.
| | 03:08 | And here is my codesnippets, I'm going to open up
also Transmit, and I'll need to open up the Index file.
| | 03:18 | So I'm going to go to codesnippets. I
already have a version of what we need here.
| | 03:22 | I'll first grab just this headline
and div for all our social plug-ins.
| | 03:27 | So it is just a normal div with a h2 for the
label that goes at the top, and it has something
| | 03:33 | that says Help us share
View Source by liking this app.
| | 03:36 | So I'm going to copy this, go back into our
index page, and I want this on the sidebar
| | 03:41 | on the top of the video group.
| | 03:43 | So I'll put it right there,
indent it a little bit.
| | 03:47 | And when we go back to our app, it should
just at least have the headline and be ready
| | 03:52 | for the Like button. There it is.
| | 03:56 | So switch back over to BBEdit, next thing
is we are going to grab that code that we
| | 04:00 | got from the code generator and just copy that,
and we'll put it right underneath this right here.
| | 04:10 | And really a lot of the social plug-ins, all
you do is you grab a piece of code, you got
| | 04:14 | to know which part to grab.
| | 04:16 | And it'll display whatever you want on
the site, including stuff on this app.
| | 04:20 | So you could see there's the
Like button looks pretty simple.
| | 04:23 | Now one problem is that it's way too wide.
So, we really want to fix that.
| | 04:27 | I'm going to go back into BBEdit and back
into my codesnippets and grab a much simpler
| | 04:32 | version of this Like button.
| | 04:35 | So I don't really need the data-href again.
The JavaScript SDK already knows what page
| | 04:40 | we are on, so you don't really need that.
| | 04:42 | Also, we don't really need any of this
other stuff, and the data width is too wide.
| | 04:46 | So I'm setting it here to 200, and I don't
need to show the faces of the people when
| | 04:51 | they log in, so this is a
much simpler version of the code.
| | 04:54 | Back into my Index file, paste that
piece of code right there, save it.
| | 05:00 | And we have just the Like button, fits a
little bit better, and we can click on it.
| | 05:06 | We can type in a little message.
This is going to go on our timeline.
| | 05:14 | So, and I'll post it to Facebook, and that's it.
| | 05:18 | I'm going to Command-click on this Facebook
link right here to open up Facebook on a new
| | 05:24 | tab, and there it is.
| | 05:25 | There is Like that we did,
and that's pretty cool.
| | 05:29 | It's easy to add some of the social plug-ins
to your apps, but one of the things that you
| | 05:33 | really have to watch out for is for making
sure you understand which parts of the code
| | 05:37 | on that page, because those particular
social plug-ins are designed to normally just be
| | 05:43 | things that you put on web sites, not on apps.
| | Collapse this transcript |
| Adding the Facepile and Comments social plug-ins| 00:00 | In the previous movie we learned
how to add the Like button our app.
| | 00:04 | So let's go and explore some of the other
options that we have in social plug-ins, and
| | 00:08 | I'm going to add a couple of them.
| | 00:09 | So I'm going to click over here to go the
social plug-ins, and you can see that there
| | 00:14 | are a number of plug-ins available to you,
including Comments--which is what I want to
| | 00:18 | add right now--and also something called Facepile.
| | 00:21 | Facepile is a picture of other
friends who are users of this app.
| | 00:26 | So I am going to go to the Comments
section first and look at the code for that.
| | 00:31 | So you could see that there's another code
generator here, and if we get the code, it's
| | 00:35 | going to pretty much tell us what we saw on
the Like button--a bunch of code that we don't
| | 00:40 | need, which is this div that's fb-root.
| | 00:43 | We don't really need that, we
already have that in our app.
| | 00:46 | The other thing here is loading of the
JavaScript SDK, again that's something that we already
| | 00:51 | do in our apps, so we don't need that.
| | 00:53 | Really the only thing you need is this
piece of code right here, but I've got that in my
| | 00:58 | snippets file, so I'm going to switch over
to BBEdit and switch over to Transmit and
| | 01:02 | open up my index page from the site and copy
this fb-comments div, and I want that to happen
| | 01:13 | right underneath the blog section.
| | 01:15 | So what is it doing?
| | 01:17 | I need to make sure I set the data width right
here, because the default width is a little bit short.
| | 01:23 | We also want to make sure we add a data-href.
| | 01:26 | Unlike our previous button, we need to make
sure we tell Facebook that these comments
| | 01:31 | are all going to be from this URL.
| | 01:33 | When Facebook receives comments from
different web sites, this is how it identifies all the
| | 01:38 | comments as belonging to this particular
application, and then we can put the number of posts, if
| | 01:44 | you want to right there. So I'll save that.
| | 01:47 | I'll switch over to my app, refresh, scroll
down to the bottom, and I should see the Comments
| | 01:55 | section right here.
| | 01:57 | So if I want to, I can add a comment.
| | 01:58 | I'm also a moderator because I'm the creator of
this app or this user is a creator of the app.
| | 02:03 | So I can go in to Moderator View, something I wouldn't
see normally, and I'll hit Comment, and there you go.
| | 02:10 | Showing you how to put a
comment there, pretty cool.
| | 02:13 | You can do things that you normally
do with comments like Like or Reply.
| | 02:18 | Let me go ahead and go back to Facebook Developers, and
back to Social Plugins and scroll down to the Facepile.
| | 02:30 | Another really easy to do Social Plugins, you
can also get the code from here and customize it.
| | 02:36 | Remember, you don't need any of this just get
this part right there and paste it onto your app.
| | 02:41 | So, I already have that and the code
snippets with a little headline that says who loves
| | 02:47 | us, here's a punch of your
friends will also like this app.
| | 02:49 | So I'm going to paste that into the social
plug-ins section right underneath our Like button.
| | 02:55 | Let's put that over, save it,
and go back to our app and refresh.
| | 03:08 | So now we can see a few or our
friends who've already added this app.
| | 03:12 | So it is just that simple. You can add a
number of social plug-ins into your app.
| | 03:17 | It's a pretty similar process to how
you add things to regular web sites.
| | 03:20 | Just keep in mind that you don't need to
initialize the SDK or insert the Facebook div, and there
| | 03:26 | might be some slight difference in the
code between the different items that we add.
| | Collapse this transcript |
| Creating a live event chat| 00:00 | So there is one more social plug-in, I want
to show you, not because it's any different
| | 00:04 | than the other ones, but just because it's
pretty awesome, it's the Live Stream social
| | 00:08 | plug-in that lets users chat in real
time on your app. It's just about as easy to
| | 00:13 | use as the rest of the plug-ins,
so let's check it out.
| | 00:15 | I am going to go to the social plug-in
section of the Facebook developers area and scroll
| | 00:20 | down until I see the Live Stream right here,
so I'll click on that and the Live Stream
| | 00:28 | lets your users share activity, this is really cool when
you have stuff like concerts, speeches, webcasts, and stuff.
| | 00:35 | Everything is pretty similar except it is
going to want an app ID, and if you have multiple
| | 00:42 | chats going on, you want to make sure that
you specify a number or some sort of unique
| | 00:45 | ID right here to differentiate them.
| | 00:48 | So, I don't need to get the code. I already
have it in my snippets file, so I will switch
| | 00:52 | to BBEdit as well as Transmit.
| | 00:55 | Here's our code, see it's just as simple as the
other one, and I'm going to open up the index.php file.
| | 01:01 | This plug-in also has a minimum width, so
is that going to fit on the sidebar where
| | 01:06 | the rest of my social plug-ins are, so I need
to put it in my main area, I'll grab it, and
| | 01:11 | I'll put it on top of the blog stuff right now.
| | 01:14 | So, here is my blog, and I'll paste that
right there, Save it, and I'm going to go back to
| | 01:19 | Safari and go back to my app, Reload. And
there I have an actual chat, and I can discuss
| | 01:30 | things with users, so let's go ahead and put
something in here, so we're going to hit Share.
| | 01:36 | Notice that it goes into the event in real-time.
| | 01:38 | Now this is kind of boring, because I don't
have another user using this app right now,
| | 01:42 | but I'm going to switch over to Google Chrome,
and I am going to refresh my app here as well,
| | 01:47 | because I'm logged in as
another user. Let's scroll to the top.
| | 01:50 | There I can see my other user and just type
in a comment and hit Share and the two users
| | 01:57 | can kind of communicate with each other in
real time, so I'm going to switch back to Safari.
| | 02:02 | Now eventually this should be updating on the
fly, so let's just go ahead and type something
| | 02:06 | in, and this is also going to post to my
Timeline if I just leave it like this, so if I click
| | 02:11 | that off then it won't post, so I think
there is a little bit of a lag, because I'm using
| | 02:16 | two browsers, and it's not showing me the
result of the other person here, but let me
| | 02:21 | refresh--maybe I can see the
whole stream of conversations.
| | 02:25 | And once again because I am the administrator
of this app, I can ban this user if they're
| | 02:29 | doing something crazy.
| | 02:31 | So this is a really sweet plug-in. I'd love
to maybe add it to a web site, and let's go
| | 02:35 | ahead and add a little bit more description
to our site here, so we'll just had a little
| | 02:44 | label and a description of what this is.
| | 02:48 | Then I'll go back into one of my browsers
just refresh just to get a nice little headline
| | 02:56 | at the very top that identifies this, so like
I said this is one of the really cool plug-ins
| | 03:02 | I can imagine that Facebook will be
improving them as they go along and maybe adding some
| | 03:07 | new ones, so this is a great way of adding a lot of
functionality to your app without a lot of code.
| | Collapse this transcript |
|
|
6. Creating Feedback with DialogsPosting to a user's timeline with the Feed dialog| 00:00 | One way an app can communicate with the user
and their friends is by posting on their timelines.
| | 00:05 | You can do this through the FB.ui
method of the JavaScript SDK.
| | 00:09 | So let's take a look.
| | 00:11 | So the FB.ui method--which is
right here--is one of the core methods.
| | 00:14 | Let me click on that, allows you to trigger
Facebook dialogs that can do things like
| | 00:19 | publish stories, prompt user to add friends, et cetera.
| | 00:23 | It's really easy to use.
| | 00:24 | You simply issue a call with certain
parameters and the method pops up a dialog.
| | 00:28 | So I am going to use it to add a post to our
feed option that lets our users share the
| | 00:33 | article posts from the blog.
| | 00:34 | So I'm going to switch over to
BBEdit and also pull up transmit.
| | 00:38 | I am only going to need the JavaScript files.
| | 00:41 | So let me open that up.
| | 00:48 | So here's JavaScript. What I want to do
is add a link when we populate the stories
| | 00:52 | to the end of our stories to allow people to post
something about that particular article to their feed.
| | 00:59 | So right here I want to go to my
codesnippets and just grab something that creates a link.
| | 01:05 | So we just want to add a link, and that link
is pointing to a function, and that function
| | 01:10 | gets three parameters here, the title, the
link itself that we're clicking on, and also
| | 01:14 | little bit of the excerpt, because we can use that
in the dialog to display some feedback to the user.
| | 01:20 | So I'm copy this, go back into myscript.js, and
right here I'll just paste it--go ahead and indent it.
| | 01:29 | And I'll just hit Save.
| | 01:30 | So all this does is just create a link that
says post a feed at the end of each article.
| | 01:35 | Let me go back into
Safari and Refresh this page.
| | 01:43 | So here come our stories, and at the end
you'll see this little link right here.
| | 01:47 | So let me go back because now
we really have to make it work.
| | 01:50 | So back to be VB Edit, and now that we've got
that function call, we need to create the function.
| | 01:56 | So here's a function, it begins right there,
and it ends over here, and all this function
| | 02:01 | does is actually make a call to the FB.ui
method, and that method gets a JSON object.
| | 02:08 | Here's the JSON object that it gets, and
that JSON object essentially tells it what kind
| | 02:12 | of dialog this needs to be, and
this happens to be a feed dialog here.
| | 02:17 | Then it needs to get things like the link,
the picture if you want to--so here I'm sending
| | 02:22 | a picture of the monogram--the title of
the page, a caption, and a description.
| | 02:27 | Once you see the actual dialog come up,
you'll see all these elements appear.
| | 02:31 | Once the user interacts with the dialog
box, whether they choose to post to their feed
| | 02:35 | or not, they're going to either get a message
that says thank you this has been posted, or
| | 02:39 | the post is not published.
| | 02:41 | So let me copy this, and I'll go back to myscript.js,
and this can really go anywhere, so I'm going
| | 02:48 | to put it on top of
populateVideos and save this.
| | 02:52 | Come back to my app, refresh, and
scroll down to get to our story.
| | 03:01 | So here's a story about an
article on the JSON Tutorial.
| | 03:03 | I am going to click Post to Feed, and
so here's what the dialog looks like.
| | 03:10 | And I want to point out some of
the items from the JSON method here.
| | 03:13 | So the JSON object will have the type of
dialog that this is going to be, this is a feed,
| | 03:18 | then a link which we are feeding
from the anchor tag that we created.
| | 03:21 | And that happens to be
just a link to the article.
| | 03:24 | All right, which when you see the actual
post on the user's timeline, you'll see that you
| | 03:28 | can click to the article to read it.
| | 03:30 | Then the name is going to
be the title of the story.
| | 03:33 | Here's the title of the story.
| | 03:35 | The caption, it's going to say this is from
the view source blog, so that goes right there.
| | 03:39 | And the description is the
description from the article summary.
| | 03:42 | We got that by using that
JSON API plug-in from WordPress.
| | 03:47 | So if the user clicks on Share,
that gets shared onto the timeline.
| | 03:51 | You can see that this has been posted onto
your timeline, that's the message that we get.
| | 03:56 | So that's pretty cool.
| | 03:58 | And if we go to the user's timeline, I'm
going to Command-click on this Facebook link here
| | 04:03 | to open this up in a new tab.
| | 04:05 | We should see that added to our timeline.
| | 04:07 | So, it might be a little slow. Let's go ahead
and refresh this page. I'll click on his name,
| | 04:16 | see if it's being added somewhere else.
| | 04:17 | So there it is. It's actually on his page right
now, and maybe it's just taking a little while
| | 04:21 | to get to this actual main timeline.
| | 04:23 | So there it is. There's our post. You can
see that it got added via the app and it has
| | 04:26 | all that text and people
can click to our story now.
| | 04:29 | So this is an easy way of adding some
Facebook-like functionality to your apps.
| | 04:34 | In this case, we're using a dialog.
It's really easy to use.
| | 04:37 | All you need is just a JSON
object to push into the dialog box.
| | 04:42 | When the user clicks the post or not, they
are going to get an ID as a response or your
| | 04:46 | function will receive an ID as a response,
and you can use that response to either give
| | 04:52 | the user some feedback,
whether or not they click on a post.
| | Collapse this transcript |
| Sending a message to a friend| 00:00 | There's another dialog that you can use
where you can message a friend instead of posting
| | 00:04 | something to their timeline, and I wanted
to show it to you because it's a little bit
| | 00:07 | tough to get to, and it kind of illustrates
some of the issues with JavaScript SDK web site.
| | 00:12 | So from here I'm going to go to FB.ui,
because that is the method we're using, and if you
| | 00:19 | notice, there's nothing that says send a
message to a friend. There's nothing even down here
| | 00:24 | on the left-hand side navigation.
| | 00:25 | But if we click on prompting the user to
share link, you'll see that on the left-hand side
| | 00:32 | there's a bunch of dialogs that you can set.
| | 00:34 | So these are sample pages for
coding these different dialogs.
| | 00:38 | There it is at the bottom of the page, so
I'm going to click on that, and here is the
| | 00:42 | example for that one.
| | 00:44 | It's pretty much the same thing as what we
did before, it's just sort of in a weird place
| | 00:49 | and sometimes these things for whatever
reason aren't exactly where they should be.
| | 00:53 | So I already have this set up, and it's very
similar to posting to a timeline, so I want
| | 00:59 | to switch over to BBEdit and also open up
Transmit, and I should have the Facebook folder open.
| | 01:07 | And I need to open, of course, the JavaScript
file because it's what I'll be working with.
| | 01:12 | So I'll open that up and the codesnippets
are going to be super similar, we're just
| | 01:16 | going to add a link to message to a friend,
which is going to be a function we are going
| | 01:20 | to define in a minute. So I'll grab it.
| | 01:22 | It sends pretty much same info
as the posting to a timeline.
| | 01:26 | Let's go into our JavaScript function and
locate the populateStory section where we
| | 01:31 | put all the stories.
| | 01:32 | Here's where we add the postTofeed link, and
right underneath that I'll add the Message
| | 01:37 | a Friend, save that, and I'm going to go
over to my code snippets now and get the second
| | 01:43 | part, which is this
function for messaging to a friend.
| | 01:46 | And this is exactly the same as the other
function, but obviously I modified things,
| | 01:51 | like the message instead of the post.
Everything else is pretty much the same.
| | 01:56 | Obviously the method is different.
| | 01:58 | That's how it works with most of those
dialog boxes. You're just going to be changing the
| | 02:01 | method and everything
else is going to be the same.
| | 02:04 | So here is postTofeed. It really doesn't
matter where I put it, so I'll put it down here.
| | 02:08 | I'll save this and switch over to Safari,
refresh my page, and I'll scroll down here,
| | 02:16 | and there is the Message a Friend.
| | 02:17 | So I am going to click on this to send a
message to a friend. I am going to send it to Darren.
| | 02:22 | There's Darren. And so with this particular
type of dialog box, I can choose the friends
| | 02:27 | that I send this to. And this will pre-populate
this if you want to, with a specific user.
| | 02:32 | So I'll send Darren a message, and I'm going
to hit the Send button here, and you'll get
| | 02:39 | a little messages just like before. Notice
that it actually created a chat with him,
| | 02:45 | with this automatically placed in there, and
we'll switch to another browser, so Google Chrome.
| | 02:50 | We have Darren's account, and eventually we
should see that message--actually that's probably
| | 02:56 | what we were seeing before, so
there is the message that we're getting.
| | 03:00 | So there are a lot of different dialogs that
you can use, but the code is almost identical,
| | 03:05 | you're just changing the method.
| | 03:06 | Still, these things are something you
should take a look at, because a lot of them can
| | 03:10 | be useful ways of communicating
with people through your app.
| | Collapse this transcript |
| Sending invitations with the Request dialog| 00:00 | If you've been on Facebook for any length
of time, you've probably received requests
| | 00:04 | to join other users and apps.
| | 00:06 | Perhaps, you have received some
sort of animal request from FarmVille.
| | 00:09 | Now we can do the same thing in our app through
dialog boxes much like the ones we've already been doing.
| | 00:15 | So let's a look at the javaScript
SDK and how to do requests in apps.
| | 00:20 | So I'm going to click over here to the
javaScript SDK, and I'm going to go to the FB.ui.
| | 00:26 | And in there, I'm going to click on Prompting the
user to send an application request to a friend.
| | 00:30 | So here's what that looks like.
| | 00:32 | It's pretty simple, much like what we've done
before, but a little bit different. It's a little
| | 00:36 | bit simpler request function here.
| | 00:39 | We see that we have a message, we
don't need all that other stuff.
| | 00:42 | And we also have a to: attribute. This to:
attribute allows us to send a request to a
| | 00:47 | specific person as long as we
know the user ID of that person.
| | 00:51 | Now if I want to send a request to more
than one user, you can include them in the to:
| | 00:58 | attribute here by separating the
values of the user IDs with commas.
| | 01:02 | If you want the users to pick their own
friends from a list of friends, all you do is Remove
| | 01:06 | the to: attribute that we used to up here,
so you don't see it up here, and then they
| | 01:10 | can take any number friends that they want.
| | 01:14 | If you have Frictionless Requests turned on--
and that's one of the things that I added
| | 01:18 | to this application when we were setting up the
FBAsyncInit is to add this functionality to it.
| | 01:25 | What will happen is if they've approved some
friends to already be able to receive requests,
| | 01:30 | then they won't have to see a confirmation
dialog every time they send a new request.
| | 01:35 | That's kind of a nice feature, and it's
something you should definitely turn on.
| | 01:38 | There're a lot of other options in any of
this documentation with a lot of functions
| | 01:43 | or methods like the FB.ui method. You can
send some of the same requests through JavaScript
| | 01:50 | or through a URL, and this is what
this is telling you how to do here.
| | 01:54 | You can send a request dialog for your app
with a URL so that it becomes something that
| | 01:59 | perhaps you click on a link to get.
| | 02:02 | You do it pretty much the same way. You
set up the URL that you're going to send this
| | 02:07 | to, which is facebook.com/dialog/apprequests, and
you pass some variables like what you do in JavaScript.
| | 02:14 | You pass the app ID, which you can
get from this Apps link right here.
| | 02:19 | You can also send a message, and
you can also send a redirect_uri.
| | 02:23 | So here's the property so you can send to
that. You can send it to and any number of
| | 02:27 | filters and other things.
| | 02:29 | So it's always a good idea to
check out the documentation.
| | 02:32 | Let's go ahead and do one.
I'm going to hide this.
| | 02:35 | We're going to go over to our codesnippets.
| | 02:38 | So we are going to actually need to open up
the index file, the JavaScript and the CSS
| | 02:43 | file, because we're going
to make changes all those.
| | 02:45 | So I'll open those up.
| | 02:48 | We're going to add a picture
that's going to be on our side bar.
| | 02:52 | It's going to invite our friends to
come into our app and join us in the app.
| | 02:57 | So I'm going to hide this, and
I'm going to import the image.
| | 03:01 | There it is right there, it is just a little
box that tells people to come join me in the app.
| | 03:06 | So I'll drag that into the Images folder,
and then I'm going to switch back to BBEdit,
| | 03:11 | and I'm going to go to my
codesnippets and grab the HTML.
| | 03:15 | This is just a regular image link that is
going to click over to the JavaScript function
| | 03:21 | we're going to create.
| | 03:22 | So I'll copy this into my index.php.
It can go right after the social plug-ins.
| | 03:28 | So I'll paste it right there.
I'll save that, back into codesnippets.
| | 03:32 | Now I am going to grab a little bit of CSS
just to make sure. Let me show you what that
| | 03:36 | looks like right now.
| | 03:37 | My image is a little bit
too big, and that's okay.
| | 03:41 | Click over here, refresh.
| | 03:43 | But right now it's a
little too wide for our sidebar.
| | 03:45 | So you can only see part of the image.
| | 03:48 | So I'm going to go to my BBEdit and get
a little bit of a style to override that.
| | 03:54 | Let's put that at the very end, save that.
| | 03:58 | Let's take a look at it now.
| | 03:59 | So that looks a lot better, it even gives
us a little bit of a margin at the top, and
| | 04:05 | now we need to make it work.
| | 04:06 | So back in here, to our codesnippets,
and we're just going to wrap this script.
| | 04:11 | It's a lot shorter than before.
| | 04:13 | So just the method, title and the message,
copy that, go over to our script file, and
| | 04:19 | it can go pretty much anywhere.
| | 04:21 | So I'll put it right here before the
populateVideos, paste, save it, and I'll come back to my App,
| | 04:29 | reload, and now I'll
click on this dialog box here.
| | 04:34 | And it lets you send a request to whomever
you want, so you can choose multiple friends
| | 04:39 | to send a request to.
| | 04:41 | And if we go down here, you'll notice that
because we have that additional functionality,
| | 04:45 | we don't need to ask friends
before sending your requests.
| | 04:48 | So I'm going to hit Send Requests.
| | 04:50 | And I'm going to switch to another browser
to show you the request that comes up here,
| | 04:56 | we can see it Stuart has sent
you a requests and Source Foo.
| | 05:00 | So very cool! You can send all kinds of
things with the JavaScript API, including messages,
| | 05:06 | all kinds of dialog boxes, and requests.
| | 05:09 | That's really a good
functionality to add to any app.
| | Collapse this transcript |
|
|
7. Creating Achievements with the Gaming APICreating achievements| 00:00 | A great way to engage and keep users coming
back your application is by rewarding them
| | 00:04 | for performing certain tasks.
| | 00:07 | The SDKs provide a simple way
to do this through achievements.
| | 00:09 | In this video I'm going to show you how to
create and set up achievements for your app.
| | 00:14 | Achievements are tied to Facebook games.
| | 00:16 | So in order to do this, you must have specified that
your app is a game when you set up your application.
| | 00:21 | If you have any questions about how to
set up your application, make sure you watch the
| | 00:24 | movie on creating a
container for your application.
| | 00:26 | So I'm going to check to see
that this application is a game.
| | 00:29 | I'm going to switch over to the Facebook
Developer page, and this is my App page.
| | 00:34 | I'm going to go to Edit App, and I can see that my
Category is defined as Games, so this is perfect.
| | 00:39 | Now you also want to make sure that you've
asked for the publish actions permission.
| | 00:43 | And you do that in JavaScript. Let me
switch back to BBEdit, and I'll show you the line
| | 00:47 | that you have to look for.
| | 00:49 | So if you look at this line right here, this
is where I'm asking the scope of my application,
| | 00:53 | and I want to make sure that I include this
particular permission right here, the publish_actions
| | 00:57 | permission, whenever I'm working with games.
| | 00:59 | So I'm going to go ahead and close this,
and I'll go to the Facebook Developer site and
| | 01:03 | in here, I'm already in the JavaScript SDK,
and the Achievements and Scores and Game section
| | 01:09 | is a little bit hard to find from here.
| | 01:11 | It's not down here anywhere, so what you have
to do is go back to the Facebook Developer site.
| | 01:16 | I'll just click on this right here, and then
I am going to go to Build Apps on Facebook,
| | 01:20 | and I'll scroll all the way down, and you
can see right here that we have a Reference
| | 01:24 | area for Requests, Achievements, and Scores.
| | 01:27 | The section we want is
Achievements, so we'll click on that.
| | 01:30 | So this is the section of the
developer site that discusses achievements.
| | 01:33 | There are some rules for achievements.
| | 01:36 | Every achievement has points associated with it.
| | 01:38 | Even though we're not using them in this course, you
can assign different points to go with each achievement.
| | 01:44 | As you can see, every game gets a total of
a thousand points across all achievements
| | 01:48 | and a maximum of 1000 achievements.
| | 01:50 | And one thing to know it is that a user can
only get a particular achievement one time.
| | 01:54 | So if you scroll down to this part right here,
you can see that a Facebook achievement definition
| | 01:59 | is nothing more than a simple web page.
| | 02:02 | Now this page is going to have some metatags
and the metatags will describe the Achievements,
| | 02:06 | Title, Description, the Location of the
achievement as well as an Image for the achievement, which
| | 02:11 | it says it should be 50 x 50 pixels,
but I like to make them bigger than that.
| | 02:15 | So I usually make them 200 x 200 pixels.
| | 02:17 | And you can include multiple image tags, if you
want multiple images associated with the achievement.
| | 02:23 | Finally, you have a section on Points and of course
the application ID that administers this page.
| | 02:29 | So I'm going to go ahead and close this,
and I'm going to open my working folder and in
| | 02:34 | my working folder I've already
prepared some graphics, as well as some pages.
| | 02:38 | So if you take a look at the graphics, they
are just 200 x 200 pixel graphics, PNGs are
| | 02:43 | fine, or JPEGs or whatever
you're used to using for graphics.
| | 02:46 | And you could see some of these other items
are the pages that we have for our application.
| | 02:51 | If you go to the Newbie page, you will see
that this is a simple HTML page just with
| | 02:55 | a bunch of metatags, and the metatags have
descriptions of what the achievement is supposed to be like.
| | 03:00 | When you create the URLs on these pages, you want
to make sure that you include the https:// protocol
| | 03:06 | right in front of every URL.
| | 03:07 | So don't just use the http, or you will have
a bunch of warnings come up in your JavaScript
| | 03:12 | in the developer tools.
| | 03:14 | So the URL is where this page is going to
be on our web site, and it's going to be on
| | 03:18 | our web site/facebook, and this one is
going to be called achievement-newbie.php.
| | 03:23 | Also you need the location of the image file.
| | 03:25 | It's in the same place, I'll put it in the
images folder, and then this is going to be
| | 03:28 | called achievement-newbie, and
I'm going to give this 10 points.
| | 03:31 | And this is something that we're going to
have to put in the app_ID, it's going to change
| | 03:35 | depending on your app.
| | 03:37 | So we'll have to type
that in before we upload it.
| | 03:39 | So what I'll do is I'll grab these three pages,
and I'll bring them into BBEdit, and I need
| | 03:44 | to make sure that I type in
the app ID for each of these.
| | 03:47 | So I'll go back into Safari, and I'm going
to go into my Developer page and here's my App ID.
| | 03:53 | You can also get it if you go to the
App section and see that it says App ID/APIKey.
| | 03:59 | So I'll copy that, back into BBEdit, I
want to make sure that I paste that here, save
| | 04:05 | it, paste it in all of the pages, save
it, paste that in this page, save it.
| | 04:11 | So now all these pages have the correct App ID.
| | 04:14 | Everything else about the pages is fine.
| | 04:16 | So I'm going to go ahead and close these
out, and I'll close these windows out here.
| | 04:23 | So we want the PHP pages, and you also want to
make sure that you use PHP whenever possible
| | 04:29 | when working with Facebook.
| | 04:30 | I've found that in some instances,
using the HTML extension causes problems.
| | 04:34 | So I'm going to drag these over to just a
regular Facebook folder, and my images are
| | 04:40 | going to go into my images folder.
| | 04:45 | You can put these wherever you want, but you
want to make sure that in the pages themselves
| | 04:48 | you have the link to the correct place.
| | 04:50 | Now it looks like it's done.
| | 04:51 | I'll open up the images folder just to
make sure they're there, and you also probably
| | 04:55 | want to pull up a browser and just make
sure that your images are showing up when you go
| | 04:59 | directly to the page--or at
least that there are no errors.
| | 05:01 | So I'm going to go to my page on the web,
iviewsource.com/facebook/achievements-newbie.php,
| | 05:11 | make sure that the page is there.
| | 05:13 | So if it looks like this, and you see
the title of the page, you should be fine.
| | 05:17 | So if we look at the page code--so we'll
go to the View menu and select View Source,
| | 05:21 | you can see that all the links and all the
page information is fine, and I want to just
| | 05:26 | type in the other ones as well.
| | 05:27 | So sharing is the other one, okay, we can see
the title came up, we can look at the source code.
| | 05:32 | I'll hit Command+Option+U just look at the
Source Code, the same thing is View Source,
| | 05:37 | and I'll type in the last
one Kung Foo, Kung Foo title.
| | 05:42 | The source looks good, so we are good to go.
| | 05:45 | That's pretty much all it
takes to create the Achievements.
| | 05:47 | There are a couple of steps to get them
included into your application, and we will be taking
| | 05:52 | to look at those things next.
| | 05:54 | So the first step to give your application
the ability to handout Achievements is to
| | 05:57 | create them by creating a simple HTML page.
| | 06:01 | Make sure you specify an https:// URL so
you won't run into a lot of security warnings.
| | Collapse this transcript |
| Debugging with the Debugger| 00:00 | So the next step in creating our
Achievements is to debug them, that's to the make sure
| | 00:04 | we make no mistakes before we register them.
| | 00:07 | Debugging them is done with a really nice tool
Facebook provides called the Facebook Debugger tool.
| | 00:11 | So let's take a look.
| | 00:12 | So the Facebook Debugger tool is
accessible through the Facebook Developer web site.
| | 00:17 | If you look on the left of the navigation,
you'll see a tools menu. I am going to click
| | 00:21 | on that, and there's a bunch of tools that
are pretty interesting, and you might want
| | 00:24 | to take a look at all of them.
| | 00:25 | What we want to work with
right now is this Debugger tool.
| | 00:28 | The debugger tool allows you to type in
any URL Access Token or Open Graph Action ID.
| | 00:32 | A lot of times when you're looking at the
documentation, and it asks you to create a
| | 00:37 | post or create get, you can test
those things by using this debugger tool.
| | 00:42 | You can also test pages like this. Let's
take a look at the sourcefoo page right now.
| | 00:47 | So now that your sourcefoo page looks like
it is generating a warning, it's not exactly
| | 00:51 | an error, so it's not a big deal,
and I understand what's happening here.
| | 00:55 | It says that the images that are being referenced by
the page must be at least 200 pixels in both dimensions.
| | 01:00 | Now must be is a little bit relative, because
it shouldn't have thrown up a warning if they
| | 01:04 | have to be 200 pixels, they
should have thrown up an error.
| | 01:07 | But I understand that this is happening
because of the way Facebook is being retooled for
| | 01:12 | iPad high-resolution screens.
| | 01:14 | So although on some pages in Facebook you
may see that the graphics have to be at least
| | 01:18 | 50 x 50 pixels, in other pages you're going to
see some times that they need to be 200 pixels.
| | 01:23 | So I know that the graphic that's in
question is this monogram, and I probably should go
| | 01:28 | ahead and upgrade the graphic to have a
little more resolution, but it's just a warning,
| | 01:32 | so I'm not to worry about it.
| | 01:34 | You could see how Facebook sees your page
and what metatags is able to gather from the
| | 01:39 | information on your app.
| | 01:41 | So this is great, and what we want to do is
make sure we test out the achievement pages
| | 01:45 | that we've created using this debugger
tool just to make sure everything is okay.
| | 01:49 | So I'm going to type in a slash, and I'll
type in the URL for each of the pages.
| | 01:53 | So I'm going to do the Newbie
page first, I'm going to hit Enter.
| | 01:57 | The Newbie page pass with flying
colors, there is no errors or warnings.
| | 02:01 | And I want to make sure that when I
roll over this graphic down here, I see that it's an
| | 02:06 | https link, see down there it just says
https and a link to the graphic. That's great.
| | 02:12 | The graphic is even showing up, so that's also good.
| | 02:14 | I can also check down here to make sure that
the graphic is going to be read from an https
| | 02:20 | address or that's going to cause some security
features or warnings on your browser later on.
| | 02:25 | So everything checks out for this one.
Let me try out the other two.
| | 02:28 | So sharing, hit Enter, and that one passes
perfectly as well, looks like all the data
| | 02:33 | is there, my image is linking
to an https link, which is great.
| | 02:37 | So the last one is the kungfoo achievement
and hit Enter, and that one passes as well.
| | 02:42 | Check the image, here is
the https link, perfect.
| | 02:46 | So this is looking really good, no errors, and now
we're ready to go ahead and register the achievements.
| | 02:52 | The Facebook debugger tool is not just a
tool for previewing achievements, you can use it
| | 02:56 | to debug any type of Open Graph call.
| | Collapse this transcript |
| Getting an app token with JavaScript and PHP| 00:00 | Whenever Facebook interacts with users or
applications, certain security measures have
| | 00:05 | to be put in place to make sure that
communication with Facebook is secure.
| | 00:08 | So far we've seen that the JavaScript SDK
can easily generate an access token for users.
| | 00:14 | However, for security reasons, the
JavaScript SDK is unable to generate an app token.
| | 00:19 | You'll need that to be able to do certain things,
and in this video, I'm going to show you how to do it.
| | 00:23 | The app access token is used to make sure our
app has permission to perform certain functions.
| | 00:28 | Registering an achievement
is one of those functions.
| | 00:31 | You can't create it with JavaScript because
you get an app token by using a POST command
| | 00:35 | with your application ID, which is
public, and your app secret, which is not.
| | 00:40 | You can find those by going to your app page and
looking at App ID right here and the App Secret.
| | 00:46 | If you somehow have your app secret in JavaScript,
it would no longer be a secret because anyone
| | 00:51 | could view source for your
application and copy that app secret.
| | 00:55 | Thankfully, PHP allows you to get the app token
without revealing your app secret, so let's take a look.
| | 01:00 | So I'm going to minimize Safari, I have my
codesnippets.txt file already open, and I
| | 01:06 | have my facebook folder open as well.
| | 01:07 | So I'm going to make a new file here,
right-click and create new file.
| | 01:12 | I'll call this one register_achievement.php,
and I'm going to open that up.
| | 01:21 | So the first thing I need is just a basic
HTML structure, which I have on this first
| | 01:25 | part of this codesnippets. And
I'll just paste that right there.
| | 01:28 | It's just a basic HTML page.
| | 01:30 | Next, I need to go ahead and call the JavaScript
SDK, which requires me to have a div for Facebook.
| | 01:36 | So I'll go to the codesnippets file and get
this div of fb-root which is part of Facebook.
| | 01:42 | It's how Facebook places
certain messages on your page.
| | 01:45 | I also have a div for my messages just
in case I need some place to put stuff.
| | 01:50 | So back into codesnippets, so next
I need to load the JavaScript SDK.
| | 01:54 | These are pretty standard
functions you should have seen already.
| | 01:57 | This one right here loads the SDK, and
this one executes once the SDK has loaded.
| | 02:02 | But I need to put in appId right there, so
I'll copy this, come in here, just needs to
| | 02:08 | go somewhere in the head section, and I need to
switch back to Facebook and get my App ID from here.
| | 02:15 | So I'll copy that and paste
it right there, save that.
| | 02:19 | So next, I need to come over here
and actually perform the PHP part.
| | 02:24 | So this is actually going to be a
part-JavaScript part-PHP function here.
| | 02:28 | So we are creating a variable in JavaScript
called appToken, and that variable is going
| | 02:33 | to get a string--you can see the little quote right
there--and that string is going to be generated by PHP.
| | 02:39 | Notice that it ends right
there with the end of the string.
| | 02:42 | So PHP is everything between this <?php, and this ?>
right here, so all the stuff in between is PHP code.
| | 02:53 | So let me go ahead and copy it
and put it somewhere in my app.
| | 02:55 | It doesn't really matter where I put it in
here, so I'll put it right after these load
| | 03:00 | JavaScript functions.
| | 03:02 | And looks like I forgot to copy this alert,
so let me go ahead and grab that and paste
| | 03:07 | it right there, so that's set
back to JavaScript right here.
| | 03:09 | So what we have here is with PHP, we are
getting the APPLICATION_ID and APPLICATION_SECRET.
| | 03:15 | Let me go ahead and do that from my developer
page. I'll get the App Secret from here, and
| | 03:22 | we'll paste that right here.
| | 03:23 | We'll need the APPLICATION_ID. We don't
need to go back because we've already used that
| | 03:27 | up here, so I'll just
copy and paste it from there.
| | 03:30 | Yours are going to be different
than mine, so make sure you get yours.
| | 03:32 | Here we're calling the Graph API with a URL,
and that URL is going to pass along some variables
| | 03:37 | which is going to be mainly my
APPLICATION_ID and my APPLICATION_SECRET.
| | 03:42 | Once it returns, it's going to be
fed into this variable called result.
| | 03:45 | Now I'm getting the data from the URL by
using a function called file_get_contents.
| | 03:50 | That is the method in PHP that allows you to get
a file from any URL and feed it into a variable.
| | 03:56 | We're getting the file from the URL that we
generated up here, feeding it into the result variable.
| | 04:02 | Next, what we're going to get back from PHP
is actually a string that says something like
| | 04:07 | appToken= and then the actual app token.
| | 04:11 | So we need to just get the actual
token part, not the appToken= part.
| | 04:16 | So I'm using this other method in PHP called
explode that will divide a string into parts
| | 04:21 | and feed it into an array.
| | 04:23 | So here I tell that the divisors are going
to be the Equals Sign, and everything is
| | 04:28 | going to go into this pieces variables.
| | 04:31 | So what I'm going to do next is I'll put
the second piece which will be whatever was to
| | 04:36 | the right of that Equals Sign,
which will be our app token.
| | 04:40 | Then afterwards, I'm going to go ahead
and print it out just by using an alert.
| | 04:43 | So I'm going to save that, and
I'm going to switch over to Safari.
| | 04:48 | I'll open a new tab, and I'll
just type in the URL for this page.
| | 04:53 | So that's iviewsource/facebook, and I think I used an
Underscore here, register_achievement. Let's see.
| | 05:00 | Yeah, that is the right page.
| | 05:02 | It's not showing anything, I didn't get
an alert, so let's see what's happening.
| | 05:05 | I want to go to the Develop menu, show the
Web Inspector, and if I scroll down, I'll
| | 05:11 | take a look at this warning here.
| | 05:12 | Now it's not showing up because it's
actually inside the JavaScript text, so this is not
| | 05:16 | going to be showing to the users also in the head
section, which doesn't necessarily get displayed.
| | 05:20 | But I'm getting a warning from PHP.
| | 05:23 | It says there's something
wrong with file_get_contents.
| | 05:25 | So if a look over here, it says URL file-
access is disabled in the server configuration for
| | 05:31 | that particular server.
| | 05:32 | So that means that our server does not
support to get-file-contents function, and we can
| | 05:37 | fix that by creating
another file called php.ini.
| | 05:43 | So I'm going to make a new file here, call
it php.ini, and what that file does is it
| | 05:49 | will override anything in PHP that I
want to be different on this folder.
| | 05:56 | So it allows me to execute commands that I
normally wouldn't by putting in some setup
| | 06:01 | information in this file.
| | 06:03 | And let's go ahead to that. I'll go ahead
and open this up back into my codesnippets,
| | 06:08 | and what I want to do is put in this line.
| | 06:11 | This will allow the file-get-contents
to work in this folder.
| | 06:15 | So I'll put that there, I'll save it, and
I'll switch back over to our page and hit
| | 06:20 | Refresh, and it looks like it's given us
the app token just fine, which is perfect.
| | 06:26 | This is great! We're getting a little error.
| | 06:28 | It's because we don't have the channel
file--we're not calling the channel file.
| | 06:32 | If you remember, when we're setting up the
original document, it gives you this error
| | 06:35 | if you don't set up a channel file.
| | 06:37 | But we don't really need to worry about that.
| | 06:39 | We're only going to use this page to
register our achievements, so that will work fine.
| | 06:44 | So this appToken function that we
created is going to be actually quite handy.
| | 06:48 | We're going to need it in other places.
| | 06:50 | PHP can't by default run inside JavaScript
files, so we do have a .php page in order
| | 06:56 | to get the app secret.
| | 06:57 | Other than that, getting an app token with
PHP is almost as easy as getting anything with JavaScript.
| | Collapse this transcript |
| Registering an achievement| 00:00 | Now that we are able to get an app token, it
should be easy to register an achievement.
| | 00:05 | Let's finish up our register achievement page and
go ahead and register our achievements with Facebook.
| | 00:10 | So here's the Achievements page on the
developer site, and you could see if you scroll down
| | 00:15 | a little bit that in order to create an achievement,
we have to issue an HTTP POST to APP_ID/achievements
| | 00:24 | with an app access_token, which we now have,
and the following parameters, two parameters.
| | 00:29 | Number one is the achievement which will be
the URL to the achievement, and then the second
| | 00:34 | one is the display_order which is the order
that the achievement will display whenever
| | 00:40 | it comes up on the app.
| | 00:42 | Achievements with a lower display order will be
displayed before achievements with a higher display order.
| | 00:47 | So let's go ahead and open up our register_achievement
page which we worked on in the last movie.
| | 00:53 | So I'm going to go ahead and open that up, and first
thing I need to do is get our registerAchievement function.
| | 01:00 | This is exactly what JavaScript API requires.
It sends a post command, which is right there,
| | 01:06 | to the url which will need our APP_ID instead
of this YOUR_APP_ID obviously, /achievements
| | 01:12 | and its going to send along a couple of variables,
display_order, and then when it gets a response
| | 01:18 | from the server. If the response is an
error, it'll print that out. If it's not an error,
| | 01:23 | then it means everything went fine, and it will
display a message into our div that we created before.
| | 01:29 | So I'll copy this, come over here, and I
don't really need to worry about where I've put
| | 01:34 | that because it's going to be
executed when I click on a button.
| | 01:37 | So there's the registerAchievement function,
and I'm going to go over here into our Facebook
| | 01:44 | Developer page and get the APP_ID.
| | 01:49 | I'll paste it right there, I'll Save this,
and then I just need to have a button somewhere
| | 01:56 | on my screen that allows people to register
the achievement when they go it so underneath
| | 02:02 | my div for message, I'll paste that, save
that, and then I'm going to go to my register
| | 02:10 | app page--and let's see, hold on.
I'm probably missing something else.
| | 02:14 | So what I want to do is I've got my app ID here.
| | 02:17 | I want to make sure that I update the URL
that this is going to register every time.
| | 02:24 | So when I click on this button, it' going
to pass along a URL. The URL that it will pass
| | 02:31 | will be right here.
| | 02:32 | So I'll need to typing something instead of
achievementName and type in URLs for one of
| | 02:37 | my achievements,
iviewsource.com/facebook/achievement-newbie.php.
| | 02:49 | Now that one, I want to make sure that a
register with the lowest display_order, so you do want
| | 02:54 | to make sure you update this
whenever you change it to a new one.
| | 02:58 | Just to make sure I'm going to copy this
URL and put it in a browser. Make sure it's pointing
| | 03:04 | to the right place. Looks like my Newbie
Achievement title came up so I know that that's a good one.
| | 03:08 | Let's see what else.
| | 03:10 | I don't need to alert this anymore, so I'm
going to delete that right there, save this
| | 03:15 | and pull-up our register_achievement.php page.
| | 03:19 | So I should see the button for register, and if I click
on this, if I did everything correctly, it'll say Thanks.
| | 03:29 | This achievement has been
registered with Facebook.
| | 03:31 | So now what I need to do is just modify this.
I will change the display_order to be 2 and
| | 03:38 | put in the address for sharing.php, save this,
go back into Safari, refresh my page at the
| | 03:47 | Register button, wait a second, looks like it
got registered just fine, back into BBEdit,
| | 03:53 | last one is the kungfoo, and I'll make a display_order
of 3, save it again, come back in to Safari,
| | 04:04 | Refresh, Register, wait for
the message, and there it is.
| | 04:08 | Not terribly exciting but if everything
went as planned, we're now ready to display our
| | 04:12 | achievements in our application.
| | Collapse this transcript |
| Showing available achievements on your page| 00:00 | So now that we've registered our
achievements, it's time to place them on our page.
| | 00:04 | What we want is to put a list of the
available achievements into our app.
| | 00:09 | So let's take a look.
| | 00:10 | So if you go to the Achievements page in the
Developer web site for Facebook, you'll see
| | 00:15 | a lot of information about
how to work with achievements.
| | 00:18 | So we've already learned how to create
achievements first by creating the HTML necessary for Facebook
| | 00:23 | to understand what they are.
Then we learned how to register them.
| | 00:27 | Now it's time to learn how to read
achievements, which is in this section.
| | 00:30 | Notice it says that you can get all
achievements for an app by issuing an HTTP GET request
| | 00:35 | to /APP_ID/achievements.
| | 00:38 | So what I'm going to do is switch over to
the Graph API Explorer which normally shows
| | 00:43 | the information about a user, and I'm going
to switch right here to Source Foo which is
| | 00:48 | the application, and I will
now need the APP_ID/achievements.
| | 00:54 | So I'm going to go to my Apps page and do
that by going to this link right here, and
| | 00:59 | I'll copy the App ID, I'll switch over to
the Graph API Explorer again, and I'll paste
| | 01:05 | that, and I'll put in /achievements.
| | 01:09 | And remember, it said
that it wanted a GET request.
| | 01:12 | You can also issue any other type of GET,
POST, or DELETE request right there.
| | 01:17 | So I'm going to hit the Enter key, and now
you can see a list of achievements in JSON
| | 01:21 | format for my page.
| | 01:23 | So this Graph API Explorer, it's quite
useful for a lot of different things.
| | 01:26 | And this is one of them you can issue commands
directly from here, or you can read information
| | 01:31 | that you want to preview for your app.
| | 01:33 | This will tell you how
to get to specific things.
| | 01:36 | So I could see that registering my
achievement worked because there's my Newbie achievement
| | 01:40 | and next is my sharing achievement, and I
can see the data for the Kung Foo Achievement.
| | 01:47 | Awesome! So this looks like it's ready to go.
| | 01:49 | Let's switch over to BBEdit,
I'm going to minimize this.
| | 01:52 | Here's my codesnippets.txt file.
| | 01:53 | I'm going to need to open the JavaScript file
as well as the CSS document and the index file.
| | 02:03 | So let me open those.
| | 02:04 | All right! So obviously, the first thing I
need is to have a placeholder for my information.
| | 02:08 | So I'll go to codesnippets and get
this placeholder set of divs right here.
| | 02:12 | So it's going to have a div with an ID of
achievements, and then it's going to have
| | 02:15 | a section for appachievements and later on
we'll have a section for userachievements.
| | 02:20 | So I'm going to go over to my index file,
and I'll put it right in the social plug-ins.
| | 02:27 | It's not technically a social plug-in, but
it doesn't really matter where these go.
| | 02:31 | They could go outside the social plug-ins.
| | 02:33 | So let me save that.
| | 02:34 | All right! So next we need to get the App Token.
| | 02:38 | Now if you watched the previous movie, you
saw that we registered the App Token by creating
| | 02:43 | a document that allowed you to register these.
| | 02:46 | One of the things that we had to do was
combine a little bit of PHP with JavaScript, and this
| | 02:51 | is the function that does that.
| | 02:53 | So I need to make sure that this is on an
HTML page--or a PHP page rather--so that this
| | 02:59 | executes before it gets sent back to the server.
| | 03:02 | I want to put this right here before I call
myscript.js to make sure that this appToken
| | 03:08 | variable is created with the proper information.
| | 03:11 | So I pasted that in there.
| | 03:12 | All this does is goes to this URL and
requests an app ID by feeding in the APPLICATION_ID
| | 03:21 | and the APPLICATION_SECRET.
| | 03:22 | Obviously, I need to get my APP_ID and my
APP_SECRET, so let me go ahead and switch over.
| | 03:28 | We'll get the App Secret back to BBEdit,
there's the App Secret, and back to Safari, put the
| | 03:34 | App Key, and minimize this,
come over here, get the APP_ID.
| | 03:40 | So we should be good to go.
| | 03:42 | This should be fed into the appToken
variable before it calls the script.
| | 03:47 | Save that, and next of course, we need to add
the script for getting the App Achievements.
| | 03:53 | So this is exactly what we
were doing in the Graph API.
| | 03:57 | We set a call to the Facebook API method
with the APP_ID and the achievements, and it's
| | 04:04 | a get method, and we also need to make
sure that we feed it in appToken which we have
| | 04:10 | just received by creating this right here.
| | 04:13 | Then after that, it's going to receive a
response from the server if that was successful, and
| | 04:19 | that response is going
to be fed into a variable.
| | 04:21 | So that data will be fed into
this appAchievements variable.
| | 04:25 | And one of them right now is just outputting it to
the console to make sure that it works just fine.
| | 04:30 | So I'm going to grab this code, I'll go
back into my JavaScript document, and I want to
| | 04:35 | put this somewhere after it initializes things.
| | 04:39 | So here's where it populates the stories,
here's where it finds out if a user is logged
| | 04:44 | in, and right here after I insert the welcome
with the user's name, I'm going to paste that.
| | 04:51 | So after it initializes, we verify that
this is a user from Facebook and they're logged
| | 04:56 | in, then I'm going to call the Facebook API.
| | 04:58 | I need to make sure I update this APP_ID,
it should be somewhere in here.
| | 05:02 | There it is up there, so I'll just
copy it and paste it right there.
| | 05:05 | I'll save this, and let's switch
back over to our app, and I'll refresh.
| | 05:10 | Okay, so we shouldn't really see anything,
but we should be able to go to the console
| | 05:15 | and take a look at the
object that it received back.
| | 05:18 | So I'm going to show Web Inspector here, and I'm
going to go to the console, and we'll see an error.
| | 05:23 | So you could see that it actually received
three objects. I must have another console
| | 05:28 | output here, so I can delete that if I want to.
| | 05:30 | But I see the three
different objects right there.
| | 05:32 | And if I open them up, I notice that this
is an object and the description is about
| | 05:37 | the Newbie achievement here, here's the title.
| | 05:39 | So here's all the data
for the Newbie achievement.
| | 05:43 | I'll close this one out.
| | 05:44 | Here must be the data for the next achievement
which is the sharing, and sure enough, there's
| | 05:48 | all the data, and finally,
the Kung Foo Achievement.
| | 05:51 | So all my information came in just fine.
| | 05:53 | It's just matter of accessing the data, so
I know that I can--if I understand the JSON
| | 06:00 | format, I can output whichever
parts of these different objects I need.
| | 06:05 | So I'll switch back over to BBEdit and go
back to codesnippets, and here I have a script
| | 06:10 | just a replacement script
that gets the App Achievements.
| | 06:13 | So it's pretty much the same as this one up
here, but after App Achievements, I have this
| | 06:19 | section right there, and
then I output everything.
| | 06:22 | So this section right here
creates a variable called output.
| | 06:24 | It feeds it the label of that section, then
a little bit of a description, and then here
| | 06:31 | it goes through and gets
the Available Achievements.
| | 06:34 | So it's going to go--this is jQuery that
goes through each one of the achievements, and
| | 06:39 | it generates output for each one of those.
| | 06:42 | So I don't want to copy this entire thing
and have to reput the APP_ID, so I'll just
| | 06:45 | copy this section, go back into my JavaScript,
and in the place where I'm just outputting
| | 06:52 | stuff to the console, I'll paste that and let me
indent it a little bit so it looks a little better.
| | 07:00 | So this should output all of the achievements into
the appachievements div that I created as a placeholder.
| | 07:07 | So let's save that, switch over to
Safari, let's close this out, and refresh.
| | 07:13 | Okay, so it looks like it is publishing the
achievements. There's the Achievements heading
| | 07:18 | that I created, here is the paragraph, and
after that it's printing out the Available
| | 07:23 | Achievements--here's the heading
for that, here's the achievements.
| | 07:26 | Right now, the achievements are 200 by 200
pixels, but I can see that there's the Newbie
| | 07:30 | Achievement with the description, there's
the graphic for the Sharing Achievement, and
| | 07:35 | finally the Kung Foo Achievement.
| | 07:37 | Obviously, this is really annoying that it's so large,
so we need to fix that, and we'll do that with CSS.
| | 07:43 | So we'll get the last bit of code from the
codesnippets, and we have some styles here
| | 07:47 | for the achievements.
| | 07:49 | So I'll scroll all the way down, copy that,
paste it at the very bottom of my CSS file,
| | 07:56 | save that, let me switch over and just show
you how it looks, and then I'll go through
| | 08:00 | and explain really quick how I did the CSS.
| | 08:03 | See it's loading the achievements, and now
they look really nice right next to each other.
| | 08:07 | If you scroll over each of these achievements,
you'll see that it has a little bit of a pop-up.
| | 08:12 | I did that all with CSS.
| | 08:13 | So let's take a look a look at the
CSS and see how we achieved that.
| | 08:16 | I'll see if I can open that and leave it to
the site because it makes sense when we're
| | 08:20 | looking at the code and
what it's doing side by side.
| | 08:23 | So achievements, the CSS starts right here
just a little bit of padding to the bottom,
| | 08:29 | so it has a little bit of room at the bottom.
| | 08:31 | The headline level 3 is going to be formatted in this
manner just a slight color here. Nothing--nothing major.
| | 08:38 | So that's this Available
Achievements, I believe.
| | 08:41 | And then the h4s are going to be a little
bit smaller, so the h4s will be these ones
| | 08:46 | that pop up when I roll over these elements.
| | 08:50 | Then we keep on going, and we have a paragraph.
| | 08:52 | This makes the paragraphs right here a little
bit smaller. And the images, it sets the width
| | 08:57 | of the images to 50 pixels.
| | 08:58 | Remember that Facebook now
requires 200 by 200 pixel images.
| | 09:02 | I think it's because of the iPad's high-resolution
screen, so it just resizes it to be 50 pixels wide.
| | 09:09 | Next, we go through and add some other
styles for paragraphs, let's see, article.
| | 09:15 | So each one of these--actually, so h3 and
h4 are the achievements for here, and then
| | 09:21 | later on when I do user
achievements, you'll actually see an h4.
| | 09:25 | And inside the articles for the achievements, you'll
see an h3 which is actually what happens when I roll over.
| | 09:31 | The paragraph is right underneath that.
| | 09:33 | And then the trick that I do to pop them
over is right here within these two styles.
| | 09:39 | So I set up the article itself, so each one
of these groups of data has an article div.
| | 09:44 | So I set the position of that to relative.
| | 09:46 | That allows me to then set the text inside
them to be positioned absolute, so the text
| | 09:52 | will be positioned relative to the last
relative container which is its parent, which is this
| | 09:59 | article thing right here.
| | 10:01 | And because it's absolutely positioned, then
I can say okay, how far away from the original
| | 10:05 | element do I want to position the rollover text.
| | 10:09 | And that's going to be positioned 80 pixels
to the right, -20 pixels from the top, and
| | 10:13 | the width of that group
of text is going to be 200.
| | 10:16 | So that's what you see
when you roll over like this.
| | 10:19 | The text is aligned to the right, as you
can see, opacity 90%, so it shows a little bit
| | 10:24 | of the background through, and the Z index
100 so that it stays on top of everything else.
| | 10:29 | And of course, this is not displaying when
you see the screen first, but it will display
| | 10:35 | whenever you roll over.
That's what this part of it does.
| | 10:38 | It says, when I roll over each article,
which is each one of the elements, then the text
| | 10:44 | element will display as block,
which means it's just visible like that.
| | 10:48 | So pretty cool! I think you're getting the
hang of how to access different parts of the
| | 10:52 | Facebook API, first by previewing them through
the Graph API Explorer, but then by just calling
| | 10:58 | different things with the JavaScript SDK and
accessing anything you want from Facebook's Open Graph.
| | Collapse this transcript |
| Assigning and displaying achievements| 00:00 | We can see the achievements our app offers
users. Let's take a look at how you can assign
| | 00:05 | an achievement to a user and how to display
the achievements that a user has received.
| | 00:10 | So let's go to the Developer web site and
the Achievement section, and at the very top
| | 00:15 | of this window, you could see how you can do
things with Achievements for the app itself.
| | 00:20 | So how to create App Achievements,
how to read them, and how to delete them.
| | 00:23 | You need to scroll down here to this section
called Managing achievements for a user, if
| | 00:28 | you want to know how to do things for users.
| | 00:31 | So of course we can read user achievements by
issuing a get request to /USER_ID/achievements,
| | 00:37 | we need an users access_token and publish_actions.
| | 00:40 | Notice that it gives you a JSON object with
some data. One of things you should see here
| | 00:45 | is that it doesn't have data about the description
of the achievement or the image of the achievement,
| | 00:51 | so it only sends back the ID URL type and title,
it's not going to send the description or the image.
| | 00:56 | So if want to display those, we
need to find a way of doing that.
| | 00:59 | So also if you want to create an achievement,
you need to issue a post to /USER_ID/achievements
| | 01:05 | with an app access_token.
| | 01:07 | So this is not a user access_token,
it's an app access_token.
| | 01:10 | And you can of course delete
an Achievement if you want to.
| | 01:13 | So I am going to go over to my codesnippets file,
and I'm going to open the JavaScript and the CSS.
| | 01:20 | So the first thing I need to do is figure
out how to do achievements or how to list
| | 01:23 | achievements from a user.
| | 01:25 | So I will go to codesnippets, and I will
get the achievements from this user, so I will
| | 01:31 | copy that, I will paste it right before
this response.status section right here, and I
| | 01:35 | will indent a little bit.
| | 01:37 | So this queries the Facebook API. Feeding it the
user ID and /achievements issues a get request.
| | 01:45 | And if it's gets a response, then it's going
to tell you that it's going to either actually
| | 01:49 | output to the console the results of user
achievements, or it's is going to tell you,
| | 01:54 | you haven't earned any achievements.
| | 01:56 | Since we haven't earned any achievements,
we are probably going to get this message.
| | 01:59 | So I'll save this, and I'll go back on
to Facebook and Refresh this right here.
| | 02:05 | So I should see a message that says, sorry
you have not earned any achievements yet.
| | 02:09 | And that's pretty good, but now we need to
figure out how to give a user an achievement.
| | 02:13 | I want to give everybody that comes to the
site a Newbie achievement, so I will go to
| | 02:17 | codesnippets and just copy this code right here.
| | 02:20 | So this is going to create a post to the
achievements, to userid/achievements with an access_token
| | 02:26 | that is the app_token that we already have
in storage in this variable called app_token.
| | 02:32 | And it's going to post the achievement name
which is the URL of the achievement we want to add.
| | 02:37 | So I will copy that, go back into myscript.js.
I want to put that right here, right after
| | 02:42 | it realizes that a user has
not earned any achievements.
| | 02:45 | Let me go ahead and indent that a little bit.
| | 02:48 | And I am going to go ahead and save it.
| | 02:50 | So now, if the user hasn't earned any
achievements then it's going to tell me, but then immediately
| | 02:55 | give me the Newbie achievement.
| | 02:58 | So I'll refresh this page, it should still
tell me sorry you haven't earn any achievements
| | 03:02 | but now the user should
actually have the Newbie achievement.
| | 03:06 | So how do we know that?
| | 03:07 | We will go to the Graph API
Explorer, so here's the user ID already.
| | 03:11 | We need to just type in achievements and--oops!
Before we do that we need to make sure we
| | 03:17 | are in the right app.
| | 03:19 | So I will do that /achievements, hit
Refresh or hit Return or Enter, and you could see
| | 03:25 | that the achievement has been assigned, so
if I go back into the application, and I load
| | 03:30 | it up once again, I will see a rather to see this
thing that says undefined which is fine right now.
| | 03:35 | The user doesn't really have any achievements and
haven't really done anything to display the achievement.
| | 03:42 | So I am going to go back into the Graph
API Explorer, and I'll show you how to delete
| | 03:46 | an achievement just in case you want to reset
things, you need to go here and issue a delete
| | 03:53 | Command to /achievements, and then you
need to give it the achievement= and just copy
| | 04:00 | the achievement that you want
to delete, the URL is right here.
| | 04:03 | So I could just do that copy, paste, hit Submit,
and it should come back with a value of true.
| | 04:09 | So that means that this user no longer has
achievements, so we could test that by going
| | 04:14 | to get--just go to /achievements here, hit Return,
and you should see there's no data here, so perfect.
| | 04:23 | So let's go back into the app, and we will Refresh.
| | 04:27 | So I should say, once again sorry you
haven't earned any achievements, and if we Refresh
| | 04:33 | it should just give us that blank undefined.
| | 04:36 | The user has been given an
achievement now, so that's great.
| | 04:39 | Okay, so let's see what else we could do
here. Let's go back to the codesnippets.
| | 04:42 | So here is how you would
check for a specific achievement.
| | 04:45 | Once a user has an achievement, you can test
for that achievement by going through each
| | 04:51 | one of the user achievements and then
doing something with the achievement.
| | 04:55 | So let me grab this code right here,
and I'll paste it, I will come over here.
| | 04:59 | So if the user has achievements, then what
I want to do is execute this bunch of stuff
| | 05:07 | and what I'm doing here it is I'm going to
check the user achievements that I received
| | 05:12 | from the server, from Facebook.
| | 05:15 | I am going to the check to see if we have a variable
here to see if it has that specific achievement
| | 05:19 | and then go through the
list of user achievements here.
| | 05:22 | If the user achievement title
comes back to be Newbie achievement.
| | 05:27 | Then it's going to set this variable has
newbie to true, and it's going to stop going through
| | 05:32 | all the different options.
| | 05:34 | So when I get over here, I say okay so if
this user doesn't have a Newbie achievement,
| | 05:38 | then I want to go ahead and apply it
to him so the same thing is down here.
| | 05:42 | Now this is not really practical for maybe
the Newbie achievement, but this is exactly how
| | 05:47 | you would deal with
checking for other achievements.
| | 05:50 | So you would check to see if they have a
specific achievement, if they have it then you could
| | 05:55 | set a variable, and then if they
don't have it you can give it to them.
| | 05:58 | So not exactly what you would do here, practically,
but it's the process that you would go through
| | 06:03 | for checking different achievements.
| | 06:06 | So I will save that, and I
will go back to my codesnippets.
| | 06:09 | So the next thing is to actually get the
achievements or actually print the achievements for the user.
| | 06:15 | So I am going to grab this piece of code
right here, and all it's going to do is just output
| | 06:19 | the user achievements to the
Console, so we kind of preview them.
| | 06:23 | So I will come back over here,
and I'll put that right in here.
| | 06:28 | So I'm copying too much here. All I need to do
is--this is already up here so I don't need that.
| | 06:35 | So all I need to do is output if they do have
achievements, output to the console just the
| | 06:42 | object with all the achievements.
| | 06:44 | So let's save that and
go back into our app here.
| | 06:47 | Okay, so we really shouldn't see any achievements
because we see the title right now, your achievements,
| | 06:52 | but if we go to the Console.
| | 06:54 | So we'll go to Develop > Show Web Inspector,
and here we see the object. The object has
| | 06:59 | the achievement right here
which is the Newbie achievement.
| | 07:02 | So I know that this is working, and this is
also one of things you can do to test to see
| | 07:08 | there's any achievements, and this gives
you the structure of how to get to them.
| | 07:12 | So using the Console is really
handy for this type of functions.
| | 07:16 | Now that we know that we have an achievement
we have verified it by looking at the console,
| | 07:21 | then we can actually go through the
process of outputting the achievement.
| | 07:24 | So let's go back into our codesnippets,
remember you don't really need this line, you just
| | 07:28 | go from this output line,
find this line and replace it.
| | 07:32 | So here's a tricky part with
outputting the Achievements.
| | 07:34 | I want to output the achievements with the
icon as well as a description of the achievements,
| | 07:40 | but the information that I get back from the
console--if you remember--doesn't have that in it.
| | 07:45 | So if I were to pull up the console here,
Show Web Inspector and look at this object
| | 07:50 | I am going to see that I get the achievement
back, and I get the title of the achievement,
| | 07:55 | I get the URL of the achievement, but I don't
get the name or description of the achievement.
| | 07:59 | So if I want to do that because I really do
I want to tell the users hey you've got this
| | 08:04 | achievement, here's what it's about.
| | 08:05 | If I want to do that I am
going to need to do something else.
| | 08:08 | So what I'm doing here is I am going through
each application achievement and getting information
| | 08:14 | from each one of those, and then checking
to see if the current user achievement title
| | 08:19 | matches this app achievement title.
| | 08:22 | So I am going to go through each one of the
app achievements, and seeing of the title of
| | 08:27 | the achievement that I just got back from
the list of user achievement matches any of
| | 08:32 | the titles in the achievement
that this app lets users have.
| | 08:36 | If it does, then it's going to output
everything about the achievement, so the image URL of
| | 08:43 | this appObject which is the app achievement
list, and the title as well as the description.
| | 08:50 | So this'll work really nice, we will
grab this and go back into myscript.
| | 08:55 | So instead of outputting them to the Console,
then I can just paste them in here, and let's
| | 09:04 | take a look at this little bit further.
| | 09:06 | So I have the user achievements, I need the
title, and it's not just the title because
| | 09:12 | it does get me the title.
| | 09:13 | But I need the description
and the location of the image.
| | 09:16 | I can only get that by
looking at the app achievements.
| | 09:20 | Now up here I was able to get all of the app achievements,
and then I put them in this appAchievements variable.
| | 09:25 | So down here looking at that JSON data and
going through each one of those items in order
| | 09:30 | to print out all the information
that I need from the achievements.
| | 09:34 | So let me go ahead and save that, go
back into our application and Refresh.
| | 09:40 | So we should now be able to see the achievement that
this user has, which is really just the Newbie achievement.
| | 09:46 | And this looks great. I would like
it to format it a little the better.
| | 09:49 | I like how this is kind of you know stacked
up next to the image, so I am going to move
| | 09:53 | these over here, and I need to do that with
some CSS which should be pretty simple CSS.
| | 09:59 | So let's go back into our codesnippets,
here's the Styles. Because I created so many styles
| | 10:03 | for the apps, the styles for the userAchievements are
going to be just a slight modification margin bottom.
| | 10:10 | And then I am bringing this
display of the images inline.
| | 10:14 | So I will copy that and just add that to the
very end of the CSS, Save it, refresh my page,
| | 10:20 | scroll down a little bit.
| | 10:22 | And there is the Newbie Achievement.
| | 10:24 | Looking good, and if I had any other
achievements they would just go underneath that.
| | 10:28 | And that's how you add
Achievements to a specific user.
| | 10:31 | Really everything in Facebook apps is done
with this process, we have taken a look at
| | 10:37 | how to retrieve data from the Facebook
objects, the Facebook API, and then you know issuing
| | 10:42 | different commands, whether it's a post-command
or Delete command. The commands are even going
| | 10:47 | to be the same with the different
types of things that you want to do.
| | 10:50 | So learning how to manage the Facebook API is going
to be really beneficial to you creating awesome apps.
| | Collapse this transcript |
|
|
ConclusionNext steps| 00:00 | So I hope you've enjoyed this course.
| | 00:02 | If you like Facebook app development,
here are some other places you might enjoy.
| | 00:06 | So you'll definitely be spending a
lot of time in the developer web site.
| | 00:09 | So I wanted to point out a couple of places in
the developer site you may want to take a look.
| | 00:13 | You definitely want to go to the Tools section.
| | 00:15 | There's a few tools I didn't talk
about, one of them is the Test User API.
| | 00:19 | So here you can create users
for testing out your application.
| | 00:23 | You may want to dig into some of the
additional SDKs, we've covered the JavaScript SDK but
| | 00:28 | there's also a PHP SDK.
| | 00:30 | We covered in a couple of places
how to access the SDK through PHP.
| | 00:34 | In some places this is a better solution
than the JavaScript SDK, especially when working
| | 00:39 | with something like SQL databases.
| | 00:41 | There's a couple of other SDKs you may want to
checkout, including the iOS and Android SDK as well.
| | 00:46 | If you need to help with Facebook, the best
place to get it it's by going to the Support
| | 00:50 | section of the web site at this URL...
or visiting facebook.stackoverflow.com.
| | 00:55 | This is the official place where you can ask
questions and find specific answers to your questions.
| | 01:00 | So once again, this is Ray Villalobos, and
have fun building the next great Facebook application.
| | Collapse this transcript |
|
|
