2011 07-16-openwebcampiii-110718110907-phpapp01

1. From API to WebsiteMonday, July 18, 11 1

2. About Us @themattharris @jasoncosta Open Web Camp III Stanford University July 16, 2011Monday, July 18, 11 2

3. et demi!Monday, July 18, 11 3

4. About Us @themattharris @jasoncosta @twitterapi @episod @rno Open Web Camp III Stanford University July 16, 2011Monday, July 18, 11 4

5. It shouldnt take longer than 5 minutes to allow someone to Tweet about your content, and stay informed about what youre saying.Monday, July 18, 11 5

6. Overview Sending a Tweet Reviewing the technology Making it easier Following a user Doing more Open Web Camp III Stanford University July 16, 2011Monday, July 18, 11 6

8. Tweeting the RESTful way https://api.twitter.com/1/statuses/update.json -d status="Working on the Open Web Camp III presentation" { "coordinates": null, "created_at": "Sat Jul 09 19:17:34 +0000 2011", "truncated": false, "favorited": false, "id_str": "89775215936143360", "in_reply_to_user_id_str": null, "contributors": null, "text": "Working on the Open Web Camp III presentation", ... } Open Web Camp III Stanford University July 16, 2011Monday, July 18, 11 8

9. Tweeting through twitter.com Open Web Camp III Stanford University July 16, 2011Monday, July 18, 11 9

10. Tweeting through twitter.com Open Web Camp III Stanford University July 16, 2011Monday, July 18, 11 10

11. Tweeting with @anywhere Open Web Camp III Stanford University July 16, 2011Monday, July 18, 11 11

13. Is there an easier way?Monday, July 18, 11 13

15. The RESTful way ... Requires some programming experience Open Web Camp III Stanford University July 16, 2011Monday, July 18, 11 15

16. The RESTful way ... Requires some programming experience Often needs a developer to have privileged access to a server Open Web Camp III Stanford University July 16, 2011Monday, July 18, 11 16

17. The RESTful way ... Requires some programming experience Often needs a developer to have privileged access to a server Requires the developer to handle the authentication (OAuth) Open Web Camp III Stanford University July 16, 2011Monday, July 18, 11 17

18. The RESTful way ... Requires some programming experience Often needs a developer to have privileged access to a server Requires the developer to handle the authentication (OAuth) Prefers the developer to register an application on dev.twitter.com Open Web Camp III Stanford University July 16, 2011Monday, July 18, 11 18

19. @anywhere ... Assumes a developer is comfortable developing with JavaScript Open Web Camp III Stanford University July 16, 2011Monday, July 18, 11 19

20. @anywhere ... Assumes a developer is comfortable developing with JavaScript Sometimes a developer needs privileged access to a server Open Web Camp III Stanford University July 16, 2011Monday, July 18, 11 20

21. @anywhere ... Assumes a developer is comfortable developing with JavaScript Sometimes a developer needs privileged access to a server Requires the developer to register an application on dev.twitter.com Open Web Camp III Stanford University July 16, 2011Monday, July 18, 11 21

22. @anywhere ... Assumes a developer is comfortable developing with JavaScript Sometimes a developer needs privileged access to a server Requires the developer to register an application on dev.twitter.com Requires every URL its used on to be registered Open Web Camp III Stanford University July 16, 2011Monday, July 18, 11 22

23. @anywhere ... Assumes a developer is comfortable developing with JavaScript Sometimes a developer needs privileged access to a server Requires the developer to register an application on dev.twitter.com Requires every URL its used on to be registered Can be hard to implement without support from Twitter Open Web Camp III Stanford University July 16, 2011Monday, July 18, 11 23

24. @anywhere ... Assumes a developer is comfortable developing with JavaScript Sometimes a developer needs privileged access to a server Requires the developer to register an application on dev.twitter.com Requires every URL its used on to be registered Can be hard to implement without support from Twitter Some users nd it confusing Open Web Camp III Stanford University July 16, 2011Monday, July 18, 11 24

25. some users nd it confusingMonday, July 18, 11 25

26. Monday, July 18, 11 26

27. Strengths & Weaknesses Method @anywhere REST Can code client-side Performance tied to Strengths interactions api.twitter.com JavaScript is familiar to RESTful model for accessing developers resources Weaknesses Too complex to implement Must handle authentication Need direct access to a Confusing model for users server Open Web Camp III Stanford University July 16, 2011Monday, July 18, 11 27

29. Starting out Open Web Camp III Stanford University July 16, 2011Monday, July 18, 11 29

30. Starting out REST, @anywhere werent the right tools Open Web Camp III Stanford University July 16, 2011Monday, July 18, 11 30

31. Starting out REST, @anywhere werent the right tools Many open web technologies are familiar to users Open Web Camp III Stanford University July 16, 2011Monday, July 18, 11 31

32. Starting out REST, @anywhere werent the right tools Many open web technologies are familiar to users HTML and JS can be extended easily Open Web Camp III Stanford University July 16, 2011Monday, July 18, 11 32

