• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
@Anywhere
 

@Anywhere

on

  • 19,246 views

Overview of how to integrate @Anywhere

Overview of how to integrate @Anywhere

Statistics

Views

Total Views
19,246
Views on SlideShare
18,523
Embed Views
723

Actions

Likes
45
Downloads
221
Comments
4

18 Embeds 723

http://www.labnol.org 413
http://www.slideshare.net 163
http://netcrunched.com 35
http://arpitshah.com 27
http://crunchify.com 24
http://icrunchies.com 10
http://www.twylah.com 10
http://www.socialwebstrategy.co.uk 9
http://crunchify.co 9
http://a0.twimg.com 8
http://icrunched.co 4
http://www.iweb34.com 3
http://translate.googleusercontent.com 2
http://crunchmeme.com 2
url_unknown 1
https://si0.twimg.com 1
https://twitter.com 1
http://icrunch.co 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

14 of 4 previous next Post a comment

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • <br />
  • <br />
  • Setting up @Anywhere is easy. Let&apos;s start with a simple use case. Hovercards are a feature of Twitter.com that are also available via @Anywhere. Let&apos;s walk through how you can put Hovercards on your site. <br />
  • If you already have Twitter usernames mentioned in your web site or application, Hovercards provide your users with a small, context-aware tooltip that provides access to data about a particular Twitter user. <br />
  • <br />
  • <br />
  • Goto http://dev.twitter.com/anywhere and register your application <br /> <br />
  • At the end of the registration process you will be provided with a snippet of JavaScript you can copy and paste into your site. <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • Let&apos;s take a closer look at the @Anywhere JavaScript that you copy and paste into your site to see how easy it is to work with @Anywhere. <br />
  • Configuring @Anywhere is easy. When including the @Anywhere JavaScript file you simply pass your API key and the version you want to work with as parameters in the URL. <br />
  • - When you call the anywhere() method, you pass in a callback that receives a Twitter API client instance as its only argument <br /> - By convention we name that argument "T" <br /> - All @Anywhere functionality is hung off of the API client instance ("T") <br />
  • - T is a function that you can use to scope @Anywhere functionality <br /> - By default all @Anywhere functionality operates on the body of the document <br />
  • - Over the past couple of years CSS selectors have become the preferred means of accessing elements in the DOM <br /> <br /> - So, with @Anywhere you can pass a CSS selector to T to limit the scope of where the @Anywhere to a particular element or elements in the page <br /> <br /> - This makes using @Anywhere easy because it is building on techniques most developers are already familiar with <br />
  • Another design goal of @Anywhere was that it needed to be fast. This was especially important since optimizing client-side/in-browser performance has been a real priority in recent years. We didn&apos;t want developers to worry that by using/including @Anywhere they&apos;d be making some sacrifices regarding performance. <br />
  • <br />
  • - There is a one to many relationship between anywhere.js and @Anywhere client instances <br /> <br /> - You only need to include the anywhere.js file once, and can then create any number of @Anywhere client instances (via twttr.anywhere()) per page as illustrated in this example <br /> <br /> - All @Anywhere client instances share the same script resources <br /> <br />
  • - Additionally, feature-specific resources are loaded on-demand <br /> <br /> - For example, the TweetBox code is not loaded into the page until the tweetBox() method is called <br />
  • - Because @Anywhere features are loaded on demand, it makes it very easy to defer the loading and rendering of a given @Anywhere feature until it is request the by the user <br /> <br /> - In this example, the TweetBox will be not be loaded and rendered until the user clicks the comment button. <br />
  • <br />
  • - iframes provide self-contained scope for JavaScript and CSS <br /> <br /> - @Anywhere loads its dependencies into an iframe to keep our scripts sandboxed from those of the host site <br />
  • - @Anywhere widgets run in an iframe to prevent styles of the host site bleeding in <br />
  • <br />
  • <br />
  • <br />
  • - Under the hood @Anywhere is simply using the Twitter API. Therefore, there is functionality in @Anywhere that doesn&apos;t require the user to auth. We&apos;ve seen one example of this already: being able to view a user&apos;s profile data in a Hovercard. <br /> <br /> - For those things that DO require require the user to auth, @Anywhere handles all that for you (completely client-side auth) <br /> <br /> - In addition you can piggy back on our auth, here&apos;s how <br />
  • - @Anywhere provides an authComplete and signOut event that can be used to determine whether or not users of your web site or web application have logged in to Twitter and authorized your application for access. <br /> <br /> - Using the "Connect with Twitter" button it is possible to bind listeners for both the authComplete and signOut events via an object literal passed to the connectButton method. Listeners for the authComplete are passed the logged in user as a single argument. <br />
  • The connect flow is as follows: <br /> <br /> 1. Connect launches popup <br /> <br /> 2. User asked either to: <br /> - Auth (if logged in to Twitter) <br /> - Login + auth (if not logged in) <br /> <br /> 3. Single-level of permissions (for simplicity for the user and dev) <br /> <br /> 4. Tokens are good for 2 hours and are automatically refreshed as long as the user is logged into Twitter <br />
  • - @Anywhere authentication is via OAuth 2.0 <br /> <br /> - Not fully implemented all profiles, just what we needed for @Anywhere <br /> <br /> - Production, non @Anywhere implementations should continue to use the OAuth 1 endpoint until our OAuth 2.0 is deployed <br /> <br /> - Once we have our OAuth 2.0 endpoint deployed we&apos;ll provide a complete migration plan <br />
  • - The isConnected() method can be used to determine if the user has already logged in has authorized your web site or application. When the user is connected the "currentUser" property can be used to retrieve information about the logged-in user. <br /> <br /> - The user object has a data method that can be passed a string representing the property to retrieve. <br /> <br /> - This example illustrates how to use jQuery and @Anywhere to conditionally display either a Connect with Twitter button, or the user&apos;s screen name and profile image if they&apos;ve already authenticated. <br />
  • - This example is the same as the previous slide, but uses YUI 3&apos;s method of determining when the page is ready <br />
  • The authComplete and signOut events are also globally accessible on the Twitter API client instance (T), allowing you to listen for them when triggered by any @Anywhere functionality. <br />
  • <br />
  • <br />
  • @Anywhere provides a convenient way to link Twitter usernames found in your web site or application back to a user&apos;s profile page on Twitter.com. A Twitter screen name is an &apos;@&apos; symbol followed by 1 to 20 alphanumeric characters, including underscores ("_"). @ev or @biz and two examples of Twitter username. <br />
  • - To automatically linkify Twitter usernames, simply call T.linkifyUsers() <br /> <br /> - Calling linkifyUsers in this way would attempt to linkify all potential Twitter users in the of the page. <br />
  • - To limit the scope of what is linkified, simply pass a CSS selector to the Twitter API client (T). <br /> <br /> - For example, to linkify only Twitter usernames found in an element with the id of "main", pass the selector "#main" to T. <br />
  • API is consistent across each @Anywhere util and widget <br /> <br /> - Specify the element(s) via selector (omitting selector == apply to ) <br /> <br /> - Call method the collection <br /> <br /> - Each has options - specified via an object literal <br />
  • - Developer documentation includes all configuration options for each @Anywhere feature along with working examples <br />
  • <br />
  • Follow buttons make it easy to provide users of your site or application with a way to follow users on Twitter. Adding Follow Buttons to your web site or web application is easy: simply call T passing in a selector indicating where you want the Follow Button to appear, and call the followButton method specifying a Twitter username. <br />
  • The Tweet Box allows Twitter users to tweet directly from within your web site or web application. To use the Tweet Box, call T passing in a selector indicating where you want the Tweet Box to appear, and call the tweetBox method. <br />
  • <br />
  • <br />
  • <br />
  • - @Anywhere also provides a JavaScript implementation of the entire Twitter API <br /> - Currently the JavaScript implementation of the Twitter API is in beta, and is not part of the 1.0.0 release <br /> - If you&apos;d like to use the JavaScript API, some changes to your @Anywhere configuration are necessary <br /> <br />
  • - Another feature provided by @Anywhere is a JavaScript interface to the REST API. This feature is currently in beta, and is available to developers at Chirp. <br /> <br /> - To use the JavaScript API you need to modify your configuration of @Anywhere <br />
  • - All API methods are asynchronous <br /> <br /> - Can specify a success callback as the second argument to any API method call <br />
  • If you wish to listen for both success and error, you can specify those listeners via an object literal passed as a second argument to any API method call <br />
  • Because AJAX operations are asynchronous, calls need to nested <br />
  • Using the Twitter JavaScript API you can chain methods calls and specify your callback at the end of the chain <br />
  • The documentation for the JavaScript API can be found at http://platform.twitter.com/js-api.html <br /> <br /> <br />
  • <br />
  • When declaring a version number, specifying the version as a whole number will result in @Anywhere using the latest available version for that major version number. For example, if the current available version of @Anywhere is version 1.2.1, specifying a version of 1 will result in @Anywhere using version 1.2.1. <br />
  • It is also possible to use @Anywhere by declaring a specific version number. Indicating a specific version number will ensure your @Anywhere integration remains on a desired version regardless of the latest available version. <br />
  • - You can pass the version of @Anywhere as the first argument to the anywhere() method <br /> <br /> - The primary use case for passing the version as an argument to the anywhere() would be running two different versions of @Anywhere side-by-side on the same page <br />
  • <br />
  • - Can create multiple instances of the @Anywhere client <br /> <br /> - Can target an @Anywhere client instance at another window <br /> <br /> - All instances of the same version share resources <br /> <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • Complete @Anywhere documentation is available at http://dev.twitter.com/anywhere/begin <br />
  • Developer support provided via the twitter-dev-anywhere Google Group <br />
  • @Anywhere bugs can be filed via Google Code: http://code.google.com/p/twitter-api/issues/list <br />
  • Of course you can also find support for @Anywhere via Twitter by following @Anywhere <br />
  • <br />
  • <br />

