• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
From API to Website
 

From API to Website

on

  • 9,949 views

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 ...

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

Statistics

Views

Total Views
9,949
Views on SlideShare
9,853
Embed Views
96

Actions

Likes
11
Downloads
206
Comments
2

11 Embeds 96

https://twitter.com 36
http://tweetedtimes.com 18
http://lanyrd.com 18
http://twitter.com 10
http://mihalich2.site 7
http://wagner-abdalla.blogspot.com 2
https://twimg0-a.akamaihd.net 1
http://trunk.ly 1
http://www.twylah.com 1
http://a0.twimg.com 1
http://bridgitmaniabrasil.blogspot.com.br 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

12 of 2 previous next

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    From API to Website From API to Website Presentation Transcript

    • From API to WebsiteMonday, July 18, 11 1
    • About Us @themattharris @jasoncosta Open Web Camp III Stanford University July 16, 2011Monday, July 18, 11 2
    • et demi!Monday, July 18, 11 3
    • About Us @themattharris @jasoncosta @twitterapi @episod @rno Open Web Camp III Stanford University July 16, 2011Monday, July 18, 11 4
    • 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
    • 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
    • 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 7
    • 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
    • Tweeting through twitter.com Open Web Camp III Stanford University July 16, 2011Monday, July 18, 11 9
    • Tweeting through twitter.com Open Web Camp III Stanford University July 16, 2011Monday, July 18, 11 10
    • 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, 2011Monday, July 18, 11 11
    • Tweeting with @anywhere Open Web Camp III Stanford University July 16, 2011Monday, July 18, 11 12
    • Is there an easier way?Monday, July 18, 11 13
    • 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 14
    • The RESTful way ... • Requires some programming experience Open Web Camp III Stanford University July 16, 2011Monday, July 18, 11 15
    • 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
    • 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
    • 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
    • @anywhere ... • Assumes a developer is comfortable developing with JavaScript Open Web Camp III Stanford University July 16, 2011Monday, July 18, 11 19
    • @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
    • @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
    • @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, 2011Monday, July 18, 11 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 • Can be hard to implement without support from Twitter Open Web Camp III Stanford University July 16, 2011Monday, July 18, 11 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 • Some users find it confusing Open Web Camp III Stanford University July 16, 2011Monday, July 18, 11 24
    • some users find it confusingMonday, July 18, 11 25
    • Monday, July 18, 11 26
    • 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
    • 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 28
    • Starting out Open Web Camp III Stanford University July 16, 2011Monday, July 18, 11 29
    • Starting out • REST, @anywhere weren’t the right tools Open Web Camp III Stanford University July 16, 2011Monday, July 18, 11 30
    • 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, 2011Monday, July 18, 11 31
    • 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, 2011Monday, July 18, 11 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 • Improved ubiquity Open Web Camp III Stanford University July 16, 2011Monday, July 18, 11 33
    • Goals Open Web Camp III Stanford University July 16, 2011Monday, July 18, 11 34
    • Goals • Remove the need for an “application” Open Web Camp III Stanford University July 16, 2011Monday, July 18, 11 35
    • 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, 2011Monday, July 18, 11 36
    • 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, 2011Monday, July 18, 11 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 • High performance Open Web Camp III Stanford University July 16, 2011Monday, July 18, 11 38
    • No whalesMonday, July 18, 11 39
    • Remove the need for an “application” Open Web Camp III Stanford University July 16, 2011Monday, July 18, 11 40
    • Remove the need for an “application” Open Web Camp III Stanford University July 16, 2011Monday, July 18, 11 41
    • Don’t require per site customizations Open Web Camp III Stanford University July 16, 2011Monday, July 18, 11 42
    • Don’t require per site customizations Open Web Camp III Stanford University July 16, 2011Monday, July 18, 11 43
    • Provide flexible integration methods Open Web Camp III Stanford University July 16, 2011Monday, July 18, 11 44
    • 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, 2011Monday, July 18, 11 45
    • 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, 2011Monday, July 18, 11 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> 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, 2011Monday, July 18, 11 47
    • Use standards and sensible defaults Open Web Camp III Stanford University July 16, 2011Monday, July 18, 11 48
    • 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
    • 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
    • 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
    • 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
    • Use standards and sensible defaults Data Source url Open Web Camp III Stanford University July 16, 2011Monday, July 18, 11 53
    • Use standards and sensible defaults Data Source default url HTTP Referrer Open Web Camp III Stanford University July 16, 2011Monday, July 18, 11 54
    • 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
    • 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
    • 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
    • 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
    • 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, 2011Monday, July 18, 11 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> Browser lang ?lang data-lang setting Open Web Camp III Stanford University July 16, 2011Monday, July 18, 11 60
    • Easy to integrate Open Web Camp III Stanford University July 16, 2011Monday, July 18, 11 61
    • Easy to integrate YouTube WordPress Mashable Open Web Camp III Stanford University July 16, 2011Monday, July 18, 11 62
    • WordPress.comMonday, July 18, 11 63
    • the easier wayMonday, July 18, 11 64
    • <a href="http://twitter.com/share">Tweet</a>Monday, July 18, 11 65
    • 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, 2011Monday, July 18, 11 66
    • Monday, July 18, 11 67
    • Monday, July 18, 11 68
    • Monday, July 18, 11 69
    • 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 70
    • 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
    • Following a user through twitter.com Open Web Camp III Stanford University July 16, 2011Monday, July 18, 11 72
    • Following a user through twitter.com Open Web Camp III Stanford University July 16, 2011Monday, July 18, 11 73
    • 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, 2011Monday, July 18, 11 74
    • Tweeting with @anywhere Open Web Camp III Stanford University July 16, 2011Monday, July 18, 11 75
    • Is there an easier way?Monday, July 18, 11 76
    • 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, 2011Monday, July 18, 11 77
    • 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 78
    • Web Intents Tweet Follow Retweet Reply Favorite Open Web Camp III Stanford University July 16, 2011Monday, July 18, 11 79
    • Streamlined UI and similar pattern to perform each intentMonday, July 18, 11 80
    • 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
    • JavaScript Events Open Web Camp III Stanford University July 16, 2011Monday, July 18, 11 82
    • 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
    • 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
    • Invert the modelMonday, July 18, 11 85
    • Invert the model Start simple and then add complexityMonday, July 18, 11 86
    • 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
    • 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, 2011Monday, July 18, 11 88
    • We give you the tools to build great integrationsMonday, July 18, 11 89
    • 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
    • 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
    • Questions?Monday, July 18, 11 92
    • 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
    • Thank YouMonday, July 18, 11 94