33. Starting out REST, @anywhere werent the right tools Many open web technologies are familiar to users HTML and JS can be extended easily Improved ubiquity Open Web Camp III Stanford University July 16, 2011Monday, July 18, 11 33

34. Goals Open Web Camp III Stanford University July 16, 2011Monday, July 18, 11 34

35. Goals Remove the need for an application Open Web Camp III Stanford University July 16, 2011Monday, July 18, 11 35

36. Goals Remove the need for an application Dont require per site customizations to get it to work Open Web Camp III Stanford University July 16, 2011Monday, July 18, 11 36

37. Goals Remove the need for an application Dont require per site customizations to get it to work Provide exible and easy integration methods Open Web Camp III Stanford University July 16, 2011Monday, July 18, 11 37

38. Goals Remove the need for an application Dont require per site customizations to get it to work Provide exible and easy integration methods High performance Open Web Camp III Stanford University July 16, 2011Monday, July 18, 11 38

39. No whalesMonday, July 18, 11 39

40. Remove the need for an application Open Web Camp III Stanford University July 16, 2011Monday, July 18, 11 40

41. Remove the need for an application Open Web Camp III Stanford University July 16, 2011Monday, July 18, 11 41

42. Dont require per site customizations Open Web Camp III Stanford University July 16, 2011Monday, July 18, 11 42

43. Dont require per site customizations Open Web Camp III Stanford University July 16, 2011Monday, July 18, 11 43

44. Provide exible integration methods Open Web Camp III Stanford University July 16, 2011Monday, July 18, 11 44

45. Provide exible integration methods HTML Tweet Open Web Camp III Stanford University July 16, 2011Monday, July 18, 11 45

46. Provide exible integration methods HTML Tweet JavaScript Tweet Open Web Camp III Stanford University July 16, 2011Monday, July 18, 11 46

47. Provide exible integration methods HTML Tweet JavaScript Tweet iFrame Open Web Camp III Stanford University July 16, 2011Monday, July 18, 11 47

48. Use standards and sensible defaults Open Web Camp III Stanford University July 16, 2011Monday, July 18, 11 48

49. Use standards and sensible defaults Detect the URL or use rel=canonical if it exists Open Web Camp III Stanford University July 16, 2011Monday, July 18, 11 49

50. Use standards and sensible defaults Detect the URL or use rel=canonical if it exists Detect language from lang attribute, browser language Open Web Camp III Stanford University July 16, 2011Monday, July 18, 11 50

51. Use standards and sensible defaults Detect the URL or use rel=canonical if it exists Detect language from lang attribute, browser language Detect via user from rel=me links that point to twitter.com Open Web Camp III Stanford University July 16, 2011Monday, July 18, 11 51

52. Use standards and sensible defaults Detect the URL or use rel=canonical if it exists Detect language from lang attribute, browser language Detect via user from rel=me links that point to twitter.com Allow values to be manually overridden Open Web Camp III Stanford University July 16, 2011Monday, July 18, 11 52

53. Use standards and sensible defaults Data Source url Open Web Camp III Stanford University July 16, 2011Monday, July 18, 11 53

54. Use standards and sensible defaults Data Source default url HTTP Referrer Open Web Camp III Stanford University July 16, 2011Monday, July 18, 11 54

55. Use standards and sensible defaults Data Source rel attribute default url rel=canonical HTTP Referrer Open Web Camp III Stanford University July 16, 2011Monday, July 18, 11 55

56. Use standards and sensible defaults Data Source data-* attribute rel attribute default url data-url rel=canonical HTTP Referrer Open Web Camp III Stanford University July 16, 2011Monday, July 18, 11 56

57. Use standards and sensible defaults Data Source Query string data-* attribute rel attribute default url ?url data-url rel=canonical HTTP Referrer Open Web Camp III Stanford University July 16, 2011Monday, July 18, 11 57

58. Use standards and sensible defaults Data Source Query string data-* attribute rel attribute default url ?url data-url rel=canonical HTTP Referrer via ?via data-via rel=me Open Web Camp III Stanford University July 16, 2011Monday, July 18, 11 58

59. Use standards and sensible defaults Data Source Query string data-* attribute rel attribute default url ?url data-url rel=canonical HTTP Referrer via ?via data-via rel=me text ?text data-text Open Web Camp III Stanford University July 16, 2011Monday, July 18, 11 59

60. Use standards and sensible defaults Data Source Query string data-* attribute rel attribute default url ?url data-url rel=canonical HTTP Referrer via ?via data-via rel=me text ?text data-text Browser lang ?lang data-lang setting Open Web Camp III Stanford University July 16, 2011Monday, July 18, 11 60

61. Easy to integrate Open Web Camp III Stanford University July 16, 2011Monday, July 18, 11 61

62. Easy to integrate YouTube WordPress Mashable Open Web Camp III Stanford University July 16, 2011Monday, July 18, 11 62

63. WordPress.comMonday, July 18, 11 63

64. the easier wayMonday, July 18, 11 64

65. TweetMonday, July 18, 11 65

