The Developer's Guide to Facebook Open Graph


Published on

Kinvey's eBook titled "The Developer's Guide to Facebook Open Graph" provides you with successful case studies, ideas about how to leverage Open Graph's actions in your app's core functionality and code to help you get started.

Published in: Technology
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

The Developer's Guide to Facebook Open Graph

  1. 1. J. Lannister36 minutes ago via Kinveylike comment shareJ. Lannister just made an appOpenGraph using Kinvey.Jenna Bird36 minutes ago via Kinveylike comment shareJenna just made an app thatOpenGraph using Kinvey.C. Lannister42 minutes ago via KinveyJenna just made an app thatOpenGraph using Kinvey.Brought to you by KinveyTheFacebook Open GraphFacebook Open GraphDeveloper’s GuideDeveloper’s Guideto
  2. 2. The Developer’s Guide to Facebook Open GraphIntroIntroAs app developers, we want to engage our users and help our apps spread asfar and wide as possible. Since it was launched in early 2012, Facebook OpenGraph has made this job easier by providing a simple way to integrate appsinto each user’s Facebook experience and social graph.Facebook Open Graph allows usersto share more contextual, data-richupdates in their timelines. Applica-tions that make use of Open Graphmake it easy, almost effortless, forusers to share these augmentedupdates by posting on the user’sbehalf, and, in return, enjoy wide-spread exposure to the user’s socialgraph. As of March 13, 2013, over400 billion Open Graph actions havebeen shared on Facebook, 110million songs, albums and radiostations have been played throughOpen Graph-integrated apps, andnearly 1.5 million books have beenshared.All told, this amazing amount of sharing has been made possible by twothings: Open Graph’s structured API and a bunch of compelling third-partyapps that have taken advantage of it.This eBook is divided into two parts. In the first, we’ll take you through a trioch 11J. Lannister36 minutes agolike comment shareJ. Lannister just took a photoof a hamburger at In-n-Outusing Hamburglar.Andy Walken36 minutes agoGreg Stitt just made an appOpenGraph using Kinvey.Greg Stitt just made an appOpenGraph using Kinvey.
  3. 3. The Developer’s Guide to Facebook Open Graphof 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 developmentresources or a web-centric view of the world. This matters because, to ourminds, there just hasn’t been as much native iOS and Android development aswe’d like to see, especially given the ascendance of mobile and the decline ofPCs.But we’ll get to that later. First, let’s take a spin through some of the best OpenGraph apps around.In this eBook, we’ll look at some of the most successful apps on Facebook andthen talk about how Kinvey can help “open” the Open Graph to an entirely newcategory of developer—you. After all, most popular Open Graph apps began as aWeb 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 makeit easier for any developer to build Open Graph apps.2
  4. 4. If Facebook and the Open Graph are all about frictionless sharing, then Songzais all about a frictionless music experience. “We don’t want you looking at thescreen,” said CEO Elias Roman. “We want you hanging out with your family, ordoing 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 sacrificingquality. That’s why sign-in (required on mobile but not the web) is quick andeasy through Facebook, whose network ensures you probably won’t have a coldstart. Most likely your friends are already there. Unlike a lot of other musicservices, the app doesn’t ask you to build playlists; it already has them expertlycurated for you. Or you can see what your friends have been listening to. Whenyou enter Songza, you see very clickable buttons asking you for, essentially,your mood or context. Want an energy boost? How about a background beat forthat Thursday afternoon impromptu get-together?The Open Graph makes many of these product features possible, but it alsohelps grow the business. Songza does “sonic brand consulting” for companies itlikes, such as Victoria’s Secret and Mercedes-Benz, for which it did a FashionWeek project. “Brands love that friends can see what other friends are listeningto,” Roman said. “It’s fun to experience brands in a social way rather than aspammy way and that’s made possible through our Open Graph integration.”ch 2Stand-outOpen Graph AppsStand-outOpen Graph Apps3
  5. 5. The Developer’s Guide to Facebook Open GraphSongza is a mobile-first company as far as Roman is concerned, meaning thatit’s all about optimizing for small screens and fat fingers. 75 percent ofconsumption is mobile. “It’s a way of thinking about a constrained world,” hesaid. “You have very small screens. You have very limited interactions.Anything that requires typing is completely unacceptable. Anything thatrequires more than your thumb isunacceptable.”So what does that mean for tradi-tional navigation on Songza?Here’s Roman again: “Search andbrowse, the staples of mostcompany’s navigations, are absolutepower features on Songza. You canhave a long and happy life withSongza and never have searched orbrowsed.”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 Songzaplaylist is really consistent with what we’re trying to accomplish.”Post-Open Graph, Facebook has become the number-one referral channel forSongza. “Pre-Open Graph, it wasn’t on the map,” said Roman, who didn’tdisclose the size of Songza’s user base but did give us an idea of how importantFacebook is. “In the last 30 days, Open Graph integration generated somewherebetween 500,000 and 700,000 referrals for Songza. We’re a decent-sizedcompany—we’re not massive—and that’s a decent number for us.Post-Open Graph,Facebook has become thenumber-one referralchannel for Songza.4
  6. 6. The Developer’s Guide to Facebook Open GraphTripAdvisor figured out the power of friends in the travel-planning processbefore Facebook was even around. In the middle of the last decade, it launchedthe TripAdvisor Traveler Network as a place where prospective travelers couldseek input on potential destinations from people they knew.“It was the wisdom of friends layered in with the wisdom of crowds,” said JamieConroy, 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 anothersocial network. They were perfectly happy with Friendster and MySpace.”The explosive growth of Facebook gave TripAdvisor another shot, replacing thetraveler network with the socialgraph. Even though Facebook usersaren’t typically in trip-planningmode when they’re on the network,social is still an important part ofthe travel experience.TripAdvisor launched its firstFacebook app back in 2007 and thena few years later integrated OpenGraph, using it to display reviewsand opinions that are relevant to auser’s searches. Using public datafrom Facebook profiles and the Open Graph, TripAdvisor enhances and custom-izes the travel data it already has. And of course Facebook allows users toshare the content with their friends.Big results have followed the integration: average user engagement increased27% and users connecting to TripAdvisor through Facebook were twice as likelyto contribute than those who weren’t connected. Over 1 billion Open Graphactions have been published across mobile and desktop and more than a thirdof TripAdvisor reviews are written by those who have Facebook connected.The explosive growth offacebook gaveTripAdvisor another shot,replacing the travelernetwork with the socialgraph.5
  7. 7. The Developer’s Guide to Facebook Open GraphMobile plays an important role in all this. Open Graph integration allows usersto sync hotels, restaurants and other attractions they’ve saved across devices.That makes the planning process easier in an age when consumers moveseamlessly from device-to-device and expect the online services they use to dothe same. “It’s very effective glue that ties TripAdvisor across all differentdevices we support,” Conroy notes. TripAdvisor has a mobile version of itspopular 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 2008and its success—14 million users and counting—proved to be an early validationthat social and fitness go hand-in-hand. The app helps runners, walkers, andbikers track their performance—distance, time, calories burned and othermeasures—and then share the data on social networks.Staying ahead of the curve, the innovator was an OG OG, among the originalbatch of Open Graph apps rolled out January 2012. RunKeeper has used OpenGraph to create fitness-oriented actions and objects. Stories get published to auser’s timeline and added to a growing mass of personal fitness data. All thatsharing has deep ties to RunKeeper’s mission.“Facebook plays an important role in motivating our users to achieve theirgoals,” said product manager Jon Gilman. “It’s about keeping users honest,keeping them accountable and supporting them when they need support. Thereverse is seeing your friends achieve your own fitness goals and get inspiredto embark on your own fitness journey.”Open Graph offered RunKeeper an opportunity to create richer stories arounda users fitness activities and goals. One improvement: RunKeeper was able tosend in GPS data with Open Graph stories. Users that had the right privacysetting could show their friends a map of where they ran and stats detailing6
  8. 8. The Developer’s Guide to Facebook Open Graphtheir performance. Inserting this additional data into users’ social graphssignificantly increased member engagement and RunKeeper traffic. The mapspecifically resulted in 55% improvement in impressions and a 233% improve-ment in clicks.Gilman said Runkeeper has been sticking with explicit shares—as opposed tothe implicit shares you might see with an app like Spotify—because locationdata is sensitive. “But,” he said, “attaching more information to a post, beingable to show high-level stats from within Facebook as opposed to just surfacinga link through the metatags really led to a lot of increase we saw in impres-sions and clicks.”Facebook, RunKeeper’s number-onesource of referrals, created a uniquenon-location-sensitive visualizationthat shows a bar chart of your runsover time from a single Open Graphpost. Friends get context aroundhow active youve been recently,giving more reasons to reach out.RunKeeper has found that userswho post to Facebook on a regularbasis engage in an average of 150%more activities than less socialusers. Users who share are 40%more likely to continue using RunKeeper. And for users who connect theirFacebook accounts to RunKeeper, there’s a 70% increase in the likelihoodthey’ll do their first activity.We’ve mentioned all these apps because they’re marriages of great design andfunctionality and they stand as strong examples of where Open Graph develop-ment should head. By now it should be clear how Open Graph integrationimproves a variety of metrics, from discoverability and virality to engagement.But there is a bit of friction.7J. Lannister3 minutes ago via RunKeeperlike comment shareJ. Lannister ran 6.2 miles usingRunKeeper.
  9. 9. It takes nothing away from these brilliant apps to say that Songza, TripAdvisorand RunKeeper have advantages that most developers don’t. In the case ofSongza and RunKeeper, it’s venture backing. In TripAdvisor’s case it’s a longhistory. By the time mobile was an issue for the 13-year-old company, it alreadyhad a loyal user base built on the web.The average developer is probablysomeone more like Tope Abayomi,founder of App Design Vault, a firmthat makes iPhone designtemplates. Tope is getting set tolaunch Shoespotting, an app that’ssort of like uber-popular Foodspot-ting, only for footwear. By connect-ing to a shopping API, the iOS appwill take users through an endlessscroll of heels, pumps and flatsallowing them to express whetherthey “like,” “have” or “want” theshoes in question. After all, as amember of Facebook’s TechnologyPartner Program, Kinvey aims to make it easier for any developer to build OpenGraph appsWhile the Open Graph API is straightforward, what’s less obvious is how towork with it in a purely native—iOS or Android—app workflow. Open Graphrequires 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,8ch 3KinveyKinveyShoespotting
  10. 10. The Developer’s Guide to Facebook Open Graphtime and expertise required to create and store these web pages. This is whereKinvey’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 tounder an hour“I dont have to organize or implement a server backend,” he says. “I can useKinveys backend to actually implement servers for my app. I dont have to thinkof scale. I dont have to think of managing servers, uptime, downtime and allthat.”Kinvey provides a dedicated backend for apps (built on any platform) to storefiles and application data, manageusers, and integrate with a varietyof external service providers. OurOpen Graph integration allows yournative app to publish stories tousers’ timelines. We dynamicallygenerate the HTML for the OpenGraph objects using our datastorage, geolocation, and imagestorage features. There’s no need tobuild a separate HTML server andhost dedicated web pages, so eachobject can be as unique as you’dlike. Since the data is dynamic, making updates is simple and instant, withouthaving to rebuild and redeploy. To add a new field or object is as easy as typingits name.“Without Kinvey,” Tope said, “Id have to come up with a web hosting solution,putting pages there, either statically generating them or developing a wholebackend service in order to serve up those pages dynamically.”Take our work with Scrumptious, a Facebook sample app. When we modifiedScrumptious to work with Kinvey’s SDK, we weren’t satisfied with the story titleWithout Kinvey, Topewould spend 25-30 hourson the Open Graphintegration. With Kinvey,that drops to six.9
  11. 11. The Developer’s Guide to Facebook Open Graph“Ed ate Cheeseburger” (where “eat” is the action and “Cheeseburger” is thetitle of a specific meal object). We wanted it to say, “Ed ate a Cheeseburger.” Wealso wanted to have the flexibility to say just “Ed ate Italian” when sharing anItalian meal. Displaying the right indefinite article is done with anog:determiner. To add a determiner in the hosted page model, you would haveto go back and update all the existing pages, checking each object for its nameand figuring out the appropriate determiner. With Kinvey, we just added a newdynamic 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 soeach 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 openyour app. We support deep linking through the generated ID field in that linkbecause it relates to the object in the Kinvey data store. It’s easy to have theapp launch directly to the story by loading and then showing the specifiedobject, allowing friends to view and take actions in your apps.For more information on how to get started integrating your native mobile appinto Facebook Open Graph, check out our Resources section.10
  12. 12. The Developer’s Guide to Facebook Open GraphWhy you are using the service?GSN Digitals 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 mostproblematic for classic gaming ecosystems. Advancedgameplay validation and secure client storage ensure dataintegrity, while cloud-based messaging provides an ultra-fast head-to-head capability. By leveraging backend as aservice (BaaS) provider Kinvey, weve been able to create apush-based game invite system that integrates seamlesslywith Facebook and users friends’ lists. And Kinveys OpenGraph integration makes it easy to create dynamic OpenGraph stories with little or no changes to client-side codeHow does it compare to others or your old ways of developing?Mobile developers building rich apps have different needsthan their web development counterparts. In the world ofmobile, the libraries are the new abstraction layer for themobile developer, not the API. We dont want to re-createcommon functionality including data syncing, online-offlinesupport, user management and data security. Having provenlibraries that take care of such functionality is very efficientfor 4Questions & AnswersQuestions & Answers11with Bret SiarkowskiVice president of research and development Game Show Network (GSN)
  13. 13. The Developer’s Guide to Facebook Open GraphWhat does this do for you and your team?The biggest advantage with BaaS is that it helps usfuture-proof our mobile strategy through a self-serviceplatform. We can pick any SDK to build apps with andcan therefore build native or hybrid user experiences basedon the needs of the app. We can then tie any data orauthentication system to our apps, allowing our developersto iterate and innovate quickly. Were able to avoid creatingsilos for each app, which saves us time and money.When would you not use it?Theres no technology barrier, per se. Only a procedural one.Most enterprise systems have been architected over time tobe governed by specific IT usage policies. Developers canonly build mobile apps to access those systems throughBaaS when IT policies are extended to cater to the needs oftheir mobile use cases. That will take some time, as adop-tion of new technologies in the enterprise does.How broadly applicable is it?Kinveys enterprise platform lets you mobilize any enterprisebackend data source or authentication system. Over the past10 years, every enterprise invested massive time andresources building APIs in front of their data sources to createweb apps. To build effective mobile and tablet applications,they now need a standardized mobile SDK. So from thatperspective, its applicability is as broad as web services andSOA was for the web.12
  14. 14. ResourcesResourcesTutorialOpen GraphSample AppsCityWatchScrumptiousDocumentationSocial Pr vidersKinvey provides a Backend as a Service platform that allowsdevelopers to reduce dramatically the time and cost of bringingdevelopers and enterprise developers alike. We are proud to havebeen named to the Facebook Technology Partners Program for ourOpen Graph integration.Build your backend todayBuild your backend today