KEMBAR78
Getting started with Facebook OpenGraph API | PPTX
Open Graph for
 Developers
    @LynnLangit
What and Why Open Graph?
• A Facebook API to share information
    From your application
    To Facebook
• Ex. Pinterest
First Look




Open Graph by Example
Demo
Open Graph Word Press plug in
Open Graph in 30 minutes
   Wordpress Plug-in
Understanding more…
• Look at Open Graph for Facebook application development
   o Beyond the ‘Like’ button
   o Adding more information – noun / verb, i.e. “I cooked this recipe”
• Understand how to get started coding using a single API
• Learn concepts - User / Action / Object / Aggregation
Displaying Open Graph Info
Use a single API
Enable Open Graph actions
To appear on Social Channel
-- Newsfeed
-- Ticker
-- Timeline
User->Action->Object




Actions and objects are the building blocks of Open Graph
Planning for Open Graph

Student        Teaching Kids Programming

 After a student codes and builds a recipe (lesson), then:
 1) Post a story to their timeline
 2) Post their name
 3) Post a picture of the output (screenshot)
 4) Post the name of recipe
 5) The timeline story should read as follows:
    “Lynn built the TKP SQUARE recipe today using Java”
Demo
Setting up an Open Graph application
Objects, Actions, Aggregations for TKP
Working with Open Graph
• Core Concepts
   o Objects are nouns
   o Actions are verbs (and must be approved) by Facebook staff
   o Aggregations are views on Timeline, Newsfeed or Ticker
• Wire up Open Graph Objects to web pages with <meta> tags
   o Tags in the <head> section of the page
   o Tags describe the type of the object, the name of the object and other
     key information
Using Open Graph


                               ADD new or       TEST your
CREATE your      USE default   CUSTOMIZE        application
                                                                      WIRE up your
  Facebook      ACTIONS and    existing Open    using Tools
                                                                      application to
 Application     OBJECTS to    Graph items:     • Graph API            your Open
     w/a         your Open     • Objects          Explorer
                                                                         Graph
namespace          Graph       • Actions        • Facebook Activity
                                                  Log
                               • Aggregations
Using the Samples Gallery




  From the samples gallery - here
Try it out
• Build an app which uses Open Graph API
• Put your on app center
Learn More

Getting started with Facebook OpenGraph API

  • 1.
    Open Graph for Developers @LynnLangit
  • 2.
    What and WhyOpen Graph? • A Facebook API to share information  From your application  To Facebook • Ex. Pinterest
  • 3.
  • 4.
    Demo Open Graph WordPress plug in
  • 5.
    Open Graph in30 minutes Wordpress Plug-in
  • 6.
    Understanding more… • Lookat Open Graph for Facebook application development o Beyond the ‘Like’ button o Adding more information – noun / verb, i.e. “I cooked this recipe” • Understand how to get started coding using a single API • Learn concepts - User / Action / Object / Aggregation
  • 7.
    Displaying Open GraphInfo Use a single API Enable Open Graph actions To appear on Social Channel -- Newsfeed -- Ticker -- Timeline
  • 8.
    User->Action->Object Actions and objectsare the building blocks of Open Graph
  • 9.
    Planning for OpenGraph Student Teaching Kids Programming After a student codes and builds a recipe (lesson), then: 1) Post a story to their timeline 2) Post their name 3) Post a picture of the output (screenshot) 4) Post the name of recipe 5) The timeline story should read as follows: “Lynn built the TKP SQUARE recipe today using Java”
  • 10.
    Demo Setting up anOpen Graph application
  • 11.
  • 12.
    Working with OpenGraph • Core Concepts o Objects are nouns o Actions are verbs (and must be approved) by Facebook staff o Aggregations are views on Timeline, Newsfeed or Ticker • Wire up Open Graph Objects to web pages with <meta> tags o Tags in the <head> section of the page o Tags describe the type of the object, the name of the object and other key information
  • 13.
    Using Open Graph ADD new or TEST your CREATE your USE default CUSTOMIZE application WIRE up your Facebook ACTIONS and existing Open using Tools application to Application OBJECTS to Graph items: • Graph API your Open w/a your Open • Objects Explorer Graph namespace Graph • Actions • Facebook Activity Log • Aggregations
  • 14.
    Using the SamplesGallery From the samples gallery - here
  • 15.
    Try it out •Build an app which uses Open Graph API • Put your on app center
  • 16.

Editor's Notes

  • #3 http://ogp.me/
  • #4 http://www.teachingkidsprogramming.org
  • #6 From the plug-ins gallery – hereDeveloper info - here
  • #8 https://developers.facebook.com/docs/channels/
  • #9 Explanation - https://developers.facebook.com/docs/opengraph/Security info – object is public, action is private to the user
  • #10 Explanation - https://developers.facebook.com/docs/opengraph/Security info – object is public, action is private to the user
  • #11 Sample code here - http://developers.facebook.com/docs/opengraph/samples/
  • #13 http://developers.facebook.com/docs/opengraph/keyconcepts/
  • #14 http://developers.facebook.comhttp://developers.facebook.com/docs/opengraph/keyconcepts/*Tip – to quick publish -- use Terminal in MacOS w/the code (starts with ‘curl’ ) from the Open Graph&gt;Actions&gt;{your action}&gt;Create new run action dialog box
  • #15 http://developers.facebook.com/docs/opengraph/samples/
  • #16 https://developers.facebook.com/
  • #17 https://developers.facebook.com/apps
  • #20 Download – samples - https://developers.facebook.com/docs/opengraph/samples/Sdks - http://developers.facebook.com/docs/sdks/Download – samples - https://developers.facebook.com/docs/opengraph/samples/http://developers.facebook.com/docs/opengraph/samples/
  • #22 http://developers.facebook.com/videos/
  • #23 http://www.monafoundation.org/project/Teaching-Kids-Programming/22