The Developer's Guide to Facebook Open Graph

J. Lannister
36 minutes ago via Kinvey
like comment share
J. Lannister just made an app
OpenGraph using Kinvey.
Jenna Bird
like comment share
Jenna just made an app that
C. Lannister
Jenna just made an app that
Brought to you by Kinvey
The
Facebook Open GraphFacebook Open Graph
Developer’s GuideDeveloper’s Guide
to

The Developer’s Guide to Facebook Open Graph
IntroIntro
As app developers, we want to engage our users and help our apps spread as
far and wide as possible. Since it was launched in early 2012, Facebook Open
Graph has made this job easier by providing a simple way to integrate apps
into each user’s Facebook experience and social graph.
Facebook Open Graph allows users
to share more contextual, data-rich
updates in their timelines. Applica-
tions that make use of Open Graph
make it easy, almost effortless, for
users to share these augmented
updates by posting on the user’s
behalf, and, in return, enjoy wide-
spread exposure to the user’s social
graph. As of March 13, 2013, over
400 billion Open Graph actions have
been shared on Facebook, 110
million songs, albums and radio
stations have been played through
Open Graph-integrated apps, and
nearly 1.5 million books have been
shared.
All told, this amazing amount of sharing has been made possible by two
things: Open Graph’s structured API and a bunch of compelling third-party
apps that have taken advantage of it.
This eBook is divided into two parts. In the first, we’ll take you through a trio
ch 1
1
J. Lannister
36 minutes ago
like comment share
J. Lannister just took a photo
of a hamburger at In-n-Out
using Hamburglar.
Andy Walken
36 minutes ago
Greg Stitt just made an app
Greg Stitt just made an app

of apps that have had great success with the Open Graph. In the second half,
we’ll describe how Kinvey can put this sort of success in reach for indie devel-
opers that are building new and innovative apps without sizable development
resources or a web-centric view of the world. This matters because, to our
minds, there just hasn’t been as much native iOS and Android development as
we’d like to see, especially given the ascendance of mobile and the decline of
PCs.
But we’ll get to that later. First, let’s take a spin through some of the best Open
Graph apps around.
In this eBook, we’ll look at some of the most successful apps on Facebook and
then talk about how Kinvey can help “open” the Open Graph to an entirely new
category of developer—you. After all, most popular Open Graph apps began as a
Web app or were developed by mobile-first companies backed by heavy fund-
ing. As a member of Facebook’s Technology Partner Program, we aim to make
it easier for any developer to build Open Graph apps.
2

If Facebook and the Open Graph are all about frictionless sharing, then Songza
is all about a frictionless music experience. “We don’t want you looking at the
screen,” said CEO Elias Roman. “We want you hanging out with your family, or
doing whatever else you were doing.”
If you’ve used his app or website, then you know what Roman is talking about.
Songza ‘s mission in life is to serve you music fast but without sacrificing
quality. That’s why sign-in (required on mobile but not the web) is quick and
easy through Facebook, whose network ensures you probably won’t have a cold
start. Most likely your friends are already there. Unlike a lot of other music
services, the app doesn’t ask you to build playlists; it already has them expertly
curated for you. Or you can see what your friends have been listening to. When
you enter Songza, you see very clickable buttons asking you for, essentially,
your mood or context. Want an energy boost? How about a background beat for
that Thursday afternoon impromptu get-together?
The Open Graph makes many of these product features possible, but it also
helps grow the business. Songza does “sonic brand consulting” for companies it
likes, such as Victoria’s Secret and Mercedes-Benz, for which it did a Fashion
Week project. “Brands love that friends can see what other friends are listening
to,” Roman said. “It’s fun to experience brands in a social way rather than a
spammy way and that’s made possible through our Open Graph integration.”
ch 2
Stand-out
Open Graph Apps
Stand-out
Open Graph Apps
3

