An Introduction to Twitter’s @Anywhere

As part of Twitter’s initiative and for them to compete with Facebook’s Open Graph service for embeddable social networking, they released @Anywhere. This JavaScript file allows you to add the ‘Twitter communication platform to your site’.

In essence, after adding @Anywhere to your site you can then very simply linkify any twitter usernames (and add hovercards), add follow buttons, add a direct tweet box and allow twitter users to log in and out of your site.

In this post, we’ll look at setting up @Anywhere and then the different things you can do with it (with examples).

Set Up#

1. First things first, you will have to create an @Anywhere application. It’s easy, you just need to specify a few details, like a name, description, website and call back address.

2. Once you have done that, find your ‘Consumer key’.

3. Insert the main @Anywhere JavaScript file (the bottom of the BODY will be fine) and replace the CONSUMER_KEY with your actual key.

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

4. And you’re done!

Thing You Can Do with @Anywhere:#

1. Linkify Users

It is perfectly simple to automatically link to Twitter accounts, like my own @eddturtle, and add hovercards with the following snippet:

<script>
    // Linkify Everything
    twttr.anywhere(function (T) {
      T.linkifyUsers();
    });

    // Or, Only Linkify a Specific Element
    twttr.anywhere(function (T) {
        T("#linkify").linkifyUsers();
    });

    // Or, Implicityly Linkify & Add Hovercards
    twttr.anywhere(function (T) {
        T("#linkify").hovercards();
    });
</script>

2. Follow Button

To create a follow button:  

<span id="follow-button"></span>

<script>
    // Create Follow Button (Change Username)
    twttr.anywhere(function (T) {
        T('#follow-button').followButton("eddturtle");
    });
</script>

3. Tweet Box

Tweet directly from your site with a pre-made Tweet Box.

<div id="tweet"></div>

<script>
    // Create Tweet Box from Div
    twttr.anywhere(function (T) {
        T("#tweet").tweetBox();
    });

    // Or, Customize It
    twttr.anywhere(function (T) {
        T("#tweet").tweetBox({
            height: 70,
            width: 637,
            label: 'Tweet Something...'
	});
    });
</script>

Conclusion#

So far, @Anywhere has only been briefly covered – take it as an introduction to something with so much potential. For a full list of the functionality available with @Anywhere check out the Twitter Developers site.

Visit @Anywhere Documentation{.btn.btn-primary}

Nettuts also has a good post about ‘Using Twitter’s @Anywhere Service in 6 Steps‘, which is well worth reading.

@Anywhere is a superb service to bring your site closer to the social network and I’m sure it will become very successful in the future because it can be personalised. Social network icons (the little images you see everywhere) will, in time, become a standard to any site – and risk becoming invisible to the user (as advertisements tend to).

Any queries, let me know in the comments.