from api to website
DESCRIPTION
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, 2011TRANSCRIPT
From API to Website
1Monday, July 18, 11
Open Web Camp III July 16, 2011Stanford University
@themattharris @jasoncosta
About Us
2Monday, July 18, 11
et demi!
3Monday, July 18, 11
Open Web Camp III July 16, 2011Stanford University
@themattharris @jasoncosta
About Us
@episod @rno
@twitterapi
4Monday, July 18, 11
It shouldn’t take longer than 5 minutes to allow someone to Tweet about your content, and stay informed about what you’re saying.
5Monday, July 18, 11
Open Web Camp III July 16, 2011Stanford University
Doing more
Following a user
Reviewing the technology
Sending a Tweet
Making it easier
Overview
6Monday, July 18, 11
Open Web Camp III July 16, 2011Stanford University
Doing more
Following a user
Reviewing the technology
Sending a Tweet
Making it easier
Overview
7Monday, July 18, 11
Open Web Camp III July 16, 2011Stanford University
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", ...}
Tweeting the RESTful way
8Monday, July 18, 11
Open Web Camp III July 16, 2011Stanford University
Tweeting through twitter.com
9Monday, July 18, 11
Open Web Camp III July 16, 2011Stanford University
Tweeting through twitter.com
10Monday, July 18, 11
Open Web Camp III July 16, 2011Stanford University
<script src="http://platform.twitter.com/anywhere.js?id=API_KEY&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>
Tweeting with @anywhere
11Monday, July 18, 11
Open Web Camp III July 16, 2011Stanford University
Tweeting with @anywhere
12Monday, July 18, 11
Is there an easier way?
13Monday, July 18, 11
Open Web Camp III July 16, 2011Stanford University
Doing more
Following a user
Reviewing the technology
Sending a Tweet
Making it easier
Overview
14Monday, July 18, 11
Open Web Camp III July 16, 2011Stanford University
The RESTful way ...• Requires some programming experience
15Monday, July 18, 11
Open Web Camp III July 16, 2011Stanford University
The RESTful way ...• Requires some programming experience• Often needs a developer to have privileged access to a server
16Monday, July 18, 11
Open Web Camp III July 16, 2011Stanford University
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)
17Monday, July 18, 11
Open Web Camp III July 16, 2011Stanford University
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
18Monday, July 18, 11
Open Web Camp III July 16, 2011Stanford University
@anywhere ...• Assumes a developer is comfortable developing with JavaScript
19Monday, July 18, 11
Open Web Camp III July 16, 2011Stanford University
@anywhere ...• Assumes a developer is comfortable developing with JavaScript• Sometimes a developer needs privileged access to a server
20Monday, July 18, 11
Open Web Camp III July 16, 2011Stanford University
@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
21Monday, July 18, 11
Open Web Camp III July 16, 2011Stanford University
@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
22Monday, July 18, 11
Open Web Camp III July 16, 2011Stanford University
@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
23Monday, July 18, 11
Open Web Camp III July 16, 2011Stanford University
@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
24Monday, July 18, 11
some users find it confusing
25Monday, July 18, 11
26Monday, July 18, 11
Open Web Camp III July 16, 2011Stanford University
Strengths & WeaknessesMethod @anywhere REST
Strengths Can code client-side interactions
Performance tied to api.twitter.com
JavaScript is familiar to developers
RESTful model for accessing resources
Weaknesses Too complex to implement Must handle authentication
Confusing model for users Need direct access to a server
27Monday, July 18, 11
Open Web Camp III July 16, 2011Stanford University
Doing more
Following a user
Reviewing the technology
Sending a Tweet
Making it easier
Overview
28Monday, July 18, 11
Open Web Camp III July 16, 2011Stanford University
Starting out
29Monday, July 18, 11
Open Web Camp III July 16, 2011Stanford University
Starting out• REST, @anywhere weren’t the right tools
30Monday, July 18, 11
Open Web Camp III July 16, 2011Stanford University
Starting out• REST, @anywhere weren’t the right tools• Many open web technologies are familiar to users
31Monday, July 18, 11
Open Web Camp III July 16, 2011Stanford University
Starting out• REST, @anywhere weren’t the right tools• Many open web technologies are familiar to users• HTML and JS can be extended easily
32Monday, July 18, 11
Open Web Camp III July 16, 2011Stanford University
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
33Monday, July 18, 11
Open Web Camp III July 16, 2011Stanford University
Goals
34Monday, July 18, 11
Open Web Camp III July 16, 2011Stanford University
Goals• Remove the need for an “application”
35Monday, July 18, 11
Open Web Camp III July 16, 2011Stanford University
Goals• Remove the need for an “application” • Don’t require per site customizations to get it to work
36Monday, July 18, 11
Open Web Camp III July 16, 2011Stanford University
Goals• Remove the need for an “application” • Don’t require per site customizations to get it to work• Provide flexible and easy integration methods
37Monday, July 18, 11
Open Web Camp III July 16, 2011Stanford University
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
38Monday, July 18, 11
No whales39Monday, July 18, 11
Open Web Camp III July 16, 2011Stanford University
Remove the need for an “application”
40Monday, July 18, 11
Open Web Camp III July 16, 2011Stanford University
Remove the need for an “application”
41Monday, July 18, 11
Open Web Camp III July 16, 2011Stanford University
Don’t require per site customizations
42Monday, July 18, 11
Open Web Camp III July 16, 2011Stanford University
Don’t require per site customizations
43Monday, July 18, 11
Open Web Camp III July 16, 2011Stanford University
Provide flexible integration methods
44Monday, July 18, 11
Open Web Camp III July 16, 2011Stanford University
Provide flexible integration methodsHTML<a href="http://twitter.com/share?via=themattharris" class="twitter-share-button">Tweet</a>
45Monday, July 18, 11
Open Web Camp III July 16, 2011Stanford University
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>
Provide flexible integration methodsHTML<a href="http://twitter.com/share?via=themattharris" class="twitter-share-button">Tweet</a>
46Monday, July 18, 11
Open Web Camp III July 16, 2011Stanford University
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>
Provide flexible integration methods
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>
HTML<a href="http://twitter.com/share?via=themattharris" class="twitter-share-button">Tweet</a>
47Monday, July 18, 11
Open Web Camp III July 16, 2011Stanford University
Use standards and sensible defaults
48Monday, July 18, 11
Open Web Camp III July 16, 2011Stanford University
Use standards and sensible defaults• Detect the URL or use rel=”canonical” if it exists
49Monday, July 18, 11
Open Web Camp III July 16, 2011Stanford University
Use standards and sensible defaults• Detect the URL or use rel=”canonical” if it exists• Detect language from lang attribute, browser language
50Monday, July 18, 11
Open Web Camp III July 16, 2011Stanford University
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
51Monday, July 18, 11
Open Web Camp III July 16, 2011Stanford University
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
52Monday, July 18, 11
Open Web Camp III July 16, 2011Stanford University
Use standards and sensible defaultsData Source
url
53Monday, July 18, 11
Open Web Camp III July 16, 2011Stanford University
Use standards and sensible defaultsData Source default
url HTTP Referrer
54Monday, July 18, 11
Open Web Camp III July 16, 2011Stanford University
Use standards and sensible defaultsData Source rel attribute default
url rel=”canonical” HTTP Referrer
55Monday, July 18, 11
Open Web Camp III July 16, 2011Stanford University
Use standards and sensible defaultsData Source data-* attribute rel attribute default
url data-url rel=”canonical” HTTP Referrer
56Monday, July 18, 11
Open Web Camp III July 16, 2011Stanford University
Use standards and sensible defaultsData Source Query string data-* attribute rel attribute default
url ?url data-url rel=”canonical” HTTP Referrer
57Monday, July 18, 11
Open Web Camp III July 16, 2011Stanford University
Use standards and sensible defaultsData Source Query string data-* attribute rel attribute default
url ?url data-url rel=”canonical” HTTP Referrer
via ?via data-via rel=”me”
58Monday, July 18, 11
Open Web Camp III July 16, 2011Stanford University
Use standards and sensible defaultsData 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>
59Monday, July 18, 11
Open Web Camp III July 16, 2011Stanford University
Use standards and sensible defaultsData 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>
lang ?lang data-lang Browser setting
60Monday, July 18, 11
Open Web Camp III July 16, 2011Stanford University
Easy to integrate
61Monday, July 18, 11
Open Web Camp III July 16, 2011Stanford University
YouTube WordPress Mashable
Easy to integrate
62Monday, July 18, 11
WordPress.com
63Monday, July 18, 11
the easier way
64Monday, July 18, 11
<a href="http://twitter.com/share">Tweet</a>
65Monday, July 18, 11
Open Web Camp III July 16, 2011Stanford University
<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>
The Tweet Button
66Monday, July 18, 11
67Monday, July 18, 11
68Monday, July 18, 11
69Monday, July 18, 11
Open Web Camp III July 16, 2011Stanford University
Doing more
Following a user
Reviewing the technology
Sending a Tweet
Making it easier
Overview
70Monday, July 18, 11
Open Web Camp III July 16, 2011Stanford University
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", ...}
Following the RESTful way
71Monday, July 18, 11
Open Web Camp III July 16, 2011Stanford University
Following a user through twitter.com
72Monday, July 18, 11
Open Web Camp III July 16, 2011Stanford University
Following a user through twitter.com
73Monday, July 18, 11
Open Web Camp III July 16, 2011Stanford University
<script src="http://platform.twitter.com/anywhere.js?id=API_KEY&v=1"></script><script type="text/javascript"> twttr.anywhere(function (T) { T("#follow").followButton('themattharris'); });</script><div id="follow"></div>
Following with @anywhere
74Monday, July 18, 11
Open Web Camp III July 16, 2011Stanford University
Tweeting with @anywhere
75Monday, July 18, 11
Is there an easier way?
76Monday, July 18, 11
Open Web Camp III July 16, 2011Stanford University
<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>
The Follow Button
77Monday, July 18, 11
Open Web Camp III July 16, 2011Stanford University
Doing more
Following a user
Reviewing the technology
Sending a Tweet
Making it easier
Overview
78Monday, July 18, 11
Open Web Camp III July 16, 2011Stanford University
Favorite
Reply
Follow
Tweet
Retweet
Web Intents
79Monday, July 18, 11
Streamlined UI and similar pattern to perform each intent
80Monday, July 18, 11
Open Web Camp III July 16, 2011Stanford University
Favorite
Reply
Follow
Tweet
Retweet
Web Intentshttp://twitter.com/intent/tweet
http://twitter.com/intent/user
http://twitter.com/intent/retweet
http://twitter.com/intent/reply
http://twitter.com/intent/favorite
81Monday, July 18, 11
Open Web Camp III July 16, 2011Stanford University
JavaScript Events
82Monday, July 18, 11
Open Web Camp III July 16, 2011Stanford University
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});
JavaScript Events
83Monday, July 18, 11
Open Web Camp III July 16, 2011Stanford University
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 + ")");});
JavaScript Events - Analytics
84Monday, July 18, 11
Invert the model
85Monday, July 18, 11
Invert the model
Start simple and then add complexity
86Monday, July 18, 11
Open Web Camp III July 16, 2011Stanford University
Beforecurl 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” ................
87Monday, July 18, 11
Open Web Camp III July 16, 2011Stanford University
Beforecurl 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>
88Monday, July 18, 11
We give you the tools to build great integrations
89Monday, July 18, 11
Open Web Camp III July 16, 2011Stanford University
https://dev.twitter.com/docs/tweet-buttonhttps://dev.twitter.com/docs/follow-buttonhttps://dev.twitter.com/docs/intentshttps://dev.twitter.com/docs/intents/events
Finding out more
90Monday, July 18, 11
Open Web Camp III July 16, 2011Stanford University
Twitter for Websites
@ded
@chanian@brianellin
@richardhenry @connors @kpk
@zprad
@binder
@danwrong @benward @rsarver
91Monday, July 18, 11
Questions?
92Monday, July 18, 11
Open Web Camp III July 16, 2011Stanford University
http://twitter.com/intent/user?screen_name=jasoncosta
http://twitter.com/intent/user?screen_name=themattharris
93Monday, July 18, 11
Thank You
94Monday, July 18, 11