Songza is a mobile-first company as far as Roman is concerned, meaning that
it’s all about optimizing for small screens and fat fingers. 75 percent of
consumption is mobile. “It’s a way of thinking about a constrained world,” he
said. “You have very small screens. You have very limited interactions.
Anything that requires typing is completely unacceptable. Anything that
requires more than your thumb is
unacceptable.”
So what does that mean for tradi-
tional navigation on Songza?
Here’s Roman again: “Search and
browse, the staples of most
company’s navigations, are absolute
power features on Songza. You can
have a long and happy life with
Songza and never have searched or
browsed.”
The app’s sharing approach jibes with this, thanks to Facebook: “Seeing some-
thing in your feed, tapping it and having that open up right in your Songza
playlist is really consistent with what we’re trying to accomplish.”
Post-Open Graph, Facebook has become the number-one referral channel for
Songza. “Pre-Open Graph, it wasn’t on the map,” said Roman, who didn’t
disclose the size of Songza’s user base but did give us an idea of how important
Facebook is. “In the last 30 days, Open Graph integration generated somewhere
between 500,000 and 700,000 referrals for Songza. We’re a decent-sized
company—we’re not massive—and that’s a decent number for us.
Post-Open Graph,
Facebook has become the
number-one referral
channel for Songza.
4

TripAdvisor figured out the power of friends in the travel-planning process
before Facebook was even around. In the middle of the last decade, it launched
the TripAdvisor Traveler Network as a place where prospective travelers could
seek input on potential destinations from people they knew.
“It was the wisdom of friends layered in with the wisdom of crowds,” said Jamie
Conroy, director of product. He added, “The functionality was ahead of its time,
but it was pretty much an abject failure. No one wanted to create another
social network. They were perfectly happy with Friendster and MySpace.”
The explosive growth of Facebook gave TripAdvisor another shot, replacing the
traveler network with the social
graph. Even though Facebook users
aren’t typically in trip-planning
mode when they’re on the network,
social is still an important part of
the travel experience.
TripAdvisor launched its first
Facebook app back in 2007 and then
a few years later integrated Open
Graph, using it to display reviews
and opinions that are relevant to a
user’s searches. Using public data
from Facebook profiles and the Open Graph, TripAdvisor enhances and custom-
izes the travel data it already has. And of course Facebook allows users to
share the content with their friends.
Big results have followed the integration: average user engagement increased
27% and users connecting to TripAdvisor through Facebook were twice as likely
to contribute than those who weren’t connected. Over 1 billion Open Graph
actions have been published across mobile and desktop and more than a third
of TripAdvisor reviews are written by those who have Facebook connected.
The explosive growth of
facebook gave
TripAdvisor another shot,
replacing the traveler
network with the social
graph.
5

Mobile plays an important role in all this. Open Graph integration allows users
to sync hotels, restaurants and other attractions they’ve saved across devices.
That makes the planning process easier in an age when consumers move
seamlessly from device-to-device and expect the online services they use to do
the same. “It’s very effective glue that ties TripAdvisor across all different
devices we support,” Conroy notes. TripAdvisor has a mobile version of its
popular Cities I’ve Visited app that it plans to expand this year.
RunKeeper was one of the first apps to hit the Apple App Store back in 2008
and its success—14 million users and counting—proved to be an early validation
that social and fitness go hand-in-hand. The app helps runners, walkers, and
bikers track their performance—distance, time, calories burned and other
measures—and then share the data on social networks.
Staying ahead of the curve, the innovator was an OG OG, among the original
batch of Open Graph apps rolled out January 2012. RunKeeper has used Open
Graph to create fitness-oriented actions and objects. Stories get published to a
user’s timeline and added to a growing mass of personal fitness data. All that
sharing has deep ties to RunKeeper’s mission.
“Facebook plays an important role in motivating our users to achieve their
goals,” said product manager Jon Gilman. “It’s about keeping users honest,
keeping them accountable and supporting them when they need support. The
reverse is seeing your friends achieve your own fitness goals and get inspired
to embark on your own fitness journey.”
Open Graph offered RunKeeper an opportunity to create richer stories around
a user's fitness activities and goals. One improvement: RunKeeper was able to
send in GPS data with Open Graph stories. Users that had the right privacy
setting could show their friends a map of where they ran and stats detailing
6

