Mobile Backend as a Service (MBaaS) Blog

How to Build Facebook Open Graph Apps for Mobile Devices

Facebook-Technology-Partner-Logo-LightBGToday, we are thrilled to be named one of the companies in Facebook’s Technology Partners Program. This blog post is a kick-off to the program. For more information, check out our press release – meanwhile, let’s talk about Open Graph.

As app developers, we want to engage our users and drive the spread of our apps, and integrating with Facebook’s Open Graph provides an easy way to do this. 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. Specifically, 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, it’s not obvious how to create and store these web pages. This is where Kinvey’s backend-as-a-service (BaaS) plays a valuable role.

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. It takes no work to add new objects and fields.

For example when we modified Scrumptious to work with Kinvey’s SDK, we weren’t satisfied with the title “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,” but still 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. In the hosted page model, to add a determiner, 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.

Screen shot 2013-04-18 at 11.11.14 AM

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 example, the Game Show Network is using the integration to allow users to invite their friends to play games, and share their app experiences. This allows them to create a viral buzz and increase participation in their games.

To learn more about Open Graph, and to see examples of apps that have had great success with OG, check out our eBook: “The Developer’s Guide to Facebook Open Graph.”

Come visit our site to see sample apps and tutorials, and get started today building beautiful social apps. http://www.kinvey.com/facebook-open-graph-for-mobile-apps

let's talk about this computer

Starting a new mobile project? Check out our App Cost Estimator for a price quote.

comments powered by Disqus