thanks for the ad(d).




Facebook Timeline & Open Graph
Platform Briefing - Die Socialisten 11/2012

                                               (Photo: Facebook.com)
About: Die Socialisten
"Die Socialisten" is a Vienna-based social-software agency
focussing on the design & implementation of
applications 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

                                                                         die.socialisten.at
                                                                 social network development
Intro: What is
Open Graph / Timeline?
Intro:
Facebook Open Graph / Timeline

On their annual f8-event in September 2011, Facebook
introduced the biggest change to the platform since
News-Feed in 2006:
Timeline & Open Graph
In this briefing we want to give you an overview on these
game-changing features, especially focussing on the
opportunities they represent for publishers, brands and
startups.
Plus: Lessons learned after developing +1 year for the
Open Graph and launching numerous apps...




                                                                   die.socialisten.at
                                                           social network development
Intro:
Facebook Open Graph / Timeline

The basic idea behind Timeline-/Open Graph-Apps:
People already are using apps (on Facebook, on the Web, Mobile).
People are doing all kinds of things on these apps (listening to
songs, watching movies, publishing what books they read, recording
their sports-activities etc.). Let’s call these activities ”actions”.
Now, let people continue using their apps the way they are already
doing it (no need to force them into new “Facebook-Canvas-Apps”).


Instead: let them publish all actions they want to their Timeline-
profile, by connecting your app to the Open Graph!




                                                                                die.socialisten.at
                                                                        social network development
Rewind:
Open Graph Protocol
Released in 2010, Open Graph Protocol allowed publishers to
connect their websites, blogs, apps with the Facebook Social Graph.
How? By adding the Like-Button:




                                                                              die.socialisten.at
                                                                      social network development
Open Graph Protocol connected users and objects with one type of
edge - the “like”. The objects (mostly articles, videos...) are
incorporated into Facebooks social graph.
Intro:
Facebook Open Graph / Timeline

With Timeline / Open Graph, Facebook allows developers to publish
almost any kind of connection between users and objects.




Objects can be any piece of content (music, video, article...), but
also more app-specific things - a running-route, a comment on a
book, a recipe...
Actions can be all kinds of verbs - read, listen to, watch, cook,
recommend, collect, run, comment...

                                                                              die.socialisten.at
                                                                      social network development
With Open Graph, users can connect with objects with all sorts
of actions! Everything is represented in Facebooks social graph.
Intro:
Facebook Open Graph / Timeline


How & when are Open Graph Actions published?


In some cases, actions can be published automatically,
after a user has consumed content for a while (Audio,
Video, News) = “Passive Sharing”
However, users should always be able to easily un-publish and opt-out.
Examples: Spotify, Social Reader-Apps...



In most cases, actions should be published when the
user takes the particular action in your app =
“Explicit Sharing”
When a comment is posted, a rating done, a friend followed etc.




                                                                                 die.socialisten.at
                                                                         social network development
Intro:
Facebook Open Graph / Timeline
Two important caveats:
1. Users have to approve each app, before it is allowed to
publish to their timeline! Actions will never be published
without the users explicit consent!




                                                                     die.socialisten.at
                                                             social network development
Intro:
Facebook Open Graph / Timeline
Two important caveats:
2. All actions a developer wants
to use, must be approved by
Facebook first!
The Approval-Process normally
takes a few days max.
Facebook checks on grammar,
user-experience, abuse etc.




                                           die.socialisten.at
                                   social network development
Intro:
Facebook Open Graph / Timeline

Why start building for Open Graph today?
Actions published through your App receive a great amount of
exposure on the platform, and therefore can drive massive traffic to
your app or content-site:


