J. Lannister36 minutes ago via Kinvey

like comment share

J. Lannister just made an app that posts to facebookʼs OpenGraph using Kinvey.

Jenna Bird36 minutes ago via Kinvey

like comment share

Jenna just made an app that posts to facebookʼs OpenGraph using Kinvey.

C. Lannister42 minutes ago via Kinvey

Jenna just made an app that posts to facebookʼs OpenGraph using Kinvey.

Brought to you by Kinvey A Facebook Technology Partner

The

Facebook Op� Gra�Facebook Open GraphDeveloper’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. Lannister36 minutes ago

like comment share

J. Lannister just took a photo of a hamburger at In-n-Out using Hamburglar.

Andy Walken36 minutes ago

Greg Stitt just made an app that posts to facebookʼs OpenGraph using Kinvey.

Greg Stitt just made an app that posts to facebookʼs OpenGraph using Kinvey.

The Developer’s Guide to Facebook Open Graph

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

St�d-out Op� Gra� Apps

Stand-out Open Graph Apps

3

The Developer’s Guide to Facebook Open Graph

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

The Developer’s Guide to Facebook Open Graph

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

The Developer’s Guide to Facebook Open Graph

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

The Developer’s Guide to Facebook Open Graph

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. Lannister3 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

�vey�nvey

Shoespotting

The Developer’s Guide to Facebook Open Graph

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

The Developer’s Guide to Facebook Open Graph

“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

The Developer’s Guide to Facebook Open Graph

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 SiarkowskiVice president of research and development Game Show Network (GSN)

The Developer’s Guide to Facebook Open Graph

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

CityWatchScrumptious

Documentation

Social Providers

Kinvey provides a Backend as a Service platform that allows developers to reduce dramatically the time and cost of bringing mobile apps to market. We offer editions designed for individual

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