from api to website

From API to Website

1Monday, July 18, 11

Open Web Camp III July 16, 2011Stanford University

@themattharris @jasoncosta

About Us

et demi!

@themattharris @jasoncosta

About Us

@episod @rno

@twitterapi

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

Doing more

Following a user

Reviewing the technology

Sending a Tweet

Making it easier

Overview

Doing more

Following a user

Sending a Tweet

Making it easier

Overview

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

Tweeting through twitter.com

Tweeting with @anywhere

Is there an easier way?

Doing more

Following a user

Sending a Tweet

Making it easier

Overview

The RESTful way ...• Requires some programming experience

The RESTful way ...• Requires some programming experience• Often needs a developer to have privileged access to a server

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)

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

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

@anywhere ...• Assumes a developer is comfortable developing with JavaScript• Sometimes a developer needs privileged access to a server

@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

@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

@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

@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

some users find it confusing

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

Doing more

Following a user

Sending a Tweet

Making it easier

Overview

Starting out

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

Starting out• REST, @anywhere weren’t the right tools• Many open web technologies are familiar to users

Starting out• REST, @anywhere weren’t the right tools• Many open web technologies are familiar to users• HTML and JS can be extended easily

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

Goals• Remove the need for an “application”

Goals• Remove the need for an “application” • Don’t require per site customizations to get it to work

Goals• Remove the need for an “application” • Don’t require per site customizations to get it to work• Provide flexible and easy integration methods

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

No whales39Monday, July 18, 11

Remove the need for an “application”

Don’t require per site customizations

Provide flexible integration methods

Provide flexible integration methodsHTML<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>

Provide flexible integration methodsHTML<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>

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>

Use standards and sensible defaults

Use standards and sensible defaults• Detect the URL or use rel=”canonical” if it exists

Use standards and sensible defaults• Detect the URL or use rel=”canonical” if it exists• Detect language from lang attribute, browser language

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

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

Use standards and sensible defaultsData Source

Use standards and sensible defaultsData Source default

url HTTP Referrer

Use standards and sensible defaultsData Source rel attribute default

url rel=”canonical” HTTP Referrer

Use standards and sensible defaultsData Source data-* attribute rel attribute default

url data-url rel=”canonical” HTTP Referrer

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

Easy to integrate

YouTube WordPress Mashable

Easy to integrate

WordPress.com

the easier way

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

<a href="http://twitter.com/share" class="twitter-share-button" data-text="Working on the Open Web Camp III presentation" >Tweet</a>

The Tweet Button

Doing more

Following a user

Sending a Tweet

Making it easier

Overview

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

Following a user through twitter.com

Following with @anywhere

Is there an easier way?

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

The Follow Button

Doing more

Following a user

Sending a Tweet

Making it easier

Overview

Favorite

Follow

Retweet

Web Intents

Streamlined UI and similar pattern to perform each intent

Favorite

Follow

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

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

JavaScript Events

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

Invert the model

Start simple and then add complexity

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>

We give you the tools to build great integrations

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

Twitter for Websites

@chanian@brianellin

@richardhenry @connors @kpk

@zprad

@binder

@danwrong @benward @rsarver

Questions?

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

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

Thank You

from api to website

stanford university

moreopen web camp

comopen web camp

rnoopen web camp

jasoncostaopen web camp

anywhereopen web camp

server open web camp

javascript open web

Education

· to set up paypal on your website, you'll need to use...

html5 history api to ajaxify your magnolia website

expedia integration for travel website | travel xml api

google website optimizer api integration with motivity

augmenting api documentation with insights from stack …

api management from the trenches

oem api 6a api 16a integrated workover and …...global...

new api website feb 2015. financial advisor communications...

11v5 3rd edit from api

a message from the hairman...the sjv hapter of api meets the...

api introduction - api management workshop munich from...

can your website be your api and real life

downloaded from website

our api evolution: from metadata to tooling api for building...

componentone studio web api...

extracting insights from your api programs

floating ball valve catalog - environmental … ·...

from api directory to semantic web

your api is not a website!

using the google analytics api to make most popular pages...