Twitter @Anywhere platform quick introduction

Twitter announced its @Anywhere platform on the Chirp conference and I decided to give it a quick try on my blog. It turns out the platform is extremely easy to start with, has 3 primary and very useful features, and it takes only 15 minutes to implement them on the site. In this post I’ll guide you through the improvements I’ve made using @Anywhere.

The starting point, which is also the brand new Twitter developer center is the Anywhere website. You can create your application there, which will give you a tailored JavaScript code that loads all the necessary components. It’s a simple JS source link.

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

The fun begins when you start implementing the onLoad event that is fired up when the Anywhere component loads – it is the function which is passed to the anywhere method. So, for example, you can turn any word that starts with @ into a link to a Twitter profile with a hovercard. It’s as simple as calling a single method hovercards on the twitter object.

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

As a result, I can simply invite you to follow @f055, and you will be able to do it straight from this site, just hover over the link. Another cool feature is the Follow me button. This one is more intelligent than the existing ones, hence if you already follow me, its state will be different. I have it in the blog’s sidebar. This button is inserted into a defined container in a syntax similar to jQuery, again using just a single method followButton.

twttr.anywhere(function(twitter) {
            twitter.hovercards();
            twitter('#follow-button').followButton("f055");
});

Finally, you can insert an exact copy of Twitter’s input box, with a counter and even predefined text. This is done by another single method, giving a target container. I have to note here that although this worked when the input was blank, I was unable to prepare such a box with predefined content – it would trigger some JS error and other components of @Anywhere would not load.

twttr.anywhere(function(twitter) {
            twitter.hovercards();
            twitter('#follow-button').followButton("f055");
            twitter('#twitter-input').tweetBox({
                  counter: true,
                  height: 50,
                  width: 550,
                  label: "Tweet about this article:",
                  defaultContent: "RT " + escape("@f055") + "{embed:permalink}"
            });
});

The last point in the Introduction to Anywhere talks about Twitter Connect, which is quite similar to Facebook Connect, and requires more work to make it useful. But as you can see, the pretty basic but powerful features can be implemented on any site or blog within minutes, and give quite amazing level of interaction with Twitter. Especially to promote your own account or encourage sharing. I think Twitter did a great job and I look forward to see what’s going to be next.