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, developers and brands.

1. Facebook Timeline & Open Graph
Platform Briefing - Die Socialisten 03/2012
(Photo: Facebook.com)

2. 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, developers
and brands.
Let’s take a look at the new Timeline-profiles first...
die.socialisten.at
social network development

3. Cover - Fill this wide,
open space with a unique
image that represents you
best. It's the first thing
people see when they visit
your timeline.
die.socialisten.at
social network development

4. Stories - Share and
highlight your most
memorable posts,
photos and life
events on your
timeline. This is
where you can tell
your story from
beginning, to
middle, to now.
die.socialisten.at
social network development

5. Timeline-stories are
basically a two-
column, chronological
stream of all your
activitiy on Facebook:
Photos, Checkins,
Status-Updates, Likes,
Friends...
Underwhelmed?
die.socialisten.at
social network development

6. Watch out! Apps can publish
to your Timeline as well!
Instead of the good-old
Wall-Posting, Timeline-apps
can publish and display all
sorts of actions!
die.socialisten.at
social network development

7. 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 (no need to force them into new “Facebook-Apps” - didn’t
work out).
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

8. 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

9. 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.

10. Intro:
Facebook Open Graph / Timeline
With Timeline / Open Graph, Facebook allows developers to publish
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

11. With Open Graph, users can connect with objects with all sorts
of actions! Everything is represented in Facebooks social graph.

12. Intro:
Facebook Open Graph / Timeline
Now, will there be buttons, similar to the well-known “Like”-
Button, to publish these new actions?
Nope! Facebook champions a new concept of
Frictionless Sharing, which means, that actions are
published to their Timeline-Profiles automatically, when they
perform an action in the original app!
The “Like”-Button, however, is here to stay :)
die.socialisten.at
social network development

13. Intro:
Facebook Open Graph / Timeline
Two important caveats:
1. Users have to approve each app, before it is allowed to
publish to their timeline!
die.socialisten.at
social network development

14. 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 takes 2-4
weeks, although there’s a
“fasttrack” for partners.
Facebook checks on grammar,
user-experience, abuse etc.
die.socialisten.at
social network development

15. Intro:
Facebook Open Graph / Timeline
So, where are actions displayed, once they are being published?
They’re featured on the new Ticker in Realtime.
They’re featured in Aggregations on Timeline-Profiles.
They’re feature in Timeline-Views of the app.
They’re feature in the News-Feed, when deemed more important or
when several users performed similar actions.
All your friends can see published actions, weither they have installed
the app, actions are originating from, or not!
die.socialisten.at
social network development

16. Intro:
Facebook Open Graph / Timeline
Next, we’ll demonstrate all kinds of exposure Open Graph-actions
can get by showing our first Open Graph App, the Last.fm
Scrobbler. Everytime a user listens to a song, the “Scrobble”-action
is published (think Spotify).
It’s approved by Facebook and you can try it out today:
http://www.facebook.com/LastfmScrobbler
Other Showcase-apps you should try out
to get to know Open Graph better include:
Spotify
http://www.spotify.com (Music)
Washington Post Social Reader
http://apps.facebook.com/wpsocialreader (News)
The Guardian
http://apps.facebook.com/theguardian (News)
die.socialisten.at
social network development

17. Actions are displayed on the Ticker in
realtime. On Mouseover, a flyout shows
more detail on the preformed action &
object. The ticker is filtered by
GraphRank!
die.socialisten.at
social network development

18. Important & more frequent actions are
highlighted & clustered in the News-Feed!
die.socialisten.at
social network development

19. Frequently used apps and
media-types (“Music”,
“Video”, “News”) are
represented in boxes on
the top of a users
die.socialisten.at
social network development

20. Published actions are
also aggregated further
down the profile - f.e.
monthly summaries of
activity
die.socialisten.at
social network development

21. Users can add buttons for the apps
the like most on the top of their
profile - these buttons load the
“Timeline-View” of the app...
die.socialisten.at
social network development

22. The “Timeline-View” of an
app shows a chronological
view of all actions the
user ahs performed with it.
die.socialisten.at
social network development

23. Why build for
Facebook Open Graph / Timeline?
Open Graph & Timeline promise deep integration for apps &
content with Facebooks Social Graph. Published actions receive a
great amount of exposure on the platform, and therefor can drive
massive traffic to your app or content-site. Open Graph is also key for
offering a personalized experience to users.
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

24. The rollout -
Facebook Open Graph / Timeline
Facebook started the public rollout of Timeline (and also the
approval of Open Graph-apps) in January 2012.
At the bottom of https://www.facebook.com/about/timeline, you can
check out how many of your friends are on Timeline already
(for me was about 57% in März 2012).
die.socialisten.at
social network development

25. The rollout -
Facebook Open Graph / Timeline
Eventually everybody will (have to) switch to Timeline. If you haven’t
been asked to switch by Facebook yet, here is an easy guide to turn
on Timeline manually:
http://techcrunch.com/2011/09/22/how-to-enable-facebook-timeline/
Remember: you can start launching Open Graph / Timeline-apps just
now! Users on the old profile just won’t be able to fully experience the
apps yet.
die.socialisten.at
social network development

26. Timeline f. Pages
Switching to Timeline (opt-in) since March 1st.
All Pages are switched on March 31st!
Tabs-width is increased from 520px to 810px!
Existing tabs will work without change, content is automatically
aligned center + whitespace.
Default Landing Tabs-functionality has been removed! (for now?)
die.socialisten.at
social network development

27. The old page-layout allowed up to 6
immediately visible tabs for custom apps.
Sometimes those were hard to find for users
(especially with tall profile-images)
die.socialisten.at
social software development

28. Tabs are replaced with large, visible tile-
buttons below the cover-photo. Only 3
custom-apps are immediatly visible, the
rest is hidden below the arrow-button.
die.socialisten.at
social software development

29. Tabs are now 810px wide. They have a button
which leads to Timeline, and a select-box
to open other Tabs. Also, users can like/
unlike. Fangates work as before!
die.socialisten.at
social software development

30. die.socialisten.at
social network development

31. die.socialisten.at
michael.kamleitner@socialisten.at
http://facebook.com/diesocialisten
http://twitter.com/diesocialisten
http://die.socialisten.at/