What's New on The Facebook Platform, October 2011

1

All materials contained within this presentation are copyright Syncapse Corp. 2011. Reproduction or distribution is prohibited.

SYNCAPSE | New York | Toronto | London | Portland

WHAT’S NEW ON THE FACEBOOK PLATFORM, OCTOBER 2011

Iskandar Najmuddin19th October 2011Facebook Developer Garage London

2



I {actioned} THIS {object} USING {app}

3



The HTTPS deadline for Canvas and Tab apps.

• No SSL? No more users. Bye bye!

• So check your Tabs, if you got ‘em.

• Use the setAppProperties (REST API) to set secure URLs en-masse

• FBML apps work, but check externally-loaded resources, avoid ‘mixed content’ messages.

OAuth 2.0 now enabled by default

• Use PHP SDK >= 3.1.1

• Set oauth:true in FB JS SDK

• Watch out for JS cookie vs. session ‘code’ conflicts, though

October 1st – The Modern FB Platform

4



More methods, more objects

• Manage Notifications

• Manage Events

• Read Friend Requests

• Manage banned App users

• Manage App migrations

• Set App restrictions

• Read Game Achievements

Any reasons left to use the REST API?

Graph API Updates

5



Allows users to decline permissions individually. This is great for everyone!

Apps should now

• Validate user permissions before attempting an action

• Gracefully handle failures due to missing permissions

What to do• Use the Graph API to check permissions and FB.login to request missing ones.

• Or use the Real-Time API to cache existing permissions for each user.

• Use new Insights to see which permissions get rejected and tune your app accordingly.

• Check out Authenticated Referrals: Automatic permissions when users come to your app from FB.

New Auth Dialog

6



New Auth Dialog Example

7



See ALL of your Facebook activity over time.

• Add historical events and content.

• Check-in mapping.

• More expression• Highlight Timeline Stories• Use clever Cover images

• And Application Content too!

• Available for Developers now, but not fully launched yet.

Timeline is The New Profile

8



The Ticker is a near-real-time firehose of connection activity stories.

• Perfect for light touch, ‘trivial’ content.• Is this where those damn Farmville stories belong?

• Apps can Publish Stories to the Ticker without user confirmation.

Ticker is a Firehose

9



Some stories will be promoted to the News Feed, if the Graph Rank AI deems them worthy.

Ticker | Graph Rank = News Feed

Ticker Story

Graph RankInternational AI of Mystery

News Feed

Worthy?Full Story

10



“Friction-less” requests can skip confirmation dialog.

• But only if all the ‘to’ UIDs have been approved by the user at least once.

Breaking Change:

Callback response data structure changed to contain array of UIDs in the to property.

Requests 2.0 Updates

January 1, 2012 - existing apps will be opted into the Request 2.0 migrations!

11



The first provider: Heroku

Clicky clicky clicky – now you have a hosted app running in that there cloud.

Heroku supports:

• PHP (warning: docs are sparse)

• Node.js

• Python

• Ruby

$ git push origin master

… heroku does some magic

… And now your app is updated

Free for low-traffic apps!

Cloud Service Integration

12



Bookmarking, Requests, all work nicely.

• But still no Page Tabs anywhere Mobile.

Native Facebook apps (iOS, Android) know to open your app as:

1. Native Mobile or

2. Mobile Web

Credits on Mobile supported, but not in native iOS apps (thanks a lot, iTunes)

Your Mobile Web app will work inside the Facebook Native App chrome.

Mobile Web Apps

13



In the iPad Facebook App:

Mobile Web Apps – Basic Auth Dialog

14



In the iPad Facebook App:

Mobile Web App - Example

15



OPEN GRAPH BETA

16



Open Graph BetaWhat’s it about?

“With the Open Graph, your app becomes a part of the user’s identity and social graph.

Through a single API, you’re able to deeply integrate into the key points of distribution on Facebook: Timeline, App Views, News Feed, and Ticker. …With the Open Graph, you’ll be able to create a deep, persistent connection between you and your users, and drive new users to your app.”

From https://developers.facebook.com/docs/beta/

17



Open Graph BetaSay What?

For Developers• Invent new ways for users to interact with your content.• Lots of new methods to raise app visibility.• More connections, more data = more WIN!

But note• It’s all beta, baby• When do Custom Actions launch? undefined

Oh No!Matt throws Danout the window

18



Open Graph BetaNodes and Lines

Objects are Nodes• Facebook own their Social Graph Nodes

• Users, Pages, Groups, Events, etc• You can create your own Nodes

Actions are Lines • AKA Edges or Connections• Facebook own some Actions

• Like, Recommend, Friend, etc• You can create your own Actions

You can now connect Nodes together using your own Actions.

19



Open Graph, not so long ago

• Create your own Objects

• Use Facebook’s Object Types or define your own

• Social Graph users can do • Facebook-defined actions on your Objects.

20



Open Graph, today

• Create your own detailed Object Types and Actions in your app Namespace.

• Social Graph users can do• Facebook-defined actions on your Objects• Custom actions on your Objects• Custom actions on Facebook-defined Objects

21



Click on the Open Graph link in the App Settings menu.

Create and manage Actions, Object Types, and Aggregations.

But there is NO API access for any of this yet, so get ready for lots of browser-driving

Get Started – The Open Graph Dashboard

22



1. Name it

2. Add custom properties

3. Inflect it

Set up Custom Object Types

23



Tweak your OG metadata

1. Add prefix namespaces to the head element

2. Add your app namespace to the og:type meta content

<head prefix="og: http://ogp.me/ns# my_ns: http://ogp.me/ns/apps/my_ns#">

<meta property="fb:app_id" content="278839975471035"/>

<meta property="og:locale" content="en_US" />

<meta property="og:title" content="Pineapple Pizza Slice" />

<meta property="og:type" content="my_ns:pizza_slice" />

<meta property="og:image" content="http://domain/pineapple-pizza-slice.jpg" />

<meta property="og:url" content="http://domain/pineapple-pizza-slice" />

<meta property="og:description" content="Cheese and fruit, a tropical sensation" />

<meta property="og:site_name" content="FDGL October 2011 App" />

snip

Custom Object – Creating an instance

24



Custom Actions will need to be submitted and approved by Facebook

• FB have proposed a 48-hour turnaround

• Positive actions preferred (so probably no Unlike action, sorry!)

Set up Custom ActionsUse the massive UI in the Facebook Developer App. It’s seriously huge.

25



1. Choose the type of data to Display and the linked Action.

2. Choose a Style

3. Set up sorting and captions

4. Preview

Set up Aggregations

26



Users will see Aggregation Previews in the Auth Dialog.

1. Create Preview Objects• These are just dummy

Objects for presentation

2. Create Preview Actions• Link Actions to Preview

Objects

Set up Aggregation Previews

27



Aggregation Example

Aggregations show on a user’s Timeline after they have completed at least 6 actions.

28



Get publish_actions permission from the user.

Create an Action instance: Graph API & JS SDKvar url = ‘/me/my_app_ns:action_id?object_type=https://object/opengraph/url’;

FB.api(url, 'post', function(response) { console.log(response); });

A Real-ish Example:POST /me/my_ns:chow_down_on?pizza_slice=http://domain/pineapple-pizza-slice

Custom Actions – Creating an instance

29



• Ticker & Ticker Fly-Out

• News Feed• If promoted from the Ticker

• Timeline – Feed Stories• If recent and not yet aggregated

• Timeline – Featured Stories• If user chooses to highlight the story

• Timeline – Recent Activity• If app used frequently/recently (unclear)

• Timeline – Aggregations• If > 6 Actions taken by the user

Let’s have a look!

Custom Actions – Where do they show?

30



Custom Actions, Ticker & Fly-out

31



Custom Actions in News Feed

This story was aggregated, nice.

32



Custom Actions on Timeline:Feed Stories

A Single Action

Multiple Actions

33



Custom Actions on Timeline:Featured Story

Users can choose to Feature a story on their Timelines. I love pizza.

34



Custom Actions on Timeline:Recent Activity

35



Custom Actions on Timeline:Aggregations

36



Open Graph BetaIn Use By

Lots of Media partners:• Netflix• Spotify• The Guardian• The Independent• Yahoo!• And others

See more here:https://developers.facebook.com/showcase/

https://developers.facebook.com/showcase/

37



IMPORTANT BREAKAGESAND DATES

38



Roadmapping

FBML Hell to End. JOY!• No bugfixes after Jan. 1st 2012

– Except for security fixes

• All FBML endpoints smashed by sledgehammers on June 1st 2012

Other dates• Nov. 1st, 2011: manage_notifications permission required to, yes, manage notifications

• Dec. 1st, 2011: Dashboard APIs shut down & App Bookmark URL removed

• Jan. 1st, 2012

– FB.Data JS SDK APIs removed

– FB.Canvas.setAutoResize renamed to FB.Canvas.setAutoGrow

– Apps auto-migrated to Requests 2.0

• Feb. 1st, 2012: canvas_name removed from App properties in favor of namespace

39



IF I TALKED REALLY FAST, WE MAY HAVE TIME FOR QUESTIONS. DO WE? And see you next time!

Ask me about social media, technology, or eggs:• [email protected]• twitter.com/iskandar• +44(0)207.096.0146

Documents

What's New on The Facebook Platform, October 2011