2011 07-16-openwebcampiii-110718110907-phpapp01

From API to Website

Monday, July 18, 11 1

About Us

@themattharris @jasoncosta

Open Web Camp III Stanford University July 16, 2011


et demi!


About Us

@themattharris @jasoncosta

@twitterapi

@episod @rno



It shouldn’t take longer than 5 minutes to allow
someone to Tweet about your content, and stay
informed about what you’re saying.


Overview
Sending a Tweet

Reviewing the technology

Making it easier

Following a user

Doing more



Overview
Sending a Tweet


Making it easier

Following a user

Doing more



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",
...
}



Tweeting through twitter.com



Tweeting with @anywhere

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



Is there an easier way?


Overview
Sending a Tweet


Making it easier

Following a user

Doing more



The RESTful way ...
• Requires some programming experience



The RESTful way ...
• Often needs a developer to have privileged access to a server



The RESTful way ...
• Requires the developer to handle the authentication (OAuth)



The RESTful way ...
• Requires the developer to handle the authentication (OAuth)
• Prefers the developer to register an application on dev.twitter.com



@anywhere ...
• Assumes a developer is comfortable developing with JavaScript



@anywhere ...
• Sometimes a developer needs privileged access to a server



@anywhere ...
• Requires the developer to register an application on dev.twitter.com



@anywhere ...
• Requires every URL it’s used on to be registered



@anywhere ...
• Can be hard to implement without support from Twitter



@anywhere ...
• Can be hard to implement without support from Twitter
• Some users ﬁnd it confusing



some users ﬁnd it confusing


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



Overview
Sending a Tweet


Making it easier

Following a user

Doing more



Starting out



Starting out
• REST, @anywhere weren’t the right tools



Starting out
• Many open web technologies are familiar to users



Starting out
• HTML and JS can be extended easily



Starting out
• HTML and JS can be extended easily
• Improved ubiquity



Goals



Goals
• Remove the need for an “application”



Goals
• Don’t require per site customizations to get it to work



Goals
• Provide ﬂexible and easy integration methods



Goals
• Provide ﬂexible and easy integration methods
• High performance



No whales

Remove the need for an “application”



Don’t require per site customizations



Provide ﬂexible integration methods



HTML
<a href="http://twitter.com/share?via=themattharris" class="twitter-share-button">Tweet</a>



HTML

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>



HTML

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



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



• Detect via user from rel=”me” links that point to twitter.com
• Allow values to be manually overridden



Data Source

url



Data Source default

url HTTP Referrer



Data Source rel attribute default

url rel=”canonical” HTTP Referrer



Data Source data-* attribute rel attribute default

url data-url rel=”canonical” HTTP Referrer



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>






text ?text data-text <title>

Browser
lang ?lang data-lang
setting



Easy to integrate



Easy to integrate

YouTube WordPress Mashable



WordPress.com


the easier way


<a href="http://twitter.com/share">Tweet</a>


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>




Overview
Sending a Tweet


Making it easier

Following a user

Doing more



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",
...
}



Following a user through twitter.com



Following with @anywhere

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



Is there an easier way?


The Follow Button

<a href="http://twitter.com/themattharris"
class="twitter-follow-button"
>Follow @themattharris</a>




Overview
Sending a Tweet


Making it easier

Following a user

Doing more



Web Intents
Tweet

Follow

Retweet

Reply

Favorite



Streamlined UI and similar pattern to perform each
intent


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



JavaScript Events



JavaScript Events
twttr.events.bind(‘click’, function(event) {
// Do something there
});

twttr.events.bind(‘favorite’, function(event) {
});

twttr.events.bind(‘tweet’, function(event) {
});

twttr.events.bind(‘retweet’, function(event) {
});

twttr.events.bind(‘follow’, function(event) {
});



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 + ")");
});



Invert the model


Invert the model

Start simple and then add complexity


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



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>



We give you the tools to build great integrations


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



Twitter for Websites

@danwrong @brianellin @benward @chanian @zprad @rsarver

@ded @richardhenry @connors @kpk @binder



Questions?


http://twitter.com/intent/user?screen_name=themattharris

http://twitter.com/intent/user?screen_name=jasoncosta



Thank You


2011 07-16-openwebcampiii-110718110907-phpapp01

Recommended

Recommended

More Related Content

Recently uploaded

Recently uploaded (20)

Featured

Featured (20)

2011 07-16-openwebcampiii-110718110907-phpapp01