Integrating @Anywhere

Todd Kloots
Frontend Engineer - Platform
3 Steps
Step 1
Step 2
<script src=""></script>

<script type="text/javascript">

Step 3
(Just kidding.)
(No step 3.)
(You’re done!)
•   Easy

•   Fast

•   Self-contained
<script src=""></script>

<script type="text/javascript">

<script type="text/javascript">

  twttr.anywhere(function(T) {

<script type="text/javascript">

  twttr.anywhere(function(T) {



<script type="text/javascript">

  twttr.anywhere(function(T) {



<div id="main">

<script type="text/javascript">

  twttr.anywhere(function(T) {

•   Tiny (~2KB GZIP'd)

•   Single, blocking request

•   All dependencies loaded asynchronously

•   Features...
<script src=""></script>

<script type="text/javascript">
<script type="text/javascript">

  twttr.anywhere(function(T) {




<script type="text/javascript">

  twttr.anywhere(function(T) {

    $("#comment-btn").bind("click", function () {
•   Easy

•   Fast

•   Self-contained
Use Cases
<span id="login"></span>

<script type="text/javascript">

twttr.anywhere(function(T) {


OAuth 2.0
•   Draft spec
    •   (

•   Using the client-only profile

•   OAuth 1...
jQuery(function () {

  twttr.anywhere(function (T) {

      if (T.isConnected()) {

YUI().use("node", function(Y) {

  Y.on("domready", function () {

        twttr.anywhere(function (T) {

          if (T....
<span id="follow"></span>

<script type="text/javascript">

twttr.anywhere(function (T) {

  T.bind("authComplete", functi...
Linkify Users

@<a href="" class="twitter-anywhere-user">ded</a>
<script type="text/javascript">

twttr.anywhere(function (T) {



<script type="text/javascript">

twttr.anywhere(function (T) {

  T("#main").linkifyUsers({ className: "t-user" });


<script type="text/javascript">

twttr.anywhere(function (T) {



Follow Button
<span id="follow"></span>

<script type="text/javascript">

  twttr.anywhere(function(T) {

<div id="tbox"></div>

<script type="text/javascript">

  twttr.anywhere(function(T) {


•   Linkify Users

•   Follow Button

•   Hovercards

•   Tweetbox

<script src=".../anywhere.js?id=API_KEY&v=chirp_preview"></script>
<script type="...
twttr.anywhere(function(T) {

  T.User.find('dsa', function (user) {



twttr.anywhere(function(T) {

  T.User.find('dsa', {
    success: function (user) {
twttr.anywhere(function(T) {

  T.User.find('dsa', function (user) {

      user.followers(function (users) {

twttr.anywhere(function(T) {

  T.User.find('dsa').followers().each(function (user) {


<script type="text/javascript">

  twttr.anywhere(function(T) {


<script type="text/javascript">

  twttr.anywhere(function(T) {


<script type="text/javascript">

 twttr.anywhere("1", function(T) {

<script src=""></script>

<div id="placeholder"></div>

<script type="t...
Browser Support
•   IE 6, 7, and 8

•   FF 3.x

•   Safari 4

•   Opera 10

•   Chrome 4
@Anywhere Support
•   Docs

•   Forums

•   Bugs

•   @Anywhere, @ded, @dsa, @danwrong,
The Road Ahead
• Widget customization
• Subdomain support
Upcoming SlideShare
Loading in …5



Published on

Overview of how to integrate @Anywhere

Published in: Technology
No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

  • Setting up @Anywhere is easy. Let&apos;s start with a simple use case. Hovercards are a feature of that are also available via @Anywhere. Let&apos;s walk through how you can put Hovercards on your site.
  • 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.

  • Goto and register your application

  • At the end of the registration process you will be provided with a snippet of JavaScript you can copy and paste into your site.

  • 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.
  • 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.
  • - When you call the anywhere() method, you pass in a callback that receives a Twitter API client instance as its only argument
    - By convention we name that argument &quot;T&quot;
    - All @Anywhere functionality is hung off of the API client instance (&quot;T&quot;)
  • - T is a function that you can use to scope @Anywhere functionality
    - By default all @Anywhere functionality operates on the body of the document
  • - Over the past couple of years CSS selectors have become the preferred means of accessing elements in the DOM

    - 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

    - This makes using @Anywhere easy because it is building on techniques most developers are already familiar with
  • 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.

  • - There is a one to many relationship between anywhere.js and @Anywhere client instances

    - 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

    - All @Anywhere client instances share the same script resources

  • - Additionally, feature-specific resources are loaded on-demand

    - For example, the TweetBox code is not loaded into the page until the tweetBox() method is called
  • - 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

    - In this example, the TweetBox will be not be loaded and rendered until the user clicks the comment button.

  • - iframes provide self-contained scope for JavaScript and CSS

    - @Anywhere loads its dependencies into an iframe to keep our scripts sandboxed from those of the host site
  • - @Anywhere widgets run in an iframe to prevent styles of the host site bleeding in

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

    - For those things that DO require require the user to auth, @Anywhere handles all that for you (completely client-side auth)

    - In addition you can piggy back on our auth, here&apos;s how
  • - @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.

    - Using the &quot;Connect with Twitter&quot; 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.
  • The connect flow is as follows:

    1. Connect launches popup

    2. User asked either to:
    - Auth (if logged in to Twitter)
    - Login + auth (if not logged in)

    3. Single-level of permissions (for simplicity for the user and dev)

    4. Tokens are good for 2 hours and are automatically refreshed as long as the user is logged into Twitter
  • - @Anywhere authentication is via OAuth 2.0

    - Not fully implemented all profiles, just what we needed for @Anywhere

    - Production, non @Anywhere implementations should continue to use the OAuth 1 endpoint until our OAuth 2.0 is deployed

    - Once we have our OAuth 2.0 endpoint deployed we&apos;ll provide a complete migration plan
  • - 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 &quot;currentUser&quot; property can be used to retrieve information about the logged-in user.

    - The user object has a data method that can be passed a string representing the property to retrieve.

    - 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.
  • - This example is the same as the previous slide, but uses YUI 3&apos;s method of determining when the page is ready
  • 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.

  • @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 A Twitter screen name is an &apos;@&apos; symbol followed by 1 to 20 alphanumeric characters, including underscores (&quot;_&quot;). @ev or @biz and two examples of Twitter username.
  • - To automatically linkify Twitter usernames, simply call T.linkifyUsers()

    - Calling linkifyUsers in this way would attempt to linkify all potential Twitter users in the &lt;body&gt; of the page.
  • - To limit the scope of what is linkified, simply pass a CSS selector to the Twitter API client (T).

    - For example, to linkify only Twitter usernames found in an element with the id of &quot;main&quot;, pass the selector &quot;#main&quot; to T.
  • API is consistent across each @Anywhere util and widget

    - Specify the element(s) via selector (omitting selector == apply to &lt;body&gt;)

    - Call method the collection

    - Each has options - specified via an object literal
  • - Developer documentation includes all configuration options for each @Anywhere feature along with working examples

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

  • - @Anywhere also provides a JavaScript implementation of the entire Twitter API
    - Currently the JavaScript implementation of the Twitter API is in beta, and is not part of the 1.0.0 release
    - If you&apos;d like to use the JavaScript API, some changes to your @Anywhere configuration are necessary

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

    - To use the JavaScript API you need to modify your configuration of @Anywhere
  • - All API methods are asynchronous

    - Can specify a success callback as the second argument to any API method call
  • 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
  • Because AJAX operations are asynchronous, calls need to nested
  • Using the Twitter JavaScript API you can chain methods calls and specify your callback at the end of the chain
  • The documentation for the JavaScript API can be found at

  • 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.
  • 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.
  • - You can pass the version of @Anywhere as the first argument to the anywhere() method

    - 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

  • - Can create multiple instances of the @Anywhere client

    - Can target an @Anywhere client instance at another window

    - All instances of the same version share resources

  • Complete @Anywhere documentation is available at
  • Developer support provided via the twitter-dev-anywhere Google Group
  • @Anywhere bugs can be filed via Google Code:
  • Of course you can also find support for @Anywhere via Twitter by following @Anywhere

  • @Anywhere

    1. Integrating @Anywhere Todd Kloots Frontend Engineer - Platform
    2. Setup
    3. 3 Steps
    4. Step 1
    6. Step 2
    7. Paste! <script src=""></script> <script type="text/javascript"> twttr.anywhere(function(T) { T.hovercards(); }); </script>
    8. Step 3
    9. (Just kidding.)
    10. (No step 3.)
    11. (You’re done!)
    12. Goals
    13. Goals • Easy • Fast • Self-contained
    14. Easy
    15. <script src=""></script> <script type="text/javascript"> twttr.anywhere(function(T) { T.hovercards(); }); </script>
    16. /anywhere.js?id=API_KEY&v=1"></script> <script type="text/javascript"> twttr.anywhere(function(T) { T.hovercards(); }); </script>
    17. <script type="text/javascript"> twttr.anywhere(function(T) { T.hovercards(); }); </script>
    18. <script type="text/javascript"> twttr.anywhere(function(T) { T.hovercards(); T("body").hovercards(); }); </script>
    19. <div id="main"> ... </div> <script type="text/javascript"> twttr.anywhere(function(T) { T("#main").hovercards(); }); </script>
    20. Fast
    21. anywhere.js • Tiny (~2KB GZIP'd) • Single, blocking request • All dependencies loaded asynchronously • Features loaded on demand
    22. <script src=""></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>
    23. <script type="text/javascript"> twttr.anywhere(function(T) { T("#tbox").tweetBox(); T.hovercards(); }); </script>
    24. <script type="text/javascript"> twttr.anywhere(function(T) { $("#comment-btn").bind("click", function () { T("#tbox").tweetBox(); }); }); </script>
    25. Self-Contained
    26. <iframe>
    27. Goals • Easy • Fast • Self-contained
    28. Use Cases
    29. Identity
    30. <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>
    31. OAuth 2.0 • Draft spec • ( • Using the client-only profile • OAuth 1.0 endpoint is recommend • Eventual migration plan to OAuth 2.0
    32. jQuery(function () { twttr.anywhere(function (T) { if (T.isConnected()) { myApp.login(T.currentUser); $("#signout").bind("click", function () { twttr.anywhere.signOut(); }); } else { T("#login").connectButton(); } }); });
    33. YUI().use("node", function(Y) { Y.on("domready", function () { twttr.anywhere(function (T) { if (T.isConnected()) { myApp.login(T.currentUser);"#signout").on("click", function () { T.anywhere.signOut(); }); } else { T("#signin").connectButton(); } }); }); });
    34. <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>
    35. Tools
    36. Linkify Users
    37. @ded @<a href="" class="twitter-anywhere-user">ded</a>
    38. <script type="text/javascript"> twttr.anywhere(function (T) { T.linkifyUsers(); }); </script>
    39. <script type="text/javascript"> twttr.anywhere(function (T) { T("#main").linkifyUsers({ className: "t-user" }); }); </script>
    40. <script type="text/javascript"> twttr.anywhere(function (T) { T(selector).linkifyUsers(options); }); </script>
    42. Follow Button
    43. <span id="follow"></span> <script type="text/javascript"> twttr.anywhere(function(T) { T("#follow").followButton('ded'); }); </script>
    44. TweetBox
    45. <div id="tbox"></div> <script type="text/javascript"> twttr.anywhere(function(T) { T("#tbox").tweetBox(); }); </script>
    46. Hovercards
    47. Tools • Linkify Users • Follow Button • Hovercards • Tweetbox
    48. API
    49. <script src=".../anywhere.js?id=API_KEY&v=chirp_preview"></script> <script type="text/javascript"> twttr.anywhere.config({ assetHost: '' }); twttr.anywhere(function(T) { // YOUR CODE HERE }); </script>
    50. twttr.anywhere(function(T) { T.User.find('dsa', function (user) { console.log(user.profile_image_url); }); });
    51. twttr.anywhere(function(T) { T.User.find('dsa', { success: function (user) { console.log(user.profile_image_url); }, error: function () { // Handle error } }); });
    52. twttr.anywhere(function(T) { T.User.find('dsa', function (user) { user.followers(function (users) { users.each(function (user) { console.log(; }); }) }); });
    53. twttr.anywhere(function(T) { T.User.find('dsa').followers().each(function (user) { console.log(user.screenName); }); });
    55. Versioning
    56. /anywhere.js?id=API_KEY&v=1"></script> <script type="text/javascript"> twttr.anywhere(function(T) { T.hovercards(); }); </script>
    57. /anywhere.js?id=API_KEY&v=1.1"></script> <script type="text/javascript"> twttr.anywhere(function(T) { T.hovercards(); }); </script>
    58. /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>
    59. Window Targeting
    60. <script src=""></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>
    61. Browser Support
    62. Browser Support • IE 6, 7, and 8 • FF 3.x • Safari 4 • Opera 10 • Chrome 4
    63. Support
    64. @Anywhere Support • Docs • Forums • Bugs • @Anywhere, @ded, @dsa, @danwrong, @todd
    68. The Road Ahead • Widget customization •Styling •Events • HTTPS • Subdomain support
    69. Q&A