Early results from US-centric Showcase-apps are very promising:
Yahoo! News (+600% Referral-Traffic von Facebook)
The Independent (>1mio monthly active users)
The Guardian (4mio app installs)
Washington Post (3.5mio app installs)
Source: Facebook (https://developers.facebook.com/blog/post/603/)




                                                                              die.socialisten.at
                                                                      social network development
Intro:
Facebook Open Graph / Timeline

What type of apps can integrate with Open Graph?


- Stand-alone Web-Apps (http://yourdomain.com)
- Canvas- & Tab-Apps within Facebook
  (http://apps.facebook.com/yourapp)
- Mobile Web-Apps
- Native iOS- & Android-Apps
-




                                                           die.socialisten.at
                                                   social network development
Intro:
Facebook Open Graph / Timeline

Not only content-sites, but apps & startups as well!
Lots of showcases incl. numbers, best practises can be found at:
http://developers.facebook.com/blog/archive#2012 (search f. “spotlight”)




                                                                                   die.socialisten.at
                                                                           social network development
Intro:
 Facebook Open Graph / Timeline




mixcloud.com: -40% bouncerate f. Facebook-referrals, spotlight
friends’ activity, easy sharing of listened music.
                                                             die.socialisten.at
                                                     social network development
Intro:
 Facebook Open Graph / Timeline




tumblr.com: Increased Facebook-Referral Traffic x2!
                                                              die.socialisten.at
                                                      social network development
Intro:
 Facebook Open Graph / Timeline




endomodo: Increased Facebook-Referral Traffic x1.75,
No. of shared stories on Facebook x2.5!                        die.socialisten.at
                                                       social network development
Distribution: Where on
Facebook are Open Graph-
   actions displayed?
Intro:
Facebook Open Graph / Timeline

So, where are actions displayed, once they are being published?


They’re featured in the News-Feed, when deemed more important or
when similar actions have been performed (Cluster).
They’re featured on the new Ticker in Realtime.
They’re featured in Stories & Aggregations on Timeline-Profiles.
They’re featured in app-specific Timeline-Views on profiles.


Not all published actions will be displayed in every channel!
All your friends can see published actions, wether they have installed
the app, from which actions are originating from, or not!




                                                                                 die.socialisten.at
                                                                         social network development
Distribution:
Where are Actions being displayed?

Newsfeed - Single Action:




                            Available f. all Custom
                            Actions, but heavily
                            filtered by GraphRank
                            (=most OG-actions won’t
                            be displayed in
                            Newsfeed!)
                                                die.socialisten.at
                                        social network development
Distribution:
Where are Actions being displayed?

Newsfeed - Multiple Actions:




                                     Available f.
                                     all Custom
                                     Actions, but
                                     heavily
                                     filtered by
                                     GraphRank
                                     (=most OG-
                                     actions won’t
                                     be displayed
                                     in Newsfeed!)
                                               die.socialisten.at
                                       social network development
Distribution:
Where are Actions being displayed?

Newsfeed - Aggregated:




                            Only f. Built-in Actions
                            (maybe even only
                            “listen”?) - Heavily
                            filtered by GraphRank


                                                 die.socialisten.at
                                         social network development
Distribution:
Where are Actions being displayed?

Newsfeed - Aggregated:




                            Only f. Built-in Action
                            “read”. Only displayed
                            if a no. of friends have
                            read the article!


                                                 die.socialisten.at
                                         social network development
Distribution:
 Where are Actions being displayed?

 Ticker:




Contains more
actions, but is
still filtered, so
f.e. not every song
listened on Spotify
is displayed!




                                              die.socialisten.at
                                      social network development
Distribution:
Where are Actions being displayed?

Timeline - Stories:




                            Most actions won’t be
                            displayed as separate
                            story. There are some
                            tricks though :)
                                                 die.socialisten.at
                                         social network development
Distribution:
 Where are Actions being displayed?

 Timeline - Aggregations:




Facebook will display
aggregations for most
frequently used apps only!
                                              die.socialisten.at
                                      social network development
Distribution:
Where are Actions being displayed?

Timeline - App-Views:




                                             die.socialisten.at
                                     social network development
Distribution:
Where are Actions being displayed?
Timeline - App-Views:




                        App-specific Views are quite hidden, only
                        user can set visible tiles! Still a great
                        feature to show off all your aggregations!
                                                               die.socialisten.at
                                                       social network development
Distribution:
Where are Actions being displayed?
Dev-Tip: Users see all published actions in the “Activity Log” -
contains all actions, from all apps, no matter how it was published!




                                                                               die.socialisten.at
                                                                       social network development
The Activity Log: If its not there,
it probably hasn’t been published at all!
                                                    die.socialisten.at
                                            social network development
Insights:
Some real-life data!
Insights:
Some real-life data

    Last.fm Scrobbler f. Facebook
    http://www.facebook.com/LastfmScrobbler




                                                      die.socialisten.at
                                              social network development
Insights:
Some real-life data

    Last.fm Scrobbler f. Facebook
    >80k MAU




                                            die.socialisten.at
                                    social network development
Insights:
Some real-life data

    Last.fm Scrobbler f. Facebook
    >120mio Actions published in 2012




                                                die.socialisten.at
                                        social network development
Insights:
Some real-life data

CTR & Distribution of Impressions:




                                             die.socialisten.at
                                     social network development
Insights:
Some real-life data

Retention:




                              die.socialisten.at
                      social network development
Best Practise: How-to get
the most out of Open Graph
      for your app!
Best Practise:
Built-in Open Graph-Actions

For content-heavy sites (news, video, music):
Use the built-in actions read, watch, listen!
Feel free to share these actions passively!
(=in the background, with no explicit user-interaction)
Give users a clear indication that
they’ve published an action!
Give users an easy undo-option and/or history/log
to un-publish their actions!
Give users an easy way to opt-out
for the session or even forever!




                                                                  die.socialisten.at
                                                          social network development
Best Practise:
 Built-in Open Graph-Actions




Opt-out, Indication & Undo
http://apps.facebook.com/meinklub
                                            die.socialisten.at
                                    social network development
Best Practise:
 Built-in Open Graph-Actions




Action-History/Log
http://apps.facebook.com/meinklub
                                            die.socialisten.at
                                    social network development
Best Practise:
Custom Open Graph-Actions

Add 3+ Custom Open Graph-actions
that mirror the interactions users naturally take in your app!
Add rich OG meta-data your OG-objects!
Connect your OG-object-model!
Build rich stories for your published OG-actions!
Build attractive aggregations for Timeline!




Watch out: Passive Sharing is not allowed for Custom
Actions starting February 2013!


                                                                         die.socialisten.at
                                                                 social network development
Best Practise:
Custom Open Graph-Actions




                                    die.socialisten.at
                            social network development
Best Practise:
Custom Open Graph-Actions

Let users enter custom messages!




                                           die.socialisten.at
                                   social network development
Best Practise:
Custom Open Graph-Actions

Inter-connect your OG-object-model & add rich metadata!




                                                                  die.socialisten.at
                                                          social network development
Best Practise:
Custom Open Graph-Actions

Let users upload images & add location!




                                                  die.socialisten.at
                                          social network development
Best Practise:
Custom Open Graph-Actions

Use @-mentions to Tag friends!




                                         die.socialisten.at
                                 social network development
Best Practise:
Custom Open Graph-Actions

How-to increase visibility of Custom Actions
in Newsfeed and other channels!


- Add OG-metadata to your stories!
- Let users add custom text-messages
- Let users add location
- Let users upload images
- Let users @-mention friends
- Use “fb_explicit_sharing”-Option when publishing




                                                             die.socialisten.at
                                                     social network development
Die Socialisten
Apps Showcase 2012

Mein Klub
http://apps.facebook.com/meinklub

Last.fm Scrobbler f. Facebook
http://apps.facebook.com/lastfm-og-scrobbler

Krone Social TV
http://www.facebook.com/kronetv?sk=app_135828866537171


ATV ampunkt
http://www.facebook.com/AmPunkt/app_119818284846

Uberch.at
http://uberch.at/

Social Reader Widget
http://nonsmokingarea.com/blog/
http://www.thomashutter.com
http://www.nintendo-online.de


Social Wall
http://wall.socialisten.at/


Swat.io
http://www.swat.io/



                                                                 die.socialisten.at
                                                         social network development
“Facebook Programmierung -
Entwicklung von Social Apps & Websites”
Michael Kamleitner, Galileo Computing 2012

http://book.socialisten.at
                                                     die.socialisten.at
                                             social network development
die.socialisten.at
social network development
Michael Kamleitner
Die Socialisten

m:   +43 699 116 07 923
e:   michael.kamleitner@socialisten.at
f:   http://facebook.com/michael.kamleitner
g:   http://profiles.google.com/michael.kamleitner
t:   http://twitter.com/_subnet

Facebook Timeline & Open Graph Platform Briefing 11/2012

  • 1.
    thanks for thead(d). Facebook Timeline & Open Graph Platform Briefing - Die Socialisten 11/2012 (Photo: Facebook.com)
  • 2.
    About: Die Socialisten "DieSocialisten" is a Vienna-based social-software agency focussing on the design & implementation of applications 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 die.socialisten.at social network development
  • 3.
    Intro: What is OpenGraph / Timeline?
  • 4.
    Intro: Facebook Open Graph/ Timeline On their annual f8-event in September 2011, Facebook introduced the biggest change to the platform since News-Feed in 2006: Timeline & Open Graph In this briefing we want to give you an overview on these game-changing features, especially focussing on the opportunities they represent for publishers, brands and startups. Plus: Lessons learned after developing +1 year for the Open Graph and launching numerous apps... die.socialisten.at social network development
  • 5.
    Intro: Facebook Open Graph/ Timeline The basic idea behind Timeline-/Open Graph-Apps: People already are using apps (on Facebook, on the Web, Mobile). People are doing all kinds of things on these apps (listening to songs, watching movies, publishing what books they read, recording their sports-activities etc.). Let’s call these activities ”actions”. Now, let people continue using their apps the way they are already doing it (no need to force them into new “Facebook-Canvas-Apps”). Instead: let them publish all actions they want to their Timeline- profile, by connecting your app to the Open Graph! die.socialisten.at social network development
  • 6.
    Rewind: Open Graph Protocol Releasedin 2010, Open Graph Protocol allowed publishers to connect their websites, blogs, apps with the Facebook Social Graph. How? By adding the Like-Button: die.socialisten.at social network development
  • 7.
    Open Graph Protocolconnected users and objects with one type of edge - the “like”. The objects (mostly articles, videos...) are incorporated into Facebooks social graph.
  • 8.
    Intro: Facebook Open Graph/ Timeline With Timeline / Open Graph, Facebook allows developers to publish almost any kind of connection between users and objects. Objects can be any piece of content (music, video, article...), but also more app-specific things - a running-route, a comment on a book, a recipe... Actions can be all kinds of verbs - read, listen to, watch, cook, recommend, collect, run, comment... die.socialisten.at social network development
  • 9.
    With Open Graph,users can connect with objects with all sorts of actions! Everything is represented in Facebooks social graph.
  • 10.
    Intro: Facebook Open Graph/ Timeline How & when are Open Graph Actions published? In some cases, actions can be published automatically, after a user has consumed content for a while (Audio, Video, News) = “Passive Sharing” However, users should always be able to easily un-publish and opt-out. Examples: Spotify, Social Reader-Apps... In most cases, actions should be published when the user takes the particular action in your app = “Explicit Sharing” When a comment is posted, a rating done, a friend followed etc. die.socialisten.at social network development
  • 11.
    Intro: Facebook Open Graph/ Timeline Two important caveats: 1. Users have to approve each app, before it is allowed to publish to their timeline! Actions will never be published without the users explicit consent! die.socialisten.at social network development
  • 12.
    Intro: Facebook Open Graph/ Timeline Two important caveats: 2. All actions a developer wants to use, must be approved by Facebook first! The Approval-Process normally takes a few days max. Facebook checks on grammar, user-experience, abuse etc. die.socialisten.at social network development
  • 13.
    Intro: Facebook Open Graph/ Timeline Why start building for Open Graph today? Actions published through your App receive a great amount of exposure on the platform, and therefore can drive massive traffic to your app or content-site: Early results from US-centric Showcase-apps are very promising: Yahoo! News (+600% Referral-Traffic von Facebook) The Independent (>1mio monthly active users) The Guardian (4mio app installs) Washington Post (3.5mio app installs) Source: Facebook (https://developers.facebook.com/blog/post/603/) die.socialisten.at social network development
  • 14.
    Intro: Facebook Open Graph/ Timeline What type of apps can integrate with Open Graph? - Stand-alone Web-Apps (http://yourdomain.com) - Canvas- & Tab-Apps within Facebook (http://apps.facebook.com/yourapp) - Mobile Web-Apps - Native iOS- & Android-Apps - die.socialisten.at social network development
  • 15.
    Intro: Facebook Open Graph/ Timeline Not only content-sites, but apps & startups as well! Lots of showcases incl. numbers, best practises can be found at: http://developers.facebook.com/blog/archive#2012 (search f. “spotlight”) die.socialisten.at social network development
  • 16.
    Intro: Facebook OpenGraph / Timeline mixcloud.com: -40% bouncerate f. Facebook-referrals, spotlight friends’ activity, easy sharing of listened music. die.socialisten.at social network development
  • 17.
    Intro: Facebook OpenGraph / Timeline tumblr.com: Increased Facebook-Referral Traffic x2! die.socialisten.at social network development
  • 18.
    Intro: Facebook OpenGraph / Timeline endomodo: Increased Facebook-Referral Traffic x1.75, No. of shared stories on Facebook x2.5! die.socialisten.at social network development
  • 19.
    Distribution: Where on Facebookare Open Graph- actions displayed?
  • 20.
    Intro: Facebook Open Graph/ Timeline So, where are actions displayed, once they are being published? They’re featured in the News-Feed, when deemed more important or when similar actions have been performed (Cluster). They’re featured on the new Ticker in Realtime. They’re featured in Stories & Aggregations on Timeline-Profiles. They’re featured in app-specific Timeline-Views on profiles. Not all published actions will be displayed in every channel! All your friends can see published actions, wether they have installed the app, from which actions are originating from, or not! die.socialisten.at social network development
  • 21.
    Distribution: Where are Actionsbeing displayed? Newsfeed - Single Action: Available f. all Custom Actions, but heavily filtered by GraphRank (=most OG-actions won’t be displayed in Newsfeed!) die.socialisten.at social network development
  • 22.
    Distribution: Where are Actionsbeing displayed? Newsfeed - Multiple Actions: Available f. all Custom Actions, but heavily filtered by GraphRank (=most OG- actions won’t be displayed in Newsfeed!) die.socialisten.at social network development
  • 23.
    Distribution: Where are Actionsbeing displayed? Newsfeed - Aggregated: Only f. Built-in Actions (maybe even only “listen”?) - Heavily filtered by GraphRank die.socialisten.at social network development
  • 24.
    Distribution: Where are Actionsbeing displayed? Newsfeed - Aggregated: Only f. Built-in Action “read”. Only displayed if a no. of friends have read the article! die.socialisten.at social network development
  • 25.
    Distribution: Where areActions being displayed? Ticker: Contains more actions, but is still filtered, so f.e. not every song listened on Spotify is displayed! die.socialisten.at social network development
  • 26.
    Distribution: Where are Actionsbeing displayed? Timeline - Stories: Most actions won’t be displayed as separate story. There are some tricks though :) die.socialisten.at social network development
  • 27.
    Distribution: Where areActions being displayed? Timeline - Aggregations: Facebook will display aggregations for most frequently used apps only! die.socialisten.at social network development
  • 28.
    Distribution: Where are Actionsbeing displayed? Timeline - App-Views: die.socialisten.at social network development
  • 29.
    Distribution: Where are Actionsbeing displayed? Timeline - App-Views: App-specific Views are quite hidden, only user can set visible tiles! Still a great feature to show off all your aggregations! die.socialisten.at social network development
  • 30.
    Distribution: Where are Actionsbeing displayed? Dev-Tip: Users see all published actions in the “Activity Log” - contains all actions, from all apps, no matter how it was published! die.socialisten.at social network development
  • 31.
    The Activity Log:If its not there, it probably hasn’t been published at all! die.socialisten.at social network development
  • 32.
  • 33.
    Insights: Some real-life data Last.fm Scrobbler f. Facebook http://www.facebook.com/LastfmScrobbler die.socialisten.at social network development
  • 34.
    Insights: Some real-life data Last.fm Scrobbler f. Facebook >80k MAU die.socialisten.at social network development
  • 35.
    Insights: Some real-life data Last.fm Scrobbler f. Facebook >120mio Actions published in 2012 die.socialisten.at social network development
  • 36.
    Insights: Some real-life data CTR& Distribution of Impressions: die.socialisten.at social network development
  • 37.
    Insights: Some real-life data Retention: die.socialisten.at social network development
  • 38.
    Best Practise: How-toget the most out of Open Graph for your app!
  • 39.
    Best Practise: Built-in OpenGraph-Actions For content-heavy sites (news, video, music): Use the built-in actions read, watch, listen! Feel free to share these actions passively! (=in the background, with no explicit user-interaction) Give users a clear indication that they’ve published an action! Give users an easy undo-option and/or history/log to un-publish their actions! Give users an easy way to opt-out for the session or even forever! die.socialisten.at social network development
  • 40.
    Best Practise: Built-inOpen Graph-Actions Opt-out, Indication & Undo http://apps.facebook.com/meinklub die.socialisten.at social network development
  • 41.
    Best Practise: Built-inOpen Graph-Actions Action-History/Log http://apps.facebook.com/meinklub die.socialisten.at social network development
  • 42.
    Best Practise: Custom OpenGraph-Actions Add 3+ Custom Open Graph-actions that mirror the interactions users naturally take in your app! Add rich OG meta-data your OG-objects! Connect your OG-object-model! Build rich stories for your published OG-actions! Build attractive aggregations for Timeline! Watch out: Passive Sharing is not allowed for Custom Actions starting February 2013! die.socialisten.at social network development
  • 43.
    Best Practise: Custom OpenGraph-Actions die.socialisten.at social network development
  • 44.
    Best Practise: Custom OpenGraph-Actions Let users enter custom messages! die.socialisten.at social network development
  • 45.
    Best Practise: Custom OpenGraph-Actions Inter-connect your OG-object-model & add rich metadata! die.socialisten.at social network development
  • 46.
    Best Practise: Custom OpenGraph-Actions Let users upload images & add location! die.socialisten.at social network development
  • 47.
    Best Practise: Custom OpenGraph-Actions Use @-mentions to Tag friends! die.socialisten.at social network development
  • 48.
    Best Practise: Custom OpenGraph-Actions How-to increase visibility of Custom Actions in Newsfeed and other channels! - Add OG-metadata to your stories! - Let users add custom text-messages - Let users add location - Let users upload images - Let users @-mention friends - Use “fb_explicit_sharing”-Option when publishing die.socialisten.at social network development
  • 49.
    Die Socialisten Apps Showcase2012 Mein Klub http://apps.facebook.com/meinklub Last.fm Scrobbler f. Facebook http://apps.facebook.com/lastfm-og-scrobbler Krone Social TV http://www.facebook.com/kronetv?sk=app_135828866537171 ATV ampunkt http://www.facebook.com/AmPunkt/app_119818284846 Uberch.at http://uberch.at/ Social Reader Widget http://nonsmokingarea.com/blog/ http://www.thomashutter.com http://www.nintendo-online.de Social Wall http://wall.socialisten.at/ Swat.io http://www.swat.io/ die.socialisten.at social network development
  • 50.
    “Facebook Programmierung - Entwicklungvon Social Apps & Websites” Michael Kamleitner, Galileo Computing 2012 http://book.socialisten.at die.socialisten.at social network development
  • 51.
  • 52.
    Michael Kamleitner Die Socialisten m: +43 699 116 07 923 e: michael.kamleitner@socialisten.at f: http://facebook.com/michael.kamleitner g: http://profiles.google.com/michael.kamleitner t: http://twitter.com/_subnet