Skip to Main Content Area

Home → Documentation

Welcome to @Anywhere

View
What links here

Updated on Tue, 2013-03-05 07:01

@Anywhere is deprecated and will cease functioning today, March 5th, 2013. See Sunsetting @Anywhere for more information.

Twitter @Anywhere was an easy-to-deploy solution for bringing the Twitter communication platform to your site. Developers used @Anywhere to add Follow Buttons, Hovercards, linkify Twitter usernames, and build deeper integrations with "Connect to Twitter."

Please use Twitter for Websites products and v1.1 REST API integrations instead of @Anywhere.

@Anywhere is deprecated and will cease functioning today, March 5th, 2013. See Sunsetting @Anywhere for more information.
Getting Started
1. Example Initialization
@Anywhere Features
1. Auto-linkification of Twitter usernames
2. Hovercards
3. Follow buttons
4. Tweet Box
5. User login & signup
Best Practices
1. Using A Custom Callback URL
Authorizing Additional Domains for @Anywhere
Selector Support
Versioning
Targeting @Anywhere at a different window
Browser Support

Need help? Try Twitter for Websites Discussions.

The code examples below load anywhere.js in a synchronous manner. For performance reasons you may want to consider loading these scripts asynchronously using a library like script.js, lab.js, or loadrunner.

Using script.js to load @anywhere would look something like this:

