Integrating Twitter @Anywhere with Your Website

Twitter just announced a new API called @Anywhere. This new API allows integrating Twitter into your site dead simple. There are several different features you can integrate with your site. These include automatic linking to names on the page or in a specific area, hover cards, which are popups that show user info, follow button for users, an inline iFrame tweet box and finally twitter connect, which is the same basic idea as Facebook connect. This tutorial is going to show you how to integrate some of these feature into your own site.

Below you will find an example of some of the ways you could use this in the real world. Imagine you have a post on your site where you tag the user's twitter name. You can then display a twitter follow button for the author or have a tweet box so readers can post comments on twitter or tell others about the work.

To get started with @anywhere you first need to register an application over at the Twitter Dev Site. I have had problems with changing the callback url and application url after creating the application, so double check to make sure they are correct. Once created you should be sitting at the manage application page.

Once your application has been registered, actually getting something working is really easy. All we need to do is make sure we include the correct JavaScript file and then ask the API to link all twitter usernames on the page. One item to make sure is that the id variable passed to the file is your API Key, which can be found on your manage application page.

You can easily take this one step further by changing the simple links to hover cards. Hover cards can be found in the example above, but basically they look like the following. They popup on hovering over a twitter @name. The code is simple to update for hover cards.

The hover cards are one of the cooler and useful options available. The next item we are going to take a look at is the follow button. As with everything else it is really easy to add a follow button. However, this time we have to tell the button where to appear, this is done by passing a selector to the twitter object. The selectors are the same as jQuery Selectors. Once you identify where you want the button, you call followButton with a single string parameter, the user name for the button. The code for a basic follow button is below. First we have some html that would be where we want to place the button and second is the JavaScript to do it.

This leads to something like the following.

The final item we are going to add today to the page is going to be an inline tweet box, you can, of course, customize the details of the box including the size, the default content, and the title. The configuration options are passed using a JavaScript object. You tell the twitter object where to place the box and then call tweetBox with the options object. The full list of options is available over at the @Anywhere documentation. We are really only going to worry about two for this example, label and defaultContent. The label, which controls the typical "What's Happening?", has been changed in our example above to "Love this article? Tell others!" and I also added some default content. The code to add the box is below. Again, first with a div to place it in and second the JavaScript.

To finish off with good measure, here is the exact code used for the example above. You'll notice that you can use selectors for all of the items to narrow down the area where you want to linkify or create hover cards.

Now there is much more you can do with the @Anywhere api including connecting to twitter's user backend. That, however, is for another tutorial. I hope this tutorial and example have shown you a few of the many possibilities available with the @Anywhere platform. If you have any questions feel free to leave a comment.