A Brief Overview of Twitter’s New @Anywhere API

Twitter recently announced and released a JavaScript API called @Anywhere which makes it super-simple to integrate Twitter-related content on any website. This means developers no longer have to roll their own integration or use 3rd party libraries. @Anywhere, despite its unfortunate naming, appears to be a big win for all. Here is a brief overview of its features and usage.

To get started, register an @Anywhere application and get an API key. Then plug this snippet into your page:

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

Now you can begin using any of the following features:

Auto-linkification of Twitter usernames

This is a convenient way to link Twitter usernames on your site to the appropriate user’s profile page on Twitter. The most basic usage looks like this:

<script type="text/javascript">

  twttr.anywhere(function (T) {
    T.linkifyUsers();
  });

</script>

Hovercards

A Hovercard is a small, context-aware tooltip that provides access to data about a particular Twitter user. It looks like this:

To enable hovercards on a page:

<script type="text/javascript">

  twttr.anywhere(function (T) {
    T.hovercards();
  });

</script>

Follow buttons

The feature name pretty much says it all. Let people follow Twitter users from your page. To enable it for user sant0sk1 inside a span with id of `follow-me`:

<span id="follow-me"></span>
<script type="text/javascript">

  twttr.anywhere(function (T) {
    T('#follow-mei').followButton("sant0sk1");
  });

</script>

The buttons look like this:

Tweet Box

Let Twitter users tweet from inside your webpage or web application. An example of using this on a div with id of `tweetbox`:

<div id="tbox"></div>
<script type="text/javascript">

  twttr.anywhere(function (T) {
    T("#tbox").tweetBox();
  });
</script>

User login & signup

This feature allows users to perform some of the authentication-required activities like following users and tweeting from your page. It uses OAuth and provides authComplete and signOut callbacks that you can hook into. It’s more complicated than the others so we won’t provide an example here.

Try it!

@Anywhere looks like a solid API that can provide immediate advantages over other solutions. If you need quick, easy and official Twitter integration on your site we highly recommend trying it out. Start with the official documentation from which we derived much of this overview. Then you can move on to the full API documentation which is (at the time of posting) in a preview state. Enjoy!