SlideShare a Scribd company logo

From API to Website

Matt Harris, profile picture
Matt Harris

The document outlines methods for tweeting using the Twitter API and the @anywhere framework, emphasizing the simplicity of sending tweets and following users. It identifies key challenges in implementation, such as authentication requirements and the need for programming knowledge. The document also discusses goals for improving integration methods without requiring specialized applications or customizations.

EducationTechnology
1 of 94
Downloaded 210 times
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
From API to Website Monday, July 18, 11 1
About Us @themattharris @jasoncosta Open Web Camp III Stanford University July 16, 2011 Monday, 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, 2011 Monday, 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, 2011 Monday, 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, 2011 Monday, 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, 2011 Monday, July 18, 11 8
Tweeting through twitter.com Open Web Camp III Stanford University July 16, 2011 Monday, July 18, 11 9
Tweeting through twitter.com Open Web Camp III Stanford University July 16, 2011 Monday, 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, 2011 Monday, July 18, 11 11
Tweeting with @anywhere Open Web Camp III Stanford University July 16, 2011 Monday, 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, 2011 Monday, July 18, 11 14
The RESTful way ... • Requires some programming experience Open Web Camp III Stanford University July 16, 2011 Monday, 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, 2011 Monday, 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, 2011 Monday, 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, 2011 Monday, July 18, 11 18
@anywhere ... • Assumes a developer is comfortable developing with JavaScript Open Web Camp III Stanford University July 16, 2011 Monday, 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, 2011 Monday, 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, 2011 Monday, 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, 2011 Monday, 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, 2011 Monday, 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, 2011 Monday, July 18, 11 24
some users find it confusing Monday, 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, 2011 Monday, 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, 2011 Monday, July 18, 11 28
Starting out Open Web Camp III Stanford University July 16, 2011 Monday, July 18, 11 29
Starting out • REST, @anywhere weren’t the right tools Open Web Camp III Stanford University July 16, 2011 Monday, 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, 2011 Monday, 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, 2011 Monday, 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, 2011 Monday, July 18, 11 33
Goals Open Web Camp III Stanford University July 16, 2011 Monday, July 18, 11 34
Goals • Remove the need for an “application” Open Web Camp III Stanford University July 16, 2011 Monday, 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, 2011 Monday, 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, 2011 Monday, 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, 2011 Monday, July 18, 11 38
No whales Monday, July 18, 11 39
Remove the need for an “application” Open Web Camp III Stanford University July 16, 2011 Monday, July 18, 11 40
Remove the need for an “application” Open Web Camp III Stanford University July 16, 2011 Monday, July 18, 11 41
Don’t require per site customizations Open Web Camp III Stanford University July 16, 2011 Monday, July 18, 11 42
Don’t require per site customizations Open Web Camp III Stanford University July 16, 2011 Monday, July 18, 11 43
Provide flexible integration methods Open Web Camp III Stanford University July 16, 2011 Monday, 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, 2011 Monday, 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, 2011 Monday, 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, 2011 Monday, July 18, 11 47
Use standards and sensible defaults Open Web Camp III Stanford University July 16, 2011 Monday, 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, 2011 Monday, 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, 2011 Monday, 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, 2011 Monday, 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, 2011 Monday, July 18, 11 52
Use standards and sensible defaults Data Source url Open Web Camp III Stanford University July 16, 2011 Monday, July 18, 11 53
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
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
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
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
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
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
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
Easy to integrate Open Web Camp III Stanford University July 16, 2011 Monday, July 18, 11 61
Easy to integrate YouTube WordPress Mashable Open Web Camp III Stanford University July 16, 2011 Monday, July 18, 11 62
WordPress.com Monday, July 18, 11 63
the easier way Monday, 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, 2011 Monday, 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, 2011 Monday, 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, 2011 Monday, July 18, 11 71
Following a user through twitter.com Open Web Camp III Stanford University July 16, 2011 Monday, July 18, 11 72
Following a user through twitter.com Open Web Camp III Stanford University July 16, 2011 Monday, 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, 2011 Monday, July 18, 11 74
Tweeting with @anywhere Open Web Camp III Stanford University July 16, 2011 Monday, 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, 2011 Monday, 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, 2011 Monday, July 18, 11 78
Web Intents Tweet Follow Retweet Reply Favorite Open Web Camp III Stanford University July 16, 2011 Monday, July 18, 11 79
Streamlined UI and similar pattern to perform each intent Monday, 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, 2011 Monday, July 18, 11 81
JavaScript Events Open Web Camp III Stanford University July 16, 2011 Monday, 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, 2011 Monday, 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, 2011 Monday, July 18, 11 84
Invert the model Monday, July 18, 11 85
Invert the model Start simple and then add complexity Monday, 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, 2011 Monday, 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, 2011 Monday, July 18, 11 88
We give you the tools to build great integrations Monday, 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, 2011 Monday, 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, 2011 Monday, 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, 2011 Monday, July 18, 11 93
Thank You Monday, July 18, 11 94

