Introduction: Open Graph is one of the core concept of facebook. It mainly deal with how you and entities in real word interact each other. Facebook shares user action (i.e. reading) with different objects (book, magazine)to the user’s timeline. In 2010, Facebook has introduced first version of Open graph, recently they have added Action Object model to open graph to extent Facebook experience.
At Space-O, we conducted a case study of implementing Open Graph Facebook Api in an iPhone application that deals with actions of users, below case study covers THREE areas, setting up FaceBook App, then creating & deploying PHP Code and Integrating the Facebook API in iPhone application.
Below are detailed steps:
Step 1) Managing Facebook app:
- First step towards the Open Graph app setup is to identify our ACTION and OBJECT. Let’s say Play is my action and Cricket is my object.
- Login into your Facebook account to which you want to setup Open graph. you can either create a new app or use an existing.
- Provide App name-name that going to display on wall and Namespace unique identifier of the app
- Then after provide your App Domains that you are going to use for object’s php file. Then Save change
- Go to app now and click on edit open graph or get started link under Open graph tab.
- You can see two text fields first one stands for action and second is for an object associated with that graph. We are set play as action and cricket as an object now. Click on get started.
- You will be redirected to Define Action type screen. For now no need to change anything just click on save changes and next.
- Same for define object screen. Just click on save changes and next.
- Now you are in third and final step, which is, create an aggregation. Choose Data to Display as your action from drop-down. Save and finish.
Step 2) Managing PHP object / code:
- The Open Graph Dashboard page has a ‘Get Code’ link next to object type(Book). This contains the Open Graph meta tags describing the object that you’ll need to include on your web page.
- Copy that code and create one php file.do not forgot to modify URL metatag,it should be same URL where you are going to upload php file.
- Here is the sample php object:
<head prefix=”og: http://ogp.me/ns# fb: http://ogp.me/ns/fb#spaceospaceo:http://ogp.me/ns/fb/spaceospaceo#”>
<meta property=”fb:app_id” content=”341773732564103″ />
<meta property=”og:type” content=”spaceospaceo:cricket” />
<meta property=”og:url” content=”Put your own URL to the object here” />
<meta property=”og:title” content=”Sample Cricket” />
<meta property=”og:image” content=”https://sstatic.ak.fbcdn.net/images/devsite/attachment_blank.png” />
Step 3) Managing xcode implementation:
- Create new Project and add Facebook connect framework,
- To send Open graph message to timeline of the wall send following request.
NSMutableDictionary *params = [[NSMutableDictionary alloc] initWithCapacity:1];
[params setValue:@”true” forKey:@”scrape”];
[params setValue:@”http://www.ennovata.com/wp-content/uploads/2011/12/testing.png” forKey:@”image”];
[params setValue:@”http://domainname.com/sports.php” forKey:@”testing”];
While doing the above steps please remember:
- Add extra parameter scrap with Bool value equals to yes so facebook ask for updates every time you send POST request.
- To change tens of the post (i.e. Reading book..)set start time and end time parameter of action accordingly.
- Add place parameter for showing map on timeline’s action, including tracking of GPS locations.
We have also tested the above implementation in Android Application and worked flawlessly, we had small challenges when it came to different devices, but then we found solutions around it.
If you have an iPhone / iPad (Apple iOS SDK) OR Android application that needs implementation on open graph feature, feel free to contact us for the same.
This case study was documented and contributed by Sunil Vaishnav, iPhone App Developer at Space-O Technologies and Tarun Patel took an initiative of implementing the same as Android App.