66. The Tweet Button Tweet Open Web Camp III Stanford University July 16, 2011Monday, July 18, 11 66

67. Monday, July 18, 11 67

68. Monday, July 18, 11 68

69. Monday, July 18, 11 69

71. Following the RESTful way https://api.twitter.com/1/friendships/create.json -d user_id=777925 { "expanded_url": "http://themattharris.com", "name": "Matt Harris", "created_at": "Sat Feb 17 20:49:54 +0000 2007", "location": "SFO/LHR/YVR/JAX/IAD/AUS", "id_str": "777925", "protected": false, "time_zone": "Pacific Time (US & Canada)", "geo_enabled": true, "description": "Developer Advocate at Twitter and married to @cindyli. NASA enthusiast, British expat and all around geek living in San Francisco.", "statuses_count": 3916, "friends_count": 362, "display_url": "themattharris.com", "screen_name": "themattharris", ... } Open Web Camp III Stanford University July 16, 2011Monday, July 18, 11 71

72. Following a user through twitter.com Open Web Camp III Stanford University July 16, 2011Monday, July 18, 11 72

73. Following a user through twitter.com Open Web Camp III Stanford University July 16, 2011Monday, July 18, 11 73

74. Following with @anywhere Open Web Camp III Stanford University July 16, 2011Monday, July 18, 11 74

76. Is there an easier way?Monday, July 18, 11 76

77. The Follow Button Follow @themattharris Open Web Camp III Stanford University July 16, 2011Monday, July 18, 11 77

79. Web Intents Tweet Follow Retweet Reply Favorite Open Web Camp III Stanford University July 16, 2011Monday, July 18, 11 79

80. Streamlined UI and similar pattern to perform each intentMonday, July 18, 11 80

81. Web Intents Tweet http://twitter.com/intent/tweet Follow http://twitter.com/intent/user Retweet http://twitter.com/intent/retweet Reply http://twitter.com/intent/reply Favorite http://twitter.com/intent/favorite Open Web Camp III Stanford University July 16, 2011Monday, July 18, 11 81

82. JavaScript Events Open Web Camp III Stanford University July 16, 2011Monday, July 18, 11 82

83. JavaScript Events twttr.events.bind(click, function(event) { // Do something there }); twttr.events.bind(favorite, function(event) { // Do something there }); twttr.events.bind(tweet, function(event) { // Do something there }); twttr.events.bind(retweet, function(event) { // Do something there }); twttr.events.bind(follow, function(event) { // Do something there }); Open Web Camp III Stanford University July 16, 2011Monday, July 18, 11 83

84. JavaScript Events - Analytics function log_event(evt, label) { if (evt) { pageTracker._trackEvent(twitter_web_intents, evt.type, label); } } twttr.events.bind(click, function(intent_event) { log_event(intent_event, intent_event.region); }); twttr.events.bind(tweet, function(intent_event) { log_event(intent_event, tweet); }); twttr.events.bind(retweet, function(intent_event) { log_event(intent_event, intent_event.data.source_tweet_id); }); twttr.events.bind(favorite, function(intent_event) { log_event(intent_event, favorite); }); twttr.events.bind(follow, function(intent_event) { log_event(intent_event, intent_event.data.user_id + " (" + intent_event.data.screen_name + ")"); }); Open Web Camp III Stanford University July 16, 2011Monday, July 18, 11 84

85. Invert the modelMonday, July 18, 11 85

86. Invert the model Start simple and then add complexityMonday, July 18, 11 86

87. Before curl https://api.twitter.com/1/statuses/update.json -d status="Working on the Open Web Camp III presentation" -d oauth_token=12345- abcdefghijkl -d oauth_secret=abc123def456 ................ Open Web Camp III Stanford University July 16, 2011Monday, July 18, 11 87

88. Before curl https://api.twitter.com/1/statuses/update.json -d status="Working on the Open Web Camp III presentation" -d oauth_token=12345- abcdefghijkl -d oauth_secret=abc123def456 ................ After Tweet Open Web Camp III Stanford University July 16, 2011Monday, July 18, 11 88

89. We give you the tools to build great integrationsMonday, July 18, 11 89

90. Finding out more https://dev.twitter.com/docs/tweet-button https://dev.twitter.com/docs/follow-button https://dev.twitter.com/docs/intents https://dev.twitter.com/docs/intents/events Open Web Camp III Stanford University July 16, 2011Monday, July 18, 11 90

91. Twitter for Websites @danwrong @brianellin @benward @chanian @zprad @rsarver @ded @richardhenry @connors @kpk @binder Open Web Camp III Stanford University July 16, 2011Monday, July 18, 11 91

92. Questions?Monday, July 18, 11 92

93. http://twitter.com/intent/user?screen_name=themattharris http://twitter.com/intent/user?screen_name=jasoncosta Open Web Camp III Stanford University July 16, 2011Monday, July 18, 11 93

94. Thank YouMonday, July 18, 11 94

2011 07-16-openwebcampiii-110718110907-phpapp01

Education