open graph - how to connect all the things - allfacebook devcon berlin 2012

65
thanks for the ad(d). Open Graph - How to connect all the things AllFacebook DevCon, Berlin 11/2012 Michael Kamleitner, Die Socialisten Open Graph - How to connect all the things. http://die.socialisten.at Michael Kamleitner, Die Socialisten

Upload: die-socialisten

Post on 09-May-2015

5.071 views

Category:

Technology


1 download

DESCRIPTION

1 Year into Facebook's Open Graph platform: Apps, Actions & Analytics. AllFacebook DevCon 2012 Keynote by Michael Kamleitner, Die Socialisten

TRANSCRIPT

Page 1: Open Graph - How to connect all the things - AllFacebook DevCon Berlin 2012

thanks for the ad(d).

Open Graph - How to connect all the thingsAllFacebook DevCon, Berlin 11/2012Michael Kamleitner, Die Socialisten

Open Graph - How to connect all the things.

http://die.socialisten.atMichael Kamleitner, Die Socialisten

Page 2: Open Graph - How to connect all the things - AllFacebook DevCon Berlin 2012

die.socialisten.atsocial network development

About: Die Socialisten"Die Socialisten" is a Vienna-based social-software agency focussing on the design & implementation of apps and marketing-solutions on social web platforms like Facebook.

To date, we have successfully built more than onehundred brand-pages, applications and integrations of external websites.

Our clients include Red Bull, Axel Springer/Bild.de, Bertelsmann, FTD, Krone Multimedia, ATV and Hitradio Ö3. "Die Socialisten" are Austria's first agency listed in the official "Facebook Preferred Marketing Developer"-program.

http://die.socialisten.at | http://facebook.com/diesocialisten

Page 3: Open Graph - How to connect all the things - AllFacebook DevCon Berlin 2012

die.socialisten.atsocial network development

Timeline & Open Graph:1 Year later: Apps, Actions & Analytics

Photo: Chip.de

Page 4: Open Graph - How to connect all the things - AllFacebook DevCon Berlin 2012

http://die.socialisten.atSocial Software Development

Timeline & Open Graph:Opportunities

- Social Graph Integration: Open Graph Protocol (OGP) was just the beginning!

- Social Graph Customization: Objects, Actions, Aggregations

- User Growth & Distribution: Newsfeed, Ticker, Timeline

- Personalization: Facepile & other Social Plugins

- Cross-Platform: Web, Mobile (Native/Web), Devices ...

More: https://developers.facebook.com/docs/technical-guides/opengraph/

Page 5: Open Graph - How to connect all the things - AllFacebook DevCon Berlin 2012

http://die.socialisten.atSocial Software Development

Page 6: Open Graph - How to connect all the things - AllFacebook DevCon Berlin 2012

7 Rules:Designing great Open Graph-Apps

Page 7: Open Graph - How to connect all the things - AllFacebook DevCon Berlin 2012

die.socialisten.atsocial network development

Bye bye, FB.ui({method:‘feed’},...)

Page 8: Open Graph - How to connect all the things - AllFacebook DevCon Berlin 2012

http://die.socialisten.atSocial Software Development

Bye bye, FB.ui({method:‘feed’,...})

Good ol’ Wall-Posting is losing relevance:

- Feed-dialogue is bugging users!

- Feed-dialogue will mostly get cancelled anyway!

- Feed-publish in the background (/me/feed) is sleazy.

- Stories published via Feed-dialogue look always the same (title, description, image, user message)

- Distribution of Wall-Postings on Newsfeed is decreasing, and fast!

Page 9: Open Graph - How to connect all the things - AllFacebook DevCon Berlin 2012

http://die.socialisten.atSocial Software Development

Distribution Feed-dialogue:

March ’12: 130x

July ’12: 68x

Oct. ’12: 31x

Insights taken from same app, Feed-stories haven’t been changed content-wise!