$script('platform.twitter.com/anywhere.js?id=YOUR_API_KEY&v=1', function () {

```
  // anywhere.js is ready
```
```
});
```

Getting Started

First things first, you're going to need a registered client application with Twitter to get started. While you can use an existing application, it's recommended that you create a new one for @Anywhere. To function, the callback URL property of your application must match both the subdomain and domain of the web application utilizing @Anywhere.

Create an @Anywhere application »

On any HTML page that you want to use @Anywhere, simply include a <script> tag pointing to our @Anywhere JavaScript resource at platform.twitter.com/anywhere.js, attaching your consumer key (AKA "API key") (id=) and the @Anywhere version (v=) you want to use as query parameters on the URL. As a best practice always place the anywhere.js file as close to the top of the page as possible. (For more on why this is important, see the Best Practices section below.)

You will rarely, if ever, need the "consumer secret" when working with @Anywhere; it's primarily for OAuth 1.0A contexts. Please do not place a consumer secret anywhere within your HTML or Javascript.

```
<!DOCTYPE HTML>
```
```
<html>
```
```
  <head>
```

    <meta http-equiv="Content-type" content="text/html; charset=utf-8">

```
    <title>Anywhere Sample</title>
```

    <script src="platform.twitter.com/anywhere.js?id=YOUR_API_KEY&v=1" type="text/javascript"></script>

```
  </head>
```
```
  <body>
```
```
    ...
```
```
  </body>
```
```
</html>
```

The @Anywhere JavaScript file establishes a single global object (twttr). To use @Anywhere, call the anywhere method, and pass in a callback. The callback will receive an instance of the Twitter API Client (named "T" by convention) as its only argument. All @Anywhere features are available as members of the Twitter API Client. For example, to use Hovercards simply call the hovercards method:

Example Initialization

```
<script type="text/javascript">
```
```
  twttr.anywhere(function (T) {
```
```
    T.hovercards();
```
```
  });
```
```
</script>
```

Any page can have multiple calls to the anywhere method. The example below makes two calls to the anywhere method, one for Hovercards, and another to create a Follow Button.

```
<!DOCTYPE HTML>
```
```
<html>
```
```
  <head>
```

    <meta http-equiv="Content-type" content="text/html; charset=utf-8">

```
    <title>Anywhere Sample</title>
```

    <script src="platform.twitter.com/anywhere.js?id=YOUR_API_KEY&v=1" type="text/javascript"></script>

```
  </head>
```
```
  <body>
```
```
 
```
```
  <script type="text/javascript">
```
```
 
```
```
    twttr.anywhere(function (T) {
```
```
      T.hovercards();
```
```
    });
```
```
 
```
```
  </script>
```
```
 
```
```
  ...
```
```
 
```
```
  <span id="follow-placeholder"></span>
```
```
  <script type="text/javascript">
```
```
 
```
```
    twttr.anywhere(function (T) {
```

      T("#follow-placeholder").followButton('anywhere');

```
    });
```
```
 
```
```
  </script>
```
```
 
```
```
  </body>
```
```
</html>
```

@Anywhere Features

Auto-linkification of Twitter usernames
Hovercards
Follow buttons
Tweet Box
User login & signup

Auto-linkification of Twitter usernames

@Anywhere provides a convenient way to link Twitter usernames found in your web site or application back to a user's profile page on Twitter.com. A Twitter screen name is an '@' symbol followed by 1 to 20 alphanumeric characters, including underscores ("_"). @ev or @biz and two examples of Twitter username.

To automatically linkify Twitter usernames, simply call T.linkifyUsers():

```
<script type="text/javascript">
```
```
 
```
```
  twttr.anywhere(function (T) {
```
```
    T.linkifyUsers();
```
```
  });
```
```
 
```
```
</script>
```

Calling linkifyUsers in this way would attempt to linkify all potential Twitter users in the <body> 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 "linkify-this-content", pass the selector "#linkify-this-content" to T:

```
<script type="text/javascript">
```
```
 
```
```
  twttr.anywhere(function (T) {
```

    T("#linkify-this-content").linkifyUsers();

```
  });
```
```
 
```
```
</script>
```

Linkify Example

@anywhere was made possible by @ded, @dsa, @todd, @danwrong, @noradio, and the rest of the @twitter team.

linkifyUsers, and most of our other API methods, take some additional configuration options. For example, by default, linkifying usernames will wrap matched names in an anchor element with a class of "twitter-anywhere-user": <a class='twitter-anywhere-user'></a>. You can specify an alternate class name by passing an object literal and set the value of the className property to the desire class name. For example, to change the class to "my-tweep":

```
<script type="text/javascript">
```
```
 
```
```
  twttr.anywhere(function (T) {
```

    T("#linkify-this-content").linkifyUsers({ className: 'my-tweep' });

```
  });
```
```
 
```
```
</script>
```

Hovercards

Hovercards are a feature that can be seen on Twitter.com and are now available to developers through @Anywhere. A Hovercard is a small, context-aware tooltip that provides access to data about a particular Twitter user. Hovercards also allows a user to take action upon a Twitter user such as following and unfollowing, as well as toggling device updates.

The easiest way to enable Hovercards on a web site or web application is to simply call the hovercards method:

```
<script type="text/javascript">
```
```
 
```
```
  twttr.anywhere(function (T) {
```
```
    T.hovercards();
```
```
  });
```
```
 
```
```
</script>
```

By default the hovercards method will implicitly call the linkifyUsers method against the body of the document. Hovercards will then be enabled on mouseover for all anchor tags matching the default class name applied by the linkifyUsers method ().

To limit the scope of where Hovercards appear, simply pass a CSS selector to the Twitter API client (T), then call the hovercards method. The following example illustrates how to limit Hovercards to an element with an id of "main-content":

```
<script type="text/javascript">
```
```
 
```
```
  twttr.anywhere(function (T) {
```
```
    T("#main-content").hovercards();
```
```
  });
```
```
 
```
```
</script>
```

Disabling linkifying of Twitter usernames

As mentioned above, the hovercards method will implicitly call the linkifyUsers method against the body of the document. If Twitter usernames have already been linkified server-side according to the same pattern used by the linkifyUsers method, then it is possible to prevent the hovercards method from linkifying users by passing an object literal as an argument to when calling hovercards and setting the linkify property to false.

```
<script type="text/javascript">
```
```
 
```
```
  twttr.anywhere(function (T) {
```

    T("#main-content").hovercards({ linkify: false });

```
  });
```
```
 
```
```
</script>
```

Using the `infer` option

Use the infer option to trigger Hovercards on elements whose text contains a Twitter username. When the infer option is used, the hovercards method will not call the linkifyUsers method. This is useful when Twitter usernames have already been linkified by some other means. For example: <a ...>Follow @biz on Twitter!</a>

The following example illustrates how to use the infer option.

```
<script type="text/javascript">
```
```
 
```
```
  twttr.anywhere(function (T) {
```
```
 
```

    T("#main-content a.my-tweep").hovercards({

```
      infer: true
```
```
    });
```
```
 
```
```
  });
```
```
 
```
```
</script>
```

Specifying a `username` function

The username function enables a Hovercard to be triggered on an element when the Twitter username is part of an element's attribute (like the title) rather than the element's inner text. To specify a username function simply pass an object literal to the hovercards method, passing a function reference as the value for the username property. The function will be passed a reference to the DOM node that matched the selector passed to the Twitter API client (T). The function can perform any logic (traversals, attribute lookups, manipulations) necessary to extract and return the username. Note: Like the infer option, when the username option is used, the hovercards method will not call the linkifyUsers method.

In the following example the username function is defined to extract a Twitter username from the text of an image element's alt attribute.

```
<script type="text/javascript">
```
```
 
```
```
  twttr.anywhere(function (T) {
```
```
 
```
```
    T("#section>img").hovercards({
```
```
      username: function(node) {
```
```
        return node.alt;
```
```
      }
```
```
    });
```
```
 
```
```
  });
```
```
 
```
```
</script>
```

Use of either the infer or username options, will not call the linkifyUsers method. To linkify and add Hovercards to any unlinked screen names in addition to Hovercards to other elements, you can call the hovercards method as many times as necessary.

```
<script type="text/javascript">
```
```
 
```
```
  twttr.anywhere(function (T) {
```
```
 
```
```
    T.hovercards();
```
```
 
```

    T("#main-content a.my-tweep").hovercards({

```
      username: function(node) {
```
```
        return node.title;
```
```
      }
```
```
    });
```
```
 
```
```
  });
```
```
 
```
```
</script>
```
```
 
```

Rending Hovercards Expanded by Default

By default a Hovercard displays a user's name, Twitter username, and location. When the user clicks the "more" button in a Hovercard, it will expand to reveal additional information such as the user's bio and their latest Tweet. To render Hovercards in this expanded state by default, pass an object literal as an argument when calling the hovercards method and set the expanded property to true.

```
<script type="text/javascript">
```
```
 
```
```
  twttr.anywhere(function (T) {
```

    T("#main-content").hovercards({ expanded: true });

```
  });
```
```
 
```
```
</script>
```

Follow buttons

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 example below places a Follow Button for the Twitter user named @twitterapi into the <span> element with an id of "follow-twitterapi":

```
<span id="follow-twitterapi"></span>
```
```
<script type="text/javascript">
```
```
 
```
```
  twttr.anywhere(function (T) {
```

    T('#follow-twitterapi').followButton("twitterapi");

```
  });
```
```
 
```
```
</script>
```

Follow Buttons

Twitter @Anywhere Follow Buttons are smart in that they reflect whether the current user already follows the member. If the user is already following the user for a given Follow Button, the button's label will be updated with the text "You're following @username". If the user attempts to follow a Twitter user who is protected, the Follow Button's label will be updated with the text "Follow pending for @username". Lastly, if there was an error when a user attempts to follow another user, the Follow Button's label will update to say "Could not follow @username"

Tweet Box

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.

The following example places a Tweet Box in the

with the id of "tbox":

```
<div id="tbox"></div>
```
```
<script type="text/javascript">
```
```
 
```
```
  twttr.anywhere(function (T) {
```
```
    T("#tbox").tweetBox();
```
```
  });
```
```
 
```
```
</script>
```

Configuring the Tweet Box

The Tweet Box has several configuration options. All configuration options are set via an object literal passed as an argument to the tweetBox method.

The following example illustrates how to configure a Tweet Box with a customized width, height and default content.

```
<div id="tbox"></div>
```
```
<script type="text/javascript">
```
```
 
```
```
  twttr.anywhere(function (T) {
```
```
 
```
```
    T("#tbox").tweetBox({
```
```
      ,
```
```
      ,
```

      defaultContent: "<YOUR DEFAULT TWEETBOX CONTENT HERE>"

```
    });
```
```
 
```
```
  });
```
```
 
```
```
</script>
```

The table below lists all of the configuration options for the Tweet Box.

Tweet Box Configuration Options
Parameter	Expected Values	Default	Description
counter	Boolean	true	Display a counter in the Tweet Box for counting characters
height	Number	65 (px)	The height of the Tweet Box in pixels
width	Number	515 (px)	The width of the Tweet Box in pixels
label	String	"What's happening?"	The text above the Tweet Box, a call to action.
defaultContent	String	none	Pre-populated text in the Tweet Box. Useful for an @mention, a #hashtag, a link, etc.
onTweet	Function	none	Specify a listener for when a tweet is sent from the Tweet Box. The listener receives two arguments: a plaintext tweet and an HTML tweet
data	Object	none	Key + value pairs representing any of the additional metadata that can be set when updating a user's status. See the REST API documentation for a complete list of the possible options.

Here are some examples of how Tweet Boxes render.

Tweetbox

Warning: These are live tweet boxes. If you tweet — you will tweet.

Default

Custom

Some @Anywhere functionality doesn't require the user to login to Twitter or authorize your site for access. Once such example would be viewing a given Twitter user's profile info in a Hovercard. Other functionality, like being able to follow a user on Twitter via the Follow Button, does require user the user to login to Twitter and authorize your site for access. When user login and authorization is required, @Anywhere handles all of that for you out of the box.

The "Connect with Twitter" button provides a method for users to authenticate securely with Twitter, yielding your application with an access token for use in API calls.

Adding "Connect with Twitter" buttons to your application is easy: simply call T passing in a selector indicating where you want the button to appear, and

Welcome to @Anywhere

@Anywhere is deprecated and will cease functioning today, March 5th, 2013. See Sunsetting @Anywhere for more information.

Getting Started

Example Initialization

@Anywhere Features

Auto-linkification of Twitter usernames

Linkify Example

Hovercards

Hovercards

Hovercard Configuration Options

Disabling linkifying of Twitter usernames

Using the infer option

Specifying a username function

Rending Hovercards Expanded by Default

Follow buttons

Follow Buttons

Tweet Box

Configuring the Tweet Box

Tweetbox

Default

Custom

User login & signup

Using the `infer` option

Specifying a `username` function