More Related Content

PDF
Open Source Craft at Twitter
Chris Aniszczyk
 
PDF
Hackcamp
Matt Harris
 
PDF
Twitter Meetup at the Hacker Dojo
Matt Harris
 
PDF
@twitterapi at SocialApp Workshop
Matt Harris
 
PDF
The eLearning Agenda
Matt Harris
 
PDF
Adding timezones into Upcoming feeds
Matt Harris
 
PDF
@twitterapi meetup at Paypal Town Hall
Matt Harris
 
PDF
Advanced Twitter Twitter
John Blue
 
Open Source Craft at Twitter
Chris Aniszczyk
 
Hackcamp
Matt Harris
 
Twitter Meetup at the Hacker Dojo
Matt Harris
 
@twitterapi at SocialApp Workshop
Matt Harris
 
The eLearning Agenda
Matt Harris
 
Adding timezones into Upcoming feeds
Matt Harris
 
@twitterapi meetup at Paypal Town Hall
Matt Harris
 
Advanced Twitter Twitter
John Blue
 

Similar to From API to Website (20)

PDF
Introduction to 94 823
Ari Lightman
 
PDF
Why Twitter Matters
Henrik Joreteg
 
PDF
Twitter: A Hands On Learning Session for Researchers
KMb Unit, York University
 
PPT
about twitter (basic, history and marketing)
Pranish Balami
 
PPT
Using Social Media to Promote 'Good News'
lisbk
 
PPTX
Twitter: A Hands-On Learning Session for Researcher
KMb Unit, York University
 
PDF
Twitter: Who Cares What You're Doing Right Now, Anyway?
Scott Abel
 
PPTX
Quest to find the magic leads to twitter
Helen Crump
 
PDF
Lecture 1: Social Web Introduction (2012)
Lora Aroyo
 
PDF
Twitter on Rails
Michael Bleigh
 
PDF
Day 3 Slides
stevendkrause
 
PDF
The Social Web - Creating an Interactive Digital Experience
JessKupferman
 
PDF
Twitter Who Cares What You\'re Doing Right Now, Anyway
Scott Abel
 
PPTX
Teaching by twitter [Presented at Curtin University, Western Australia]
Andrew Smith
 
PPTX
Socialwiki org-introduction
Fluent Social
 
PDF
Approaches to Analyzing Scientific Communication on Twitter
Katrin Weller
 
PDF
Acronym Soup
Dan Brickley
 
KEY
TSDigs 2011 Metrics & Learnings
Kristy Graves
 
KEY
TSDigs 2011 Metrics & Learning Report
TechSoup
 
PDF
BGIMGT566sx 2010 Elluminate A
Christopher Allen
 
Introduction to 94 823
Ari Lightman
 
Why Twitter Matters
Henrik Joreteg
 
Twitter: A Hands On Learning Session for Researchers
KMb Unit, York University
 
about twitter (basic, history and marketing)
Pranish Balami
 
Using Social Media to Promote 'Good News'
lisbk
 
Twitter: A Hands-On Learning Session for Researcher
KMb Unit, York University
 
Twitter: Who Cares What You're Doing Right Now, Anyway?
Scott Abel
 
Quest to find the magic leads to twitter
Helen Crump
 
Lecture 1: Social Web Introduction (2012)
Lora Aroyo
 
Twitter on Rails
Michael Bleigh
 
Day 3 Slides
stevendkrause
 
The Social Web - Creating an Interactive Digital Experience
JessKupferman
 
Twitter Who Cares What You\'re Doing Right Now, Anyway
Scott Abel
 
Teaching by twitter [Presented at Curtin University, Western Australia]
Andrew Smith
 
Socialwiki org-introduction
Fluent Social
 