@Anywhere @Anywhere Presentation Transcript

  • Integrating @Anywhere Todd Kloots Frontend Engineer - Platform
  • Setup
  • 3 Steps
  • Step 1
  • http://dev.twitter.com/anywhere/apps/new
  • Step 2
  • Paste! <script src="http://platform.twitter.com/anywhere.js?id=API_KEY&v=1"></script> <script type="text/javascript"> twttr.anywhere(function(T) { T.hovercards(); }); </script>
  • Step 3
  • (Just kidding.)
  • (No step 3.)
  • (You’re done!)
  • Goals
  • Goals • Easy • Fast • Self-contained
  • Easy
  • <script src="http://platform.twitter.com/anywhere.js?id=API_KEY&v=1"></script> <script type="text/javascript"> twttr.anywhere(function(T) { T.hovercards(); }); </script>
  • /anywhere.js?id=API_KEY&v=1"></script> <script type="text/javascript"> twttr.anywhere(function(T) { T.hovercards(); }); </script>
  • <script type="text/javascript"> twttr.anywhere(function(T) { T.hovercards(); }); </script>
  • <script type="text/javascript"> twttr.anywhere(function(T) { T.hovercards(); T("body").hovercards(); }); </script>
  • <div id="main"> ... </div> <script type="text/javascript"> twttr.anywhere(function(T) { T("#main").hovercards(); }); </script>
  • Fast
  • anywhere.js • Tiny (~2KB GZIP'd) • Single, blocking request • All dependencies loaded asynchronously • Features loaded on demand
  • <script src="http://platform.twitter.com/anywhere.js?id=API_KEY&v=1"></script> <script type="text/javascript"> twttr.anywhere(function(T) { T.hovercards(); }); </script> <div id="tbox"></div> <script type="text/javascript"> twttr.anywhere(function(T) { T("#tbox").tweetBox(); }); </script>
  • <script type="text/javascript"> twttr.anywhere(function(T) { T("#tbox").tweetBox(); T.hovercards(); }); </script>
  • <script type="text/javascript"> twttr.anywhere(function(T) { $("#comment-btn").bind("click", function () { T("#tbox").tweetBox(); }); }); </script>
  • Self-Contained
  • <iframe>
  • Goals • Easy • Fast • Self-contained
  • Use Cases
  • Identity
  • <span id="login"></span> <script type="text/javascript"> twttr.anywhere(function(T) { T("#login").connectButton({ authComplete: function(user) { myApp.login(user); }, signOut: function() { myApp.logout(); } }); }); </script>
  • OAuth 2.0 • Draft spec • (http://github.com/daveman692/OAuth-2.0) • Using the client-only profile • OAuth 1.0 endpoint is recommend • Eventual migration plan to OAuth 2.0
  • jQuery(function () { twttr.anywhere(function (T) { if (T.isConnected()) { myApp.login(T.currentUser); $("#signout").bind("click", function () { twttr.anywhere.signOut(); }); } else { T("#login").connectButton(); } }); });
  • YUI().use("node", function(Y) { Y.on("domready", function () { twttr.anywhere(function (T) { if (T.isConnected()) { myApp.login(T.currentUser); Y.one("#signout").on("click", function () { T.anywhere.signOut(); }); } else { T("#signin").connectButton(); } }); }); });
  • <span id="follow"></span> <script type="text/javascript"> twttr.anywhere(function (T) { T.bind("authComplete", function (e, user) { myApp.login(T.currentUser); }); T.bind("signOut", function (e) { myApp.logout(); }); T("#follow").followButton(); }); </script>
  • Tools
  • Linkify Users
  • @ded @<a href="http://twitter.com/ded" class="twitter-anywhere-user">ded</a>
  • <script type="text/javascript"> twttr.anywhere(function (T) { T.linkifyUsers(); }); </script>
  • <script type="text/javascript"> twttr.anywhere(function (T) { T("#main").linkifyUsers({ className: "t-user" }); }); </script>
  • <script type="text/javascript"> twttr.anywhere(function (T) { T(selector).linkifyUsers(options); }); </script>
  • http://dev.twitter.com/anywhere/begin
  • Follow Button
  • <span id="follow"></span> <script type="text/javascript"> twttr.anywhere(function(T) { T("#follow").followButton('ded'); }); </script>
  • TweetBox
  • <div id="tbox"></div> <script type="text/javascript"> twttr.anywhere(function(T) { T("#tbox").tweetBox(); }); </script>
  • Hovercards
  • Tools • Linkify Users • Follow Button • Hovercards • Tweetbox
  • API
  • http://platform.twitter.com/js-api.html <script src=".../anywhere.js?id=API_KEY&v=chirp_preview"></script> <script type="text/javascript"> twttr.anywhere.config({ assetHost: 'twitter-anywhere.s3.amazonaws.com' }); twttr.anywhere(function(T) { // YOUR CODE HERE }); </script>
  • twttr.anywhere(function(T) { T.User.find('dsa', function (user) { console.log(user.profile_image_url); }); });
  • twttr.anywhere(function(T) { T.User.find('dsa', { success: function (user) { console.log(user.profile_image_url); }, error: function () { // Handle error } }); });
  • twttr.anywhere(function(T) { T.User.find('dsa', function (user) { user.followers(function (users) { users.each(function (user) { console.log(user.name); }); }) }); });
  • twttr.anywhere(function(T) { T.User.find('dsa').followers().each(function (user) { console.log(user.screenName); }); });
  • http://platform.twitter.com/js-api.html
  • Versioning
  • /anywhere.js?id=API_KEY&v=1"></script> <script type="text/javascript"> twttr.anywhere(function(T) { T.hovercards(); }); </script>
  • /anywhere.js?id=API_KEY&v=1.1"></script> <script type="text/javascript"> twttr.anywhere(function(T) { T.hovercards(); }); </script>
  • /anywhere.js?id=API_KEY"></script> <script type="text/javascript"> twttr.anywhere("1", function(T) { T.hovercards(); }); twttr.anywhere("1.4", function(T) { T.uberTweetBox(); }); </script>
  • Window Targeting
  • <script src="http://platform.twitter.com/anywhere?id=api_key&v=1"></script> <div id="placeholder"></div> <script type="text/javascript"> twttr.anywhere(function (T) { T("#placeholder").tweetBox(); }); var frameWin = document.getElementById("#iframe-1").contentWindow; twttr({ window: frameWin }).anywhere(function (T) { T.hovercards(); }); </script>
  • Browser Support
  • Browser Support • IE 6, 7, and 8 • FF 3.x • Safari 4 • Opera 10 • Chrome 4
  • Support
  • @Anywhere Support • Docs • Forums • Bugs • @Anywhere, @ded, @dsa, @danwrong, @todd
  • http://dev.twitter.com/anywhere/begin
  • http://groups.google.com/group/twitter-dev-anywhere/
  • http://code.google.com/p/twitter-api/issues/list
  • The Road Ahead • Widget customization •Styling •Events • HTTPS • Subdomain support
  • Q&A