their performance. Inserting this additional data into users’ social graphs
significantly increased member engagement and RunKeeper traffic. The map
specifically resulted in 55% improvement in impressions and a 233% improve-
ment in clicks.
Gilman said Runkeeper has been sticking with explicit shares—as opposed to
the implicit shares you might see with an app like Spotify—because location
data is sensitive. “But,” he said, “attaching more information to a post, being
able to show high-level stats from within Facebook as opposed to just surfacing
a link through the metatags really led to a lot of increase we saw in impres-
sions and clicks.”
Facebook, RunKeeper’s number-one
source of referrals, created a unique
non-location-sensitive visualization
that shows a bar chart of your runs
over time from a single Open Graph
post. Friends get context around
how active you've been recently,
giving more reasons to reach out.
RunKeeper has found that users
who post to Facebook on a regular
basis engage in an average of 150%
more activities than less social
users. Users who share are 40%
more likely to continue using RunKeeper. And for users who connect their
Facebook accounts to RunKeeper, there’s a 70% increase in the likelihood
they’ll do their first activity.
We’ve mentioned all these apps because they’re marriages of great design and
functionality and they stand as strong examples of where Open Graph develop-
ment should head. By now it should be clear how Open Graph integration
improves a variety of metrics, from discoverability and virality to engagement.
But there is a bit of friction.
7
J. Lannister
3 minutes ago via RunKeeper
like comment share
J. Lannister ran 6.2 miles using
RunKeeper.

It takes nothing away from these brilliant apps to say that Songza, TripAdvisor
and RunKeeper have advantages that most developers don’t. In the case of
Songza and RunKeeper, it’s venture backing. In TripAdvisor’s case it’s a long
history. By the time mobile was an issue for the 13-year-old company, it already
had a loyal user base built on the web.
The average developer is probably
someone more like Tope Abayomi,
founder of App Design Vault, a firm
that makes iPhone design
templates. Tope is getting set to
launch Shoespotting, an app that’s
sort of like uber-popular Foodspot-
ting, only for footwear. By connect-
ing to a shopping API, the iOS app
will take users through an endless
scroll of heels, pumps and flats
allowing them to express whether
they “like,” “have” or “want” the
shoes in question. After all, as a
member of Facebook’s Technology
Partner Program, Kinvey aims to make it easier for any developer to build Open
Graph apps
While the Open Graph API is straightforward, what’s less obvious is how to
work with it in a purely native—iOS or Android—app workflow. Open Graph
requires the hosting of HTML pages to represent each object shared by users’
stories. If the app doesn’t already have a web presence, there’s additional work,
8
ch 3
KinveyKinvey
Shoespotting

time and expertise required to create and store these web pages. This is where
Kinvey’s backend as a service (BaaS) platform plays a valuable role.
Without Kinvey, Tope would spend 25-30 hours on the Open Graph integration.
With Kinvey, that drops to six. Recent UX changes reduce integration time to
under an hour
“I don't have to organize or implement a server backend,” he says. “I can use
Kinvey's backend to actually implement servers for my app. I don't have to think
of scale. I don't have to think of managing servers, uptime, downtime and all
that.”
Kinvey provides a dedicated backend for apps (built on any platform) to store
files and application data, manage
users, and integrate with a variety
of external service providers. Our
Open Graph integration allows your
native app to publish stories to
users’ timelines. We dynamically
generate the HTML for the Open
Graph objects using our data
storage, geolocation, and image
storage features. There’s no need to
build a separate HTML server and
host dedicated web pages, so each
object can be as unique as you’d
like. Since the data is dynamic, making updates is simple and instant, without
having to rebuild and redeploy. To add a new field or object is as easy as typing
its name.
“Without Kinvey,” Tope said, “I'd have to come up with a web hosting solution,
putting pages there, either statically generating them or developing a whole
backend service in order to serve up those pages dynamically.”
Take our work with Scrumptious, a Facebook sample app. When we modified
Scrumptious to work with Kinvey’s SDK, we weren’t satisfied with the story title
Without Kinvey, Tope
would spend 25-30 hours
on the Open Graph
integration. With Kinvey,
that drops to six.
9

