Lezione su Open Graph e Facebook Platform - corso sui media sociali, Ca' Foscari

1. Hack the Graph
giovedì 29 marzo 2012

2. Agenda
1 The Open Graph Protocol
2 Social Plugins
3 Facebook Application Architecture
4 Tools & sessione pratica
5 Q&A
giovedì 29 marzo 2012

3. giovedì 29 marzo 2012

4. giovedì 29 marzo 2012

5. Canvas Page
Le apps all’interno di facebook sono
caricate su pagine di tipo “Canvas”
Bisogna impostare il Canvas URL dove
potete posizionare i vostri files html e
css.
Il Canvas URL viene caricato come
iFrame.
Le dimensioni standard da usare sono
760px (Fluid Canvas)
giovedì 29 marzo 2012

6. The Open Graph Protocol
“At it’s core, the Open Graph Protocol is a specification for a set of meta tags
you can use to markup your pages to tell us what type of real-world objects
your page represents.”
giovedì 29 marzo 2012

7. Storia Open Graph Protocol
Già nel 2008, Facebook ha lanciato Facebook Connect. Si tratta di quei piccoli blu
pulsanti di "facebook" che vedete su siti web che consentono di commentare un
post sul blog senza la necessità di registrarsi con un account particolare per quel
sito.
Facebook Connect permette alle persone di accedere a un sito esterno utilizzando
il loro account di Facebook. E 'stato un grande successo e nell'arco di un anno
aveva 100 milioni di utentiI. Nel mese di aprile del 2010, Facebook ha lanciato la sua
"Open Graph" API.
Ciò che questa piattaforma fa è del fantascientifico: collega qualsiasi sito della
rete a Facebook. Si tratta di una nuova serie di strumenti di programmazione che
permettono di ottenere informazioni dentro e fuori di facebook. In una sola
settimana, il nuovo Open Graph plug-in sono stati trovati su 50.000 siti web.
giovedì 29 marzo 2012

8. The Open Graph Protocol
Il protocollo denominato Open Graph di Facebook consente a qualsiasi pagina
web di diventare un oggetto presente in un grafo sociale.
Questo protocollo viene utilizzato da Facebook per consentire a qualsiasi
pagina web di avere le stesse funzionalità di una pagina Facebook.
Per trasformare le pagine web in oggetti grafici, è necessario aggiungere dei
metadati di base ad una pagina web.
Le quattro proprietà richieste per ogni pagina sono:
* og:title - Il titolo dell'oggetto come dovrebbe apparire all'interno del grafico;
* og:type - il tipo dell'oggetto, ad esempio, "film";
* og:image - l'URL di un'immagine che rappresenta l'oggetto all'interno del grafico;
* og:url - L'URL canonica dell'oggetto che verrà utilizzato come ID permanente nel grafico;
giovedì 29 marzo 2012

9. The Open Graph Protocol
giovedì 29 marzo 2012

10. Graph API
giovedì 29 marzo 2012

11. Open Graph Mechanics
1. User takes an action in the app, such as cook a recipe
2. App invokes a HTTP POST to the Graph API end-point /me/action:object=Object_URL
3. Facebook will crawl the object webpage, read its meta tags and connect the object
to the user via the action.
giovedì 29 marzo 2012

12. Actions & Objects
Le Actions sono iterazioni ad
alto livello la quale gli utenti
possono eseguire nella vostra
app.
Gli Objects rappresentano entità
che gli utenti possono agire nella
vostra app.
giovedì 29 marzo 2012

13. News Feed and Ticker
giovedì 29 marzo 2012

14. Timeline
giovedì 29 marzo 2012

15. Aggregations and Reports
giovedì 29 marzo 2012

16. Timeline views
giovedì 29 marzo 2012

17. giovedì 29 marzo 2012

18. Social Plugins
Like Button Send Button Subscribe Comments
Recommendations Like Box Login Button Registration
Facepile Live Stream Activity Feed
giovedì 29 marzo 2012

19. Facebook Application Architecture
20’ LIVE SESSION !
https://devcenter.heroku.com/articles/facebook-ruby
giovedì 29 marzo 2012

20. Authentication
giovedì 29 marzo 2012

21. Authentication - Permission
giovedì 29 marzo 2012

22. Tools & Sessione pratica
Graph API Explorer
Javascript Test Console
Developer App
Insights
Access Token Tool
Change Log
Debugger
fbrell
Live Status
Test User API
giovedì 29 marzo 2012

23. Q&A
giovedì 29 marzo 2012

24. References
The Open Graph Protocol
www.ogp.me
The Technical decisions
http://www.scribd.com/doc/30715288/The-Open-Graph-Protocol-Design-Decisions
Platform Docs
https://developers.facebook.com/docs/
Tutorial
https://developers.facebook.com/docs/opengraph/tutorial/
Getting Started
https://developers.facebook.com/docs/
Facebook Application Architecture (facebook-ruby)
https://devcenter.heroku.com/articles/facebook-ruby
Social Plugins
https://developers.facebook.com/docs/plugins/
Facebook Platform Overview
http://www.pluralsight-training.net/microsoft/courses/TableOfContents?courseName=fb-platform
giovedì 29 marzo 2012

25. THANKS!
Ing. Guido Nardo
Head of Innovation @ ETC Engineering Srl
founder @ stealth startup NYC
www.facebook.com/guido.nardo
www.twitter.com/guidonardo
www.linkedIn.com/in/guidonardo
guido.nardo@gmail.com
giovedì 29 marzo 2012