Comparison: DistributionFeed-dialogue vs. Open Graph Action

Page 10: Open Graph - How to connect all the things - AllFacebook DevCon Berlin 2012

http://die.socialisten.atSocial Software Development

Comparison: DistributionFeed-dialogue vs. Open Graph Action

Distribution Feed-dialogue:

Oct. ’12: 31x

Distribution of Open Graph-action:

Oct. ’12: 126x

Distribution will vary according to content and type of action!Examined action was optimized content-wise!

Page 11: Open Graph - How to connect all the things - AllFacebook DevCon Berlin 2012

http://die.socialisten.atSocial Software Development

Rule #1:

Each story that is currently published via Feed-dialogue or /me/feed,could potentially reach a greater audience when implemented as Open Graph-action!

Page 12: Open Graph - How to connect all the things - AllFacebook DevCon Berlin 2012

http://die.socialisten.atSocial Software Development

Page 13: Open Graph - How to connect all the things - AllFacebook DevCon Berlin 2012

http://die.socialisten.atSocial Software Development

Guideline:Passive Sharing / Content Consumption

Passive Sharing = Open Graph-actions which are published automatically without any explicit user-interaction.

Mostly used for actions in the area of Content Consumption - i.e. users consuming articles, videos, music...

Mostly implemented as Built-in Action (“read”, “listen”, “watch”)

Examples: Washington Post- & other Social Readers, Spotify ...

Users’ Perception & Acceptance of Passive Sharing was quite challenging to begin with, even when Open Graph started.

Page 14: Open Graph - How to connect all the things - AllFacebook DevCon Berlin 2012

http://die.socialisten.atSocial Software Development

The dark side of Passive Sharing:

Some apps have been abusing Passive Sharing for actions which had nothing to do with Content Consumption. They also failed to clearly communicate the automatic nature of Passive Sharing to their users.

Starting February 2013:

Passive Sharing for Custom Actions will be forbidden!

Authenticated Referrals will be removed – the “Viral Loop” of Passive Sharing will therefor be clearly diminished!

But: Custom Actions actively shared are here to stay!

Guideline:Passive Sharing / Content Consumption

Page 15: Open Graph - How to connect all the things - AllFacebook DevCon Berlin 2012

http://die.socialisten.atSocial Software Development

Since Summer 2012:

Reach & visiblity of Built-in Actions in Newsfeed (“Trending Articles”, “Trending Videos”) have clearly been reduced by Facebook!

Built-in Actions “Watch” & “Read” show up in Ticker very, very rarely (or not at all - to-be-confirmed)!

Guideline:Passive Sharing / Content Consumption

Page 16: Open Graph - How to connect all the things - AllFacebook DevCon Berlin 2012

http://die.socialisten.atSocial Software Development

OG-Launch 2011

Summer 2012

Page 17: Open Graph - How to connect all the things - AllFacebook DevCon Berlin 2012

http://die.socialisten.atSocial Software Development

Page 18: Open Graph - How to connect all the things - AllFacebook DevCon Berlin 2012

http://die.socialisten.atSocial Software Development

Page 19: Open Graph - How to connect all the things - AllFacebook DevCon Berlin 2012

http://die.socialisten.atSocial Software Development

Example: “Read”-Action

Period: June-July 2012

MAU: 125.000

Actions: 166.000x “Read” published

Impressions: 24.7mio (149x)

CTR: 0.87%

Distribution: No Insights-data available!

Page 20: Open Graph - How to connect all the things - AllFacebook DevCon Berlin 2012

http://die.socialisten.atSocial Software Development

Example: “Read”-Action

Period: September-October 2012

MAU: 100.000

Actions: 81.000x “Read” published

Impressions: 1.2mio (15x)

CTR: 0.85%

Distribution: Insights-data f. Ticker might be flawed!

Page 21: Open Graph - How to connect all the things - AllFacebook DevCon Berlin 2012

