5 OpenGraph

Distribution and engagement for every platform
The Open Graph

LISTEN
READ
RUN
EAT
Like
Like
Like
Like
The Guardian
to .+ million Monthy
Active Users in months
GoodReads
increase in
Daily Active Users
Pinterest
increase in daily
referrals from Facebook
Open Graph
Desktop Web App
Desktop Web
Mobile Web
Desktop Web App
Desktop Web
Mobile Web
Native Apps
Native Apps
Play a Sound
Like a Sound
Post a Sound
Follow a User
Join a Group
Permissions Dialog
Sharing in the app
Publish Actions from every platform
Desktop Web App Desktop Web App
Desktop Web: Newsfeed and Ticker
Desktop Web: Timeline
iOS Native: Newsfeed & Timeline
iOS Native: Newsfeed & Timeline
Android Native & Mobile Web: Newsfeed & Timeline
Steps to using Open Graph
ACTION OBJECT
l. Model your data
2. Markup and expose your objects to the Web
...
<head>
<title>Lasagne</title>
<meta property="og:type" content="foodapp:dish"/>
<meta property="og:title" content="Lasagne"/>
<meta property="og:description" content="yummy"/>
<meta property="og:url" content="http://mysite.com/lasagne"/>
<meta property="og:image" content="http://mysite.com/lasagne.jpg"/>
<meta property="foodapp:ingredient" content="http://mysite.com/beef"/>
<meta property="foodapp:ingredient" content="http://mysite.com/pasta"/>
...
</head>
...
http://mysite.com/lasagne
3. Publish Actions
POST https://graph.facebook.com/me/foodapp:cook
access_token=234876AB6865...
&
recipe=http://mysite.com/lasagne
user performs
action in app
client or server posts action to Facebook
access_token=234876AB6865...&
Facebook gets the object's metadata
GET http://mysite.com/lasagne
4. Design your Timeline Aggregations
5. Read Actions
GET https://graph.facebook.com/me/foodapp:cook?
Creating Actions and Object Types
Hosting Objects
Permissions and Authentication
Publishing Actions from the Graph Explorer
Reading Actions from the Graph Explorer
Publishing Actions from the Mobile Web

Walkthrough
Nine Pro Tips
Auto-login returning authed users

on web and mobile web:
Prominently request users to Login
Enable
Authenticated
Referrals if
appropriate
l. Authentication matters
FB.getLoginStatus()
2. Trim your permissions
publish_stream
offline_access
publish_actions
D
E
P
R
E
C
A
T
E
D
S
U
P
E
R
C
E
D
E
D
3. Upgrade existing users to publish_actions
GET https://graph.facebook.com/me/permissions?
{
"data": [
{
"installed": 1,
"email": 1,
"user_likes": 1
}
]
}
INGRE-
DIENT
INGRE-
DIENT
INGRE-
DIENT
4. Use Object Properties References
RECIPE
COOK
for better Aggregations and Feed stories
...
<head>
<title>Lasagne</title>
<meta property="og:type" content="foodapp:dish"/>
<meta property="og:title" content="Lasagne"/>
<meta property="og:description" content="yummy"/>
<meta property="og:url" content="http://mysite.com/lasagne"/>
<meta property="og:image" content="http://mysite.com/lasagne.jpg"/>
<meta property="foodapp:ingredient" content="http://mysite.com/beef"/>
<meta property="foodapp:ingredient" content="http://mysite.com/pasta"/>
...
</head>
...
OCCASION
5. Use Action Properties & References
RECIPE
COOK
for better Aggregations and Feed stories
&
&
occasion=http://mysite.com/mybirthday
TAGS
6. Tag People & Places; Add Messages
RECIPE
COOK
POST https://graph.facebook.com/me/myapp:cook
&
&
place=56783456736519
&
tags=12345,67889
&
message=Even+Garfield+would+be+proud
7. URL structure
OG needs real URLs:
Keep the address bar clean:
redirect based on the

useragent string, or JS
http://example.com/foo/bar
window.history.pushState()
window.location=/!#/foo/bar
8. Update your objects programmatically
POST https://graph.facebook.com
&
id=http://mysite.com/lasagne
&
scrape=true
9. Read Data for Better Personalisation
user_actions.music
user_actions.video
user_actions.news
user_actions:APP_NAMESPACE
friends_actions.music
friends_actions.video
friends_actions.news
friends_actions:APP_NAMESPACE
https://graph.facebook.com/UID/music.listens?access_token=
https://graph.facebook.com/UID/news.reads?access_token=
https://graph.facebook.com/UID/video.watches?access_token=
https://graph.facebook.com/UID/APP_NAMESPACE:ACTION_NAME?..
Open Graph
Desktop Web App
Desktop Web
Mobile Web
Desktop Web App
Desktop Web
Mobile Web
Native Apps
Native Apps
Hack the Graph
OG Documentation
developers.facebook.com/docs/opengraph

5 OpenGraph

Hochgeladen von

Dokumentinformationen

Originalbeschreibung:

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

5 OpenGraph

Hochgeladen von

Copyright:

Verfügbare Formate

Distribution and engagement for every platform

The Open Graph

Creating Actions and Object Types

Permissions and Authentication

Publishing Actions from the Graph Explorer

Reading Actions from the Graph Explorer

Publishing Actions from the Mobile Web

Auto-login returning authed users

Prominently request users to Login

OG needs real URLs:

Keep the address bar clean:

redirect based on the

Das könnte Ihnen auch gefallen