Utilizing the Facebook components: A photos example

We bragged earlier about the ease with which you can access Facebook data within your Sharendipity creations. I’d like to digg into a couple of examples to show you how to access some of the resources currently available in the component repository.

We’ve created a demo application, Facebook Photo Demo, which utilizes a few of the components we’ll discuss in this post. Go ahead and open it up in our editor to explore a live use case that pulls in your own photos.

Data structure components

The web service components take advantage of some custom classes that encapsulate the data returned by Facebook. These classes were created and shared within the editor and make it easier to track and manage the photos and albums you are accessing. Within the scope of Facebook photos, there are two primary types used by the existing web services:

• Facebook Album provides an encapsulation of a Facebook album as defined by their Photos.getAlbums API call.
• Facebook Photo provides an encapsulation of a Facebook photo as defined by their Photos.get API call.

Web service components

There are currently two primary web services that have been defined as “types” in the community explorer, which provide you with easy access to Facebook photos:

• Facebook Service – get photos provides a conduit to Facebook’s Photos.get API call. As it is currently defined, this service provides the following methods:
  • getAllOfMyPhotos() will return an array of photos that the active user/player is tagged in.
  • getUsersPhotos() will return an array of photos for a specified user ID.
  • getAlbumPhotos() will return an array of photos for a specified album ID.
  • getPhoto() will return a photo for a specified photo ID.
• Facebook Service – photos getAlbums provides a conduit to Facebook’s Photos.getAlbums API call. As it is currently defined, this service provides the following methods:
  • fetchAlbums() will return an array of albums that match the specified album IDs.

It’s important to note that these components were built inside of Sharendipity. So if these don’t meet your needs or you’d like to extend their functionality, you can do that. If you’d like to build your own Facebook interfaces, please consult the API documentation on our wiki.

Bringing it all together

Let’s walk through a simple photo example… The below pattern is a common one when accessing web service data within an object’s behavior.

Using the Facebook Service – get photos component provides your application with the ability to access photos of yourself, your friends, or photos in a particular album. The below screen shot shows you how to assign a random photograph of yourself to an object inside your application.

1. Create an instance of the Facebook photo web service
2. Retrieve a list of your own photos from photos web service
3. Randomize the list of photos
4. Extract an individual photo
5. Set the image property of the object running this behavior to the Facebook Photo’s “small” version

As you explore the methods available in the web services, pay special attention to their return types. Some methods return individual elements while others return an array of elements. If you hover over the methods within the behavior editor, you’ll find these definitions.

Using these building blocks, you can quickly and easily build games, quizzes, and photo browsers that integrates photos from your Facebook network.

We will follow up with another post that explores the use of components that access other elements of your Facebook friends.