The timeline

11

Click here to load reader

Transcript of The timeline

Page 1: The timeline

The Timeline

Page 2: The timeline

Introduction

Current Open Graph connecting with "Like" button Facebook pages websites ex: "Milan likes Coca Cola", "Milan likes a link"

New Open Graph connect with what you want to and how you want to ex: "Milan read Slovak Government Down on BBC”

Page 3: The timeline

Website application

Create an application Authenticate user Define action, object and aggregation Publish actions Submit actions for approval

Page 4: The timeline

Authenticate user <div id="fb-root"></div> <script src="http://connect.facebook.net/en_US/all.js"></script> <script> FB.init({ appId:'YOUR_APP_ID', cookie:true, status:true, xfbml:true, oauth:true }); </script> <fb:add-to-timeline></fb:add-to-timeline>

Page 5: The timeline

Authenticate user <div id="fb-root"></div> <script src="http://connect.facebook.net/en_US/all.js"></script> <script> FB.init({ appId:'YOUR_APP_ID', cookie:true, status:true, xfbml:true, oauth:true }); </script> <fb:add-to-timeline></fb:add-to-timeline>

Page 6: The timeline

Define actions and objects

action - describe what users do on the website by one verb

object type - object involved in the action

Page 7: The timeline

Define an aggregation

Aggregates stories actions on user's timeline data display (action) layout style sort by title caption lines

Page 8: The timeline

Publish actions <head prefix="og: http://ogp.me/ns# APP_NAMESPACE: http://ogp.me/ns/apps/APP_NAMESPACE#"> <meta property="fb:app_id" content="APP_ID" /> <meta property="og:type" content="APP_NAMESPACE:recipe" /> <meta property="og:title" content="Stuffed Cookies" /> <meta property="og:image" content="http://example.com/cookie.jpg" /> <meta property="og:description" content="The Turducken of Cookies" /> <meta property="og:url" content="http://example.com/cookie.html" /> <script type="text/javascript"> function postCook() { FB.api('/me/APP_NAMESPACE:cook' + '?recipe=http://example.com/cookie.html','post', function(response) { if (!response || response.error) { alert('Error occured'); } else { alert('Post was successful! Action ID: ' + response.id); } }); } </script> </head>

Page 9: The timeline

Publish actions <head prefix="og: http://ogp.me/ns# APP_NAMESPACE: http://ogp.me/ns/apps/APP_NAMESPACE#"> <meta property="fb:app_id" content="APP_ID" /> <meta property="og:type" content="APP_NAMESPACE:recipe" /> <meta property="og:title" content="Stuffed Cookies" /> <meta property="og:image" content="http://example.com/cookie.jpg" /> <meta property="og:description" content="The Turducken of Cookies" /> <meta property="og:url" content="http://example.com/cookie.html" /> <script type="text/javascript"> function postCook() { FB.api('/me/APP_NAMESPACE:cook' + '?recipe=http://example.com/cookie.html','post', function(response) { if (!response || response.error) { alert('Error occured'); } else { alert('Post was successful! Action ID: ' + response.id); } }); } </script> </head>

Page 10: The timeline

Demo

http://blog.mist.sk

Page 11: The timeline

Milan STESKAL

@milansteskal @facebookDevSk facebook.com/groups/188066214578728/