The Twitter APIs are used by thousands of developers every day to build applications and services allowing users to create, consume and explore Tweets. In the past this required coding experience and server components, making it hard to implement. Now, by implementing lessons learnt from the Open Web, Twitter for Websites lowers that barrier and helps you increase engagement. We’ll explore the journey Twitter took when they created Twitter for Websites; the motivations, engineering decisions and the ways in which Open Web standards made them possible. This presentation was given during Open Web Camp III at Stanford University on July 16, 2011

1. From API to Website
Monday, July 18, 11 1

2. About Us
@themattharris @jasoncosta
Open Web Camp III Stanford University July 16, 2011
Monday, 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, 2011
Monday, July 18, 11 4

5. It shouldn’t take longer than 5 minutes to allow
someone to Tweet about your content, and stay
informed about what you’re 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, 2011
Monday, July 18, 11 6

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

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, 2011
Monday, July 18, 11 8

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

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

11. Tweeting with @anywhere
<script src="http://platform.twitter.com/anywhere.js?id=API_KEY&amp;v=1"></script>
<script type="text/javascript">
twttr.anywhere(function (T) {
T("#tbox").tweetBox({
defaultContent: "Working on the Open Web Camp III presentation",
});
});
</script>
<div id="tbox"></div>
Open Web Camp III Stanford University July 16, 2011
Monday, July 18, 11 11

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

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

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

15. The RESTful way ...
• Requires some programming experience
Open Web Camp III Stanford University July 16, 2011
Monday, 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, 2011
Monday, 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, 2011
Monday, 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, 2011
Monday, July 18, 11 18

19. @anywhere ...
• Assumes a developer is comfortable developing with JavaScript
Open Web Camp III Stanford University July 16, 2011
Monday, 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, 2011
Monday, 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, 2011
Monday, 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 it’s used on to be registered
Open Web Camp III Stanford University July 16, 2011
Monday, 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 it’s used on to be registered
• Can be hard to implement without support from Twitter
Open Web Camp III Stanford University July 16, 2011
Monday, 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 it’s used on to be registered
• Can be hard to implement without support from Twitter
• Some users find it confusing
Open Web Camp III Stanford University July 16, 2011
Monday, July 18, 11 24

25. some users find it confusing
Monday, 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, 2011
Monday, July 18, 11 27

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

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

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

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

32. Starting out
• REST, @anywhere weren’t 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, 2011
Monday, July 18, 11 32

33. Starting out
• REST, @anywhere weren’t 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, 2011
Monday, July 18, 11 33

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

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

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

37. Goals
• Remove the need for an “application”
• Don’t require per site customizations to get it to work
• Provide flexible and easy integration methods
Open Web Camp III Stanford University July 16, 2011
Monday, July 18, 11 37

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

39. No whales
Monday, July 18, 11 39

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

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

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

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

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

45. Provide flexible integration methods
HTML
<a href="http://twitter.com/share?via=themattharris" class="twitter-share-button">Tweet</a>
Open Web Camp III Stanford University July 16, 2011
Monday, July 18, 11 45

46. Provide flexible integration methods
HTML
<a href="http://twitter.com/share?via=themattharris" class="twitter-share-button">Tweet</a>
JavaScript
<script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>
<a href="http://twitter.com/share" class="twitter-share-button" data-via=”themattharris”>Tweet</a>
Open Web Camp III Stanford University July 16, 2011
Monday, July 18, 11 46

47. Provide flexible integration methods
HTML
<a href="http://twitter.com/share?via=themattharris" class="twitter-share-button">Tweet</a>
JavaScript
<script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>
<a href="http://twitter.com/share" class="twitter-share-button" data-via=”themattharris”>Tweet</a>
iFrame
<iframe allowtransparency="true" frameborder="0" scrolling="no"
src="http://platform.twitter.com/widgets/tweet_button.html?via=themattharris"
style="width:130px; height:50px;"></iframe>
Open Web Camp III Stanford University July 16, 2011
Monday, July 18, 11 47

48. Use standards and sensible defaults
Open Web Camp III Stanford University July 16, 2011
Monday, 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, 2011
Monday, 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, 2011
Monday, 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, 2011
Monday, 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, 2011
Monday, July 18, 11 52

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

54. Use standards and sensible defaults
Data Source default
url HTTP Referrer
Open Web Camp III Stanford University July 16, 2011
Monday, 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, 2011
Monday, 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, 2011
Monday, 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, 2011
Monday, 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, 2011
Monday, 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 <title>
Open Web Camp III Stanford University July 16, 2011
Monday, 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 <title>
Browser
lang ?lang data-lang
setting
Open Web Camp III Stanford University July 16, 2011
Monday, July 18, 11 60

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

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

63. WordPress.com
Monday, July 18, 11 63

64. the easier way
Monday, July 18, 11 64

65. <a href="http://twitter.com/share">Tweet</a>
Monday, July 18, 11 65

66. The Tweet Button
<a href="http://twitter.com/share"
class="twitter-share-button"
data-text="Working on the Open Web Camp III presentation"
>Tweet</a>
<script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>
Open Web Camp III Stanford University July 16, 2011
Monday, July 18, 11 66

67. Monday, July 18, 11 67

68. Monday, July 18, 11 68

69. Monday, July 18, 11 69

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

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, 2011
Monday, July 18, 11 71

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

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

74. Following with @anywhere
<script src="http://platform.twitter.com/anywhere.js?id=API_KEY&amp;v=1"></script>
<script type="text/javascript">
twttr.anywhere(function (T) {
T("#follow").followButton('themattharris');
});
</script>
<div id="follow"></div>
Open Web Camp III Stanford University July 16, 2011
Monday, July 18, 11 74

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

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

77. The Follow Button
<a href="http://twitter.com/themattharris"
class="twitter-follow-button"
>Follow @themattharris</a>
<script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>
Open Web Camp III Stanford University July 16, 2011
Monday, July 18, 11 77

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

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

80. Streamlined UI and similar pattern to perform each
intent
Monday, 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, 2011
Monday, July 18, 11 81

82. JavaScript Events
Open Web Camp III Stanford University July 16, 2011
Monday, 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, 2011
Monday, 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, 2011
Monday, July 18, 11 84

85. Invert the model
Monday, July 18, 11 85

86. Invert the model
Start simple and then add complexity
Monday, 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, 2011
Monday, 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
<a href="http://twitter.com/intent/tweet">Tweet</a>
Open Web Camp III Stanford University July 16, 2011
Monday, July 18, 11 88

89. We give you the tools to build great integrations
Monday, 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, 2011
Monday, 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, 2011
Monday, 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, 2011
Monday, July 18, 11 93

94. Thank You
Monday, July 18, 11 94