Approaches to Analyzing Scientific Communication on Twitter
Katrin Weller
 
Acronym Soup
Dan Brickley
 
TSDigs 2011 Metrics & Learnings
Kristy Graves
 
TSDigs 2011 Metrics & Learning Report
TechSoup
 
BGIMGT566sx 2010 Elluminate A
Christopher Allen
 
Ad

Recently uploaded (20)

PPTX
Cell Types and Its function , kingdom of life
ClaireMangundayao1
 
PDF
grade 11-chemistry_fetena_net_5883.pdf teacher guide for all student
banteamlakmebratu738
 
PDF
ANTIBIOTICS.pptx.pdf………………… xxxxxxxxxxxxx
HakHe
 
PDF
FourierSeries-QuestionsWithAnswers(Part-A).pdf
Raji Murugan
 
PDF
2.FourierTransform-ShortQuestionswithAnswers.pdf
Raji Murugan
 
PDF
O5-L3 Freight Transport Ops (International) V1.pdf
labyankof
 
PPTX
PPT- ENG7_QUARTER1_LESSON1_WEEK1. IMAGERY -DESCRIPTIONS pptx.pptx
KMDee
 
PPTX
Lesson notes of climatology university.
sgladness67
 
PDF
The Lost Whites of Pakistan by Jahanzaib Mughal.pdf
jahanzaibmughal6
 
PPTX
IMMUNITY IMMUNITY refers to protection against infection, and the immune syst...
shilpa939953
 
PDF
Microbial disease of the cardiovascular and lymphatic systems
KeyaSharma
 
PDF
Basic Mud Logging Guide for educational purpose
wdandworks
 
PDF
Computing-Curriculum for Schools in Ghana
abigailanane203
 
PDF
O7-L3 Supply Chain Operations - ICLT Program
labyankof
 
PPTX
school management -TNTEU- B.Ed., Semester II Unit 1.pptx
NihumathunnisaH
 
PDF
Insiders guide to clinical Medicine.pdf
AbhishekPatil315128
 
PPTX
Introduction_to_Human_Anatomy_and_Physiology_for_B.Pharm.pptx
chetansingh379583
 
PDF
STATICS OF THE RIGID BODIES Hibbelers.pdf
pascualasturiaskaye4
 
PDF
Pre independence Education in Inndia.pdf
goofy5603
 
PDF
Sports Quiz easy sports quiz sports quiz
nikunj2757
 
Cell Types and Its function , kingdom of life
ClaireMangundayao1
 
grade 11-chemistry_fetena_net_5883.pdf teacher guide for all student
banteamlakmebratu738
 
ANTIBIOTICS.pptx.pdf………………… xxxxxxxxxxxxx
HakHe
 
FourierSeries-QuestionsWithAnswers(Part-A).pdf
Raji Murugan
 
2.FourierTransform-ShortQuestionswithAnswers.pdf
Raji Murugan
 
O5-L3 Freight Transport Ops (International) V1.pdf
labyankof
 
PPT- ENG7_QUARTER1_LESSON1_WEEK1. IMAGERY -DESCRIPTIONS pptx.pptx
KMDee
 
Lesson notes of climatology university.
sgladness67
 
The Lost Whites of Pakistan by Jahanzaib Mughal.pdf
jahanzaibmughal6
 
IMMUNITY IMMUNITY refers to protection against infection, and the immune syst...
shilpa939953
 
Microbial disease of the cardiovascular and lymphatic systems
KeyaSharma
 
Basic Mud Logging Guide for educational purpose
wdandworks
 
Computing-Curriculum for Schools in Ghana
abigailanane203
 
O7-L3 Supply Chain Operations - ICLT Program
labyankof
 
school management -TNTEU- B.Ed., Semester II Unit 1.pptx
NihumathunnisaH
 
Insiders guide to clinical Medicine.pdf
AbhishekPatil315128
 
Introduction_to_Human_Anatomy_and_Physiology_for_B.Pharm.pptx
chetansingh379583
 
STATICS OF THE RIGID BODIES Hibbelers.pdf
pascualasturiaskaye4
 
Pre independence Education in Inndia.pdf
goofy5603
 
Sports Quiz easy sports quiz sports quiz
nikunj2757
 
Ad

From API to Website

  • 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
  • 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
  • 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
  • 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
  • 64. the easier way Monday, July 18, 11 64
  • 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
  • 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
  • 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