Categories
Drupal Planet Facebook Development iPhone Development

Drupal 7 + Facebook Open Graph + Timeline = iPhone app

We’re steadily getting closer to a vision of the semantic web – and it’s being driven by Facebook through their Open Graph Protocol. Open Graph came out in 2010, and it initially supported a large set of different object types and properties (for instance, music, article, book) – very interesting, but there are certainly more object types now!

In my case, I wanted to create an app for keeping track of highpoints, which are the highest point in each US state (for instance, Mount Whitney in California). Users can “summit” a highpoint, and then share that on their Facebook Timeline through an iPhone app I’m working on:

To support the Open Graph Protocol, you’ll need Drupal to provide meta tags for Facebook to parse. There are several modules in this space, but the momentum appears to be with the D7 module Metatag. Metatag is great, but it does not support custom Open Graph types (in the November dev release, anyway), so I had to modify the Open Graph module to add my “highpointer:highpoint” Open Graph type, and it’s custom properties – state and height. I also had to add “fb:app_id” as a custom type, because I didn’t want to use the Drupal for Facebook module just yet for this project. The next step would be to make this more flexible.

You’ll need to create an app as a Facebook Developer, then configure its Open Graph type, action, and properties. Your iOS or Android app can make one call to the Facebook API to tell Facebook that your user has summited a highpoint, or read a book, or whatever your site does. Then, in their Facebook Timeline, your app’s Aggregation will show up:

Right now, the Facebook iOS SDK Single Sign On does not work with the code samples they provide and the current version of the Facebook mobile app and iOS 5. The workaround is to either authenticate through Mobile Safari to the mobile version of Facebook’s web site, or put up a Facebook login dialog box in your app for the user to authorize your app. I went with the login dialog box:

Toolbar icons and app background are from MediaLoot, which is a great graphic design resource, and well worth the money.

Some of the third party iPhone libraries I relied on:

Categories
Facebook Development

Facebook Open Graph Developer Day 2011

Notes from the Facebook Open Graph Developer Day in Austin on November 2, 2011

Spent a productive day listening to Facebook presentations around the changes and improvements to Open Graph that were announced at f8 2011. Facebook is really pushing for the vision of the Semantic Web that has been around for years, using their Open Graph syntax. Really interesting to see how they are working with nouns, verbs, and aggregations – the new Facebook Timeline is a perfect fit for my EveryMarathon marathon calendar app.

Much of the presentation was targeted to information I’d already seen after setting up Open Graph for marathons, but it was nice to see what Facebook was letting app developers do with Aggregations and Achievements.

Improved authentication dialog:

  • Show the users what Timeline aggregations they’ll be doing
  • Find conversion percentages based on which actions you ask to allow

Aggregations:

Can show min or max of items in the array – can also pluralize so, “Jeff has finished 1 marathon” or “Jeff has finished 55 marathons”

Facebook for Mobile:

  • Bookmarks go to mobile web site from m.facebook.com, native apps on iOS and Android – configure in your app settings under Native Mobile Apps
  • Open Graph works with both
  • Should be able to publish Open Graph actions to timelines that then point to an existing mobile app or mobile web site.

Next Steps for Mobile Apps:

  • Integrate Single Sign On into native app
  • Create a mobile web app
  • Can use Facebook plugin for Phone Gap for mobile web apps
  • Configure mobile web URL in the developer app
  • Build in your social components

Cloud Services

  • Facebook set this up so that you can publish your Open Graph data on a server so their crawlers can access it