“Ed ate Cheeseburger” (where “eat” is the action and “Cheeseburger” is the
title of a specific meal object). We wanted it to say, “Ed ate a Cheeseburger.” We
also wanted to have the flexibility to say just “Ed ate Italian” when sharing an
Italian meal. Displaying the right indefinite article is done with an
og:determiner. To add a determiner in the hosted page model, you would have
to go back and update all the existing pages, checking each object for its name
and figuring out the appropriate determiner. With Kinvey, we just added a new
dynamic field to our mapping and suddenly our stories read properly.
When the story is displayed on a timeline, it provides links back to the app so
each user’s friends can download it, as well as links to view our hosted html.
But, if a user is viewing the story in a native app, clicking the link can open
your app. We support deep linking through the generated ID field in that link
because it relates to the object in the Kinvey data store. It’s easy to have the
app launch directly to the story by loading and then showing the specified
object, allowing friends to view and take actions in your apps.
For more information on how to get started integrating your native mobile app
into Facebook Open Graph, check out our Resources section.
10

Why you are using the service?
GSN Digital's Research and Advanced Development (RAD)
group is exploring new technologies to use in the burgeon-
ing mobile games market. Our approach is multi-pronged,
focusing primarily on the aspects of mobile that are most
problematic for classic gaming ecosystems. Advanced
gameplay validation and secure client storage ensure data
integrity, while cloud-based messaging provides an ultra-
fast head-to-head capability. By leveraging backend as a
service (BaaS) provider Kinvey, we've been able to create a
push-based game invite system that integrates seamlessly
with Facebook and users' friends’ lists. And Kinvey's Open
Graph integration makes it easy to create dynamic Open
Graph stories with little or no changes to client-side code
How does it compare to others or your old ways of developing?
Mobile developers building rich apps have different needs
than their web development counterparts. In the world of
mobile, the libraries are the new abstraction layer for the
mobile developer, not the API. We don't want to re-create
common functionality including data syncing, online-offline
support, user management and data security. Having proven
libraries that take care of such functionality is very efficient
for development.
ch 4
Questions & AnswersQuestions & Answers
11
with Bret Siarkowski
Vice president of research and development Game Show Network (GSN)

What does this do for you and your team?
The biggest advantage with BaaS is that it helps us
future-proof our mobile strategy through a self-service
platform. We can pick any SDK to build apps with and
can therefore build native or hybrid user experiences based
on the needs of the app. We can then tie any data or
authentication system to our apps, allowing our developers
to iterate and innovate quickly. We're able to avoid creating
silos for each app, which saves us time and money.
When would you not use it?
There's no technology barrier, per se. Only a procedural one.
Most enterprise systems have been architected over time to
be governed by specific IT usage policies. Developers can
only build mobile apps to access those systems through
BaaS when IT policies are extended to cater to the needs of
their mobile use cases. That will take some time, as adop-
tion of new technologies in the enterprise does.
How broadly applicable is it?
Kinvey's enterprise platform lets you 'mobilize' any enterprise
backend data source or authentication system. Over the past
10 years, every enterprise invested massive time and
resources building APIs in front of their data sources to create
web apps. To build effective mobile and tablet applications,
they now need a standardized mobile SDK. So from that
perspective, its applicability is as broad as web services and
SOA was for the web.
12

ResourcesResources
Tutorial
Open Graph
Sample Apps
CityWatch
Scrumptious
Documentation
Social Pr viders
Kinvey provides a Backend as a Service platform that allows
developers to reduce dramatically the time and cost of bringing
developers and enterprise developers alike. We are proud to have
been named to the Facebook Technology Partners Program for our
Open Graph integration.
Build your backend todayBuild your backend today

The Developer's Guide to Facebook Open Graph

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Empfohlen

Empfohlen (20)

The Developer's Guide to Facebook Open Graph