http://die.socialisten.atSocial Software Development

Example: “Watch”-Action

Period: March-April 2012

MAU: Max 11k

Actions: 12.000 “Watch” published

Impressions: 3.3mio (268x)

CTR: 1.4%

Distribution: No Insights-data available!

Page 22: Open Graph - How to connect all the things - AllFacebook DevCon Berlin 2012

http://die.socialisten.atSocial Software Development

Example: “Watch”-Action

Period: September-October 2012

MAU: Max 11k

Actions: 382 “Watch” published

Impressions: 9.200 (24x)

CTR: 0.75%

Distribution: Insights-data f. Ticker might be flawed!

Page 23: Open Graph - How to connect all the things - AllFacebook DevCon Berlin 2012

http://die.socialisten.atSocial Software Development

Rule #2:

Passive Sharing with Built-in Actions (!) is still OK for content-heavy apps & sites.

But: please say goodbye to uber-optimistic expectations in regardto distribution. Also, be extra-fair to your users when publishing passively...

Page 24: Open Graph - How to connect all the things - AllFacebook DevCon Berlin 2012

http://die.socialisten.atSocial Software Development

http://apps.facebook.com/meinklub

Clear indication with popup/overlay when action is published, easy Undo!

Page 25: Open Graph - How to connect all the things - AllFacebook DevCon Berlin 2012

http://die.socialisten.atSocial Software Development

http://apps.facebook.com/meinklub

Clear indication with popup/overlay when action is published, easy Undo!

Page 26: Open Graph - How to connect all the things - AllFacebook DevCon Berlin 2012

http://die.socialisten.atSocial Software Development

http://apps.facebook.com/meinklub

Easily accessible option for permanent opt-out, historical action-log with undo.

Page 27: Open Graph - How to connect all the things - AllFacebook DevCon Berlin 2012

Open Graph Custom Actions

Page 28: Open Graph - How to connect all the things - AllFacebook DevCon Berlin 2012

http://die.socialisten.atSocial Software Development

Guideline: Open Graph Custom Actions

Recommendation: Design 4-5 Custom Actions per app, ideally:

- Custom Actions modelled after existing user-interactions in app

- Actions having a low entry-barriere for user (“1-click action”)

- Actions with big volume (many actions = more impressions)

- Actions designed with nice OG-Tags (title, desc, image, video...)

- Actions with rich metadata & connections to other objects

- Actions crosslinked with Action-Links

Page 29: Open Graph - How to connect all the things - AllFacebook DevCon Berlin 2012

http://die.socialisten.atSocial Software Development

http://apps.facebook.com/lastfm-og-scrobbler/

Page 30: Open Graph - How to connect all the things - AllFacebook DevCon Berlin 2012

http://die.socialisten.atSocial Software Development

Page 31: Open Graph - How to connect all the things - AllFacebook DevCon Berlin 2012

http://die.socialisten.atSocial Software Development

Example: Custom Action “Scrobble”http://apps.facebook.com/lastfm-og-scrobbler/

Period: March-November 2012

MAU: Max 85k

Actions: 150mio “Scrobble” published

Impressions: 1.7 billion (12x)

CTR: 0.27%

Distribution: Ticker (56%), Newsfeed (26%), Timeline (18%)

Page 32: Open Graph - How to connect all the things - AllFacebook DevCon Berlin 2012

http://die.socialisten.atSocial Software Development

Recommendation: Actions with “Explicit Sharing”:

Useful for Actions that represent a clear “user-intent”!http://developers.facebook.com/docs/technical-guides/opengraph/explicit-sharing/

Actions published with “Explicit Sharing” are currently always displayed on publishers Timeline-profile.

Actions published with “Explicit Sharing” offer better distribution on Newsfeed of publishers friends.

Guideline: Open Graph Custom Actions

Page 33: Open Graph - How to connect all the things - AllFacebook DevCon Berlin 2012

http://die.socialisten.atSocial Software Development

Not allowed for “Explicit Sharing”:

- Built-in Actions, Passive Sharing

- Actions with low entry-barriere: “Like”, “Favorite” ...

- Actions with high volume and low information: “Follow”, “Friend” ...

- Actions occuring during gameplay: “Playing”, “Building”, “Achieved” ...

Guideline: Open Graph Custom Actions

Page 34: Open Graph - How to connect all the things - AllFacebook DevCon Berlin 2012

http://die.socialisten.atSocial Software Development

Very suitable for “Explicit Sharing”:

- Content generated by the user: photos, videos ...

- Text manually entered by the user: comments, postings ...

- Actions with geo-location: checkins ...

Guideline: Open Graph Custom Actions

Page 35: Open Graph - How to connect all the things - AllFacebook DevCon Berlin 2012

http://die.socialisten.atSocial Software Development

Page 36: Open Graph - How to connect all the things - AllFacebook DevCon Berlin 2012

http://die.socialisten.atSocial Software Development

How-to: “Explicit Sharing”

- Activate migration-setting (Default for new apps):

Guideline: Open Graph Custom Actions

Page 37: Open Graph - How to connect all the things - AllFacebook DevCon Berlin 2012

http://die.socialisten.atSocial Software Development

How-to: “Explicit Sharing”

- Activate migration-setting (Default for new apps):

- When publishing: fb:explicit_sharing = true

Guideline: Open Graph Custom Actions

Page 38: Open Graph - How to connect all the things - AllFacebook DevCon Berlin 2012

http://die.socialisten.atSocial Software Development

How-to: “Explicit Sharing”

- Activate migration-setting (Default for new apps):

- When publishing: fb:explicit_sharing = true

- “Explicit Sharing” has to be approved for each action!

Guideline: Open Graph Custom Actions

Page 39: Open Graph - How to connect all the things - AllFacebook DevCon Berlin 2012

http://die.socialisten.atSocial Software Development

Explicit: Custom Action “Love” with Explicit Sharinghttp://apps.facebook.com/lastfm-og-scrobbler/

Period: October-November 2012

MAU: Max 85k

Actions: 7.500 “Love” published

Impressions: 380.000 (51x)

CTR: 0.70%

Distribution: Timeline (71%), Newsfeed (17%), Ticker (11%)

Page 40: Open Graph - How to connect all the things - AllFacebook DevCon Berlin 2012

http://die.socialisten.atSocial Software Development

Recommendation: Actions with “User Message”:

Publish actions with additional text-messages manually entered by the publishing user.https://developers.facebook.com/docs/opengraph/actions/

Actions published with “User Message” are currently always displayed on publishers Timeline-profile.

Therefor: no sense in publishing Actions with both “User Message” and “Explicit Sharing”.

Guideline: Open Graph Custom Actions

Page 41: Open Graph - How to connect all the things - AllFacebook DevCon Berlin 2012

http://die.socialisten.atSocial Software Development

Page 42: Open Graph - How to connect all the things - AllFacebook DevCon Berlin 2012

http://die.socialisten.atSocial Software Development

Recommendation: Actions with “User Message”:

“User Message” has to be approved for each action!

Guideline: Open Graph Custom Actions

Page 43: Open Graph - How to connect all the things - AllFacebook DevCon Berlin 2012

http://die.socialisten.atSocial Software Development

Example: Custom Action “Comment” with User Messagehttp://apps.facebook.com/lastfm-og-scrobbler/

Period: October-November 2012

MAU: Max 85k

Actions: 361 “Love” published

Impressions: 15.800 (44x)

CTR: 1.3%

Distribution: Newsfeed (41%), Timeline (41%), Ticker (18%)

Page 44: Open Graph - How to connect all the things - AllFacebook DevCon Berlin 2012

http://die.socialisten.atSocial Software Development

Rule #3:

Design your app with 4-5 Custom Actions. For better distribution, enable “Explicit Sharing” or “User Messages” for 2-3 suitable Actions!

Good Custom Actions have high volume & low entry-barriere for the user!

Page 45: Open Graph - How to connect all the things - AllFacebook DevCon Berlin 2012

http://die.socialisten.atSocial Software Development

Type Example Total Impressions/Factor

Referrals/CTR

Distribution

Built-In “Read” 81.000 1.200.000 (x15)

10.500(0.85%)

Newsfeed (99.73%), Timeline (0.27%), Ticker (0%)

Built-In “Watch” 380 9.200(x24)

70(0.75%)

Newsfeed (78%), Timeline (12%), Ticker (0%)

Custom “Scrobble” 150.000.000 1.700.000.000 (x12)

4.6mio(0.27%)

Ticker (56%), Newsfeed (26%), Timeline (18%)

Custom / “Explicit Sharing”

“Love” 7.600 380.000(x51)

2.700(0.7%)

Timeline (71%), Newsfeed (17%), Ticker (11%)

Custom / “User Message”

“Comment” 360 15.800(x44)

206(1.3%)

Newsfeed (41%), Timeline (41%),Ticker (18%)

Custom / “Geo-Location”

“Checkin” 70 4.300(62x)

20(0.46%)

Ticker (44%), Newsfeed (33%), Timeline (23%)

Guideline: Distribution of Open Graph-Actions

Page 46: Open Graph - How to connect all the things - AllFacebook DevCon Berlin 2012

Optimize Custom Actions

Page 47: Open Graph - How to connect all the things - AllFacebook DevCon Berlin 2012

http://die.socialisten.atSocial Software Development

Guideline: Optimize Custom Actions

Actions published with “Rich Content” (f.e. user-generated content), show better distribution in Newsfeed, Ticker and Timeline!

Images / Photoshttp://instagram.com

Page 48: Open Graph - How to connect all the things - AllFacebook DevCon Berlin 2012

http://die.socialisten.atSocial Software Development

Rich Content: Photos, videos or Flash-content, geo-location.CTR increasing, since resulting stories are more interesting to friends!

Geo-location http://www.stadtkinder.com

Guideline: Optimize Custom Actions

Page 49: Open Graph - How to connect all the things - AllFacebook DevCon Berlin 2012

http://die.socialisten.atSocial Software Development

Videos /Flash-contenthttp://apps.facebook.com/

lastfm-og-scrobbler

<meta property="og:video:type" content="application/x-shockwave-flash"/><meta property="og:video" content="https://www.youtube.com/v/..."/><meta property="og:video:width" content="398"/><meta property="og:video:height" content="239"/>

Guideline: Optimize Custom Actions

Rich Content: Photos, videos or Flash-content, geo-location.CTR increasing, since resulting stories are more interesting to friends!

Page 50: Open Graph - How to connect all the things - AllFacebook DevCon Berlin 2012

http://die.socialisten.atSocial Software Development

Rule #4:

Distribution & CTR can be improved by adding “Rich Content” to actions: Videos, Flash-content, images & geo-location.

Page 51: Open Graph - How to connect all the things - AllFacebook DevCon Berlin 2012

http://die.socialisten.atSocial Software Development

Crosslinking Open Graph-Objects enables richer, more interesting stories and increases CTR!

Guideline: Optimize Custom Actions

Page 52: Open Graph - How to connect all the things - AllFacebook DevCon Berlin 2012

http://die.socialisten.atSocial Software Development

Crosslink two Open Graph-Actions with “Action Links”! Enables 1-Click-responses & increases volume of published actions.

Cross-linked Objects“Artist” <> “User”

Cross-linked Actions“Love” <> “Scrobble”

Guideline: Optimize Custom Actions

Page 53: Open Graph - How to connect all the things - AllFacebook DevCon Berlin 2012

http://die.socialisten.atSocial Software Development

Rule #5:

Distribution & CTR can be improved by connectingOpen Graph-Objects, Actions-Links & adding Rich Metadata.

Page 54: Open Graph - How to connect all the things - AllFacebook DevCon Berlin 2012

Facepile & other Social Plugins

Page 55: Open Graph - How to connect all the things - AllFacebook DevCon Berlin 2012

http://die.socialisten.atSocial Software Development

Guideline: Facepile & other Social Plugins

Social Plugins promise fast & easy Personalization.

Facepile - Friends who are connected to a particular object by a particular action (f.e. friends that read a certain article)

Activity Feed - Highlight recent actions & popular content of your friends

Killer-feature: Works without App-Auth!

Page 56: Open Graph - How to connect all the things - AllFacebook DevCon Berlin 2012

http://die.socialisten.atSocial Software Development

Unfortunately, Social Plugins are not always the best solution:

- Hardly any styling possible

- Hardly any options to customize content displayed (f.e. displaying ony most recent actions of friends ...)

- Bugs! (problems with internationalization, missing actions etc.)

Guideline: Facepile & other Social Plugins

Page 57: Open Graph - How to connect all the things - AllFacebook DevCon Berlin 2012

http://die.socialisten.atSocial Software Development

Original Facepile: 2 Friends

Custom Facepile: 6 Friends!

Guideline: Facepile & other Social Plugins

Page 58: Open Graph - How to connect all the things - AllFacebook DevCon Berlin 2012

http://die.socialisten.atSocial Software Development

Recommendation: Log all published actions to your app/database. Develop your own, custom widgets to replace Facepile, Recent Activity - get creative, but warrant privacy settings!

Bonus = enables Undo for historical Actions!

Major Downside: works only after App-Auth!

mysql> select id,created,user_id,action,action_id,substring(action_url,1,30) from actions limit 10;+----+---------------------+-----------------+-------------------+-------------------+-------------| id | created | user_id | action | action_id | action_url |+----+---------------------+-----------------+-------------------+-------------------+-------------| 5 | 2012-05-08 18:02:22 | 100001903705011 | news.reads | 327098717363582 | ... || 9 | 2012-05-09 16:32:49 | 609190863 | meinklubdev:react | 10150966819840864 | ... || 10 | 2012-05-09 18:02:09 | 609190863 | news.reads | 10150967610995864 | ... || 11 | 2012-05-09 18:07:10 | 609190863 | meinklubdev:react | 10150967623110864 | ... |...

Guideline: Facepile & other Social Plugins

Page 59: Open Graph - How to connect all the things - AllFacebook DevCon Berlin 2012

http://die.socialisten.atSocial Software Development

Example: Custom Facepile

Guideline: Facepile & other Social Plugins

Page 60: Open Graph - How to connect all the things - AllFacebook DevCon Berlin 2012

http://die.socialisten.atSocial Software Development

Rule #6:

Don’t rely on Standard Social Plugins! Be more flexible and awesome by developing your own, custom Widgets!

Page 61: Open Graph - How to connect all the things - AllFacebook DevCon Berlin 2012

http://die.socialisten.atSocial Software Development

Rule #0:

Stay up-to-date! Subscribe & read the Docs & Facebook Dev-Blog!Try out new features, keep optimizing your Actions &watching your App-Insights!

Page 62: Open Graph - How to connect all the things - AllFacebook DevCon Berlin 2012

http://die.socialisten.atSocial Software Development

http://conceptingsocialmediaconcepts.tumblr.com

Page 63: Open Graph - How to connect all the things - AllFacebook DevCon Berlin 2012

http://die.socialisten.atSocial Software Development

BREAKYOUR OWN

RULES

Page 64: Open Graph - How to connect all the things - AllFacebook DevCon Berlin 2012

die.socialisten.atsocial network development

“Facebook Programming - Developing Social Apps & Websites” Michael Kamleitner, Galileo Computing 2012 http://book.socialisten.at