We’ll tackle two of @Anywhere’s abilities this time: Follow Buttons and the Tweet Box.

Follow Buttons

When clicked, Follow Buttons should say “You’re following @username” if the user is already following them. Otherwise, they say “Follow @username on Twitter.” Here’s what you need to create one:

<span id="follow-artisan"></span>
<script type="text/javascript">
    twttr.anywhere(function (T) {
        T('#follow-artisan').followButton("artisantalent");
    });
</script>

The above tidbit inserts a span with an id of “follow-artisan,” and then the JS will place a Follow Button into that <span>. The argument for followButton itself is the username that you want it to be referencing, so change that to suit, and, of course, the id can be anything, just make sure to change it’s reference in the T bit.

Tweet Box

The Tweet Box allows users to tweet something directly from within their site without leaving. Like with the Follow Button, start with an element, then attach it to that element and call tweetBox, like so:

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

We’ve just inserted a Tweet Box into the tweet-box <div>. But unlike the Follow Button, there are some configuration options for the Tweet Box. It takes the options like so:

<div id="tweet-box"></div>
<script type="text/javascript">
    twttr.anywhere(function (T) {
        T("#tweet-box").tweetBox({
            height: 100,
            width: 400,
            defaultContent: "<YOUR DEFAULT TWEETBOX CONTENT HERE>"
        });
    });
</script>

This example sets a specific height & width, and supplies some default content for the Tweet Box to contain. You can set all of these options:

• counter: This is a boolean property, which defaults to true, that displays a counter in the Tweet Box for counting characters.
• height: A number, which defaults to 515 (measured in px), this determines the height of the Tweet Box.
• width: Like height, this is a number, defaulting to 65 (also in px), that determines the width of the Tweet Box.
• label: A string defaulting to “What’s happening?” that corresponds to the text above the Tweet Box. It is a call to action, if you will.
• defaultContent: This is also a string, but it has no default. It can be used to pre-populate text in the Tweet Box. Useful for an @mention, a #hashtag, a link, etc.
• onTweet: This is a function, defaulting to none, where you can 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: This is an object, with no default, expessed as a key + value pair 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.

So now you’ve got two more simple, but quite powerful, tools to further encourage your visitors to interact with your site using Twitter.

The last, and most complex, capability of @Anywhere is the user login & signup mechanism. For something like the Hovercards, this isn’t needed, but for the Follow Button, or the Tweet Box, you do need to have your visitors logged in to have them authorize your site for access to their account. The simplest version is to just add a “Connect with Twitter” button, like so:

<span id="connect"></span>
<script type="text/javascript">
    twttr.anywhere(function (T) {
        T("#connect").connectButton();
    });
</script>

This inserts a “Connect with Twitter” button into the #connect element. You can specify the size using a string (small, medium, large, xlarge, with “medium being the default”) like so:

<span id="connect"></span>
<script type="text/javascript">
    twttr.anywhere(function (T) {
        T("#connect").connectButton({ size: "small" });
    });
</script>

But what if you don’t like that big blue button? Use your own! Create a button using HTML & CSS, then bind a click event listener that calls the signIn method, like so:

<button type="button" id="twitter-connect">Connect with Twitter</button>
<script type="text/javascript">
    twttr.anywhere(function (T) {
        document.getElementById("twitter-connect").onclick = function () {
            T.signIn();
        };
    });
</script>

Awesome. Now, if your visitor is already logged in to Twitter, they get a popup asking them to either connect, or cancel. If they’re not logged in, they get a popup asking them to both login and authorize your application. Occasionally, you may want to query this state and perform something based on that. You can use one of two sets of events: authComplete and signOut, or the isConnected method.

The authComplete and signOut events can be triggered like so:

<span id="connect"></span>
<script type="text/javascript">
    twttr.anywhere(function (T) {
        T("#connect").connectButton({
            authComplete: function(user) {
                // triggered when auth completed successfully
            },
            signOut: function() {
                // triggered when user logs out
            }
        });
    });
</script>

Use your imagination for what to do on each event.

For the isConnected method, here’s a more specific example using jQuery & @Anywhere together to conditionally display either a “Connect with Twitter” button, or the connected user’s screen name & profile image. A pretty handy, straightforward implementation:

<span id="twitter-connect-placeholder"></span>
<script type="text/javascript">
    twttr.anywhere(function (T) {
        var currentUser,
            screenName,
            profileImage,
            profileImageTag;
        if (T.isConnected()) {
            currentUser = T.currentUser;
            screenName = currentUser.data('screen_name');
            profileImage = currentUser.data('profile_image_url');
            profileImageTag = "<img src='" + profileImage + "'/>";
            $('#twitter-connect-placeholder').append("Logged in as " + profileImageTag + " " + screenName);
        } else {
            T("#twitter-connect-placeholder").connectButton();
        };
    });
</script>

Lastly, you should provide a way for your users to log out of Twitter, like so:

<button type="button" onclick="twttr.anywhere.signOut();">Sign out of Twitter</button>

You can even use that conditional bit up above to show the log out button instead of a “Connect” button, depending on the user’s state.

There’s a lot more to @Anywhere, and the other Twitter APIs, so head on over to dev.twitter.com to read more about it, and have fun!

This time around, we’re going to dig into the more technical side of things, and discuss one of the ways you can easily integrate Twitter into your site: @Anywhere. Some very simple Twitter integrations used to require quite a bit of work, but @Anywhere has greatly simplified them.

@Anywhere is a JavaScript-based method to:

• Automatically link any @username to the actual Twitter page of that username (so @ArtisanTalent automatically becomes @ArtisanTalent).
• Generate “Hovercards” for each of these @username mentions, allowing the visitor to see a little more about that username and, if they’re not already, follow that username.
• Generate follow buttons that are “smart,” and change state based on whether or not your visitor is following you.
• Allow your visitors to tweet directly from your site.
• Use their Twitter account to sign up for and log in to your site.

Now, let’s go through the process of adding just the simple Hovercard implementation. First, you need to register an @Anywhere application. As the page says, make sure you set the default access type to “Read & Write” for things to work correctly. Once that goes through, this will grant you an API key; keep that string handy. Now, open up the header for your site, and paste in this line:

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

Now everything is primed & ready. Obviously, you’ll need to replace the YOUR_API_KEY segment above with your actual API key, but now the @Anywhere JS has created a single, global object called twttr. You can now ask it to do something by calling the anywhere method and supplying it with a callback. Here’s what you need to activate the auto-linkification:

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

We can call the anywhere method as often as we like, like so:

<body>

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

    …

    <span id="follow-placeholder"></span>
    <script type="text/javascript">
        twttr.anywhere(function (T) {
            T("#follow-placeholder").followButton('anywhere');
        });
    </script>

    </body>

However, it’s best to consolidate these things, so the JS engine in your browser has to parse through the DOM as few times as possible, like so:

<script type="text/javascript">
    twttr.anywhere(function (T) {
        T.linkifyUsers();
        T("#follow-placeholder").followButton('anywhere');
    });
</script>

Now, what about those Hovercards? Here’s the simplest implementation:

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

Both of these methods, linkifyUsers and hovercards, can take arguments to limit their scope, like so:

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

We’ll get into some of the more advanced uses of @Anywhere next time ‘round.

Last time we discussed some simple @Anywhere implementations; now let’s dive in to some of the more advanced applications of using Twitter on your website. Let’s check out some of the options for Hovercards.

First, note that the hovercards method implicitly calls the linkifyUsers method against its scope (<body> by default). If you want to disable the linkification, you can do so like this:

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

Now all of the @username mentions in #main-content won’t be automatically linkified. But what if we want a hovercard on an entire element, not just the username itself? Use:

<a href="http://twitter.com/artisantalent class="username-mention">Follow @ArtisanTalent on Twitter!</a>

The infer option allows you to trigger a Hovercard for an entire element. This will also refrain from calling the linkifyUsers method, so it’s best to use it on a class of links, like so:

<script type="text/javascript">
    twttr.anywhere(function (T) {
        T("a.username-mention").hovercards({
            infer: true
        });
    });
</script>

You can even specify a Hovercard be triggered if the username is part of the element’s attributes (like title), instead of the text itself. Like infer, this username method also implicitly does not call linkifyUsers. This works like so:

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

In this case, an image with the username in the alt attribute will be given a Hovercard. If you want to mix in the default Hovercard behavior with some of this more specific behavior, you can just call the hovercards method more often! Here we are:

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

        T("#sidebar a.username-mention").hovercards({
            username: function(node) {
                return node.title;
            }
        });
    });
</script>

The above example will linkify & add Hovercards to every @username mention, but when it encounters any links with class username-mention in #sidebar, it will look for the title attribute and add a Hovercard for that instead.

Lastly, you can set up Hovercards to be expanding by default. Normally, you hover over an @username metnion, and it gives you a little info, and then you can click a “more” button to expand the Hovercard, revealing the user’s bio & latest tweet. However, you can also set up the Hovercard(s) so that they are always in expanded state, as if the “more” button has already been clicked. Here’s what you need:

<script type="text/javascript">
    twttr.anywhere(function (T) {
        T("#main").hovercards({ expanded: true });
    });
</script>

With the above code, every @username mention in #main will be in the expanded state by default.

That’s it for now, we’ll check out some more @Anywhere capabilities next time!

Alright, now that we’ve explored Twitter itself, and seen some innovative uses for it, let’s see about improving our experience. Twitter has done a great job with their website, but if you really want to take full advantage of its applications, so to speak, you’ll want to explore the clients available out there. Some are web-based, like HootSuite, but most, like Seesmic, offer a native application for at least one platform (iOS, Android, desktop Mac, desktop Windows, etc.).

Twitter itself has an official client for iPhone & Android, both of which are quite excellent. The iPhone app was Tweetie for iPhone in a former life, but Twitter decided it was the best of the bunch and snatched it right up. I am an avid Twitter/Tweetie user, but I recognize others may want more (or less!) from their client, so onward!

Beyond just the basic Twitter client are a few “all-in-one” apps that seek to more easily connect you to all of your social networks at once. For example, HootSuite and Threadsy allow you to monitor Twitter, Facebook, and a host of other social networks.

Finally, for desktop uses, there’s Tweetie for Mac, Echofon (which also has an iPhone and browser-based version), Tweetdeck (also has an iPhone and iPad version), Twitterrific, and many others.

You can explore the entire myriad of Twitter applications at oneforty, but the ones named here are some of the best, and will definitely improve your Twitter experience.

Now that we’ve become more accustomed to Twitter’s more advanced syntax, let’s delve into the ways you can use Twitter for professional purposes.

First, you can search for your name, your business’s name, or a topic of interest for your business. Hashtags and trending topics may also help here. To making searching even easier, you can save a search to the sidebar on your Twitter homepage. Some applications for accessing Twitter also offer this ability.

Beyond allowing you to find out what’s out there that’s relevant to your profession, Twitter is all about relationships and conversation. Try to keep it light, and keep an eye on things, because once you start using Twitter as a means of informing or supporting your users/clients/customers/whatever you call them, they may begin expecting you to be tweeting constantly!

You can also use retweets to let those you follow know that you think their words are important enough to pass on to your followers. This cements loyalty. Whether you’re a business owner seeking to keep in touch with your customers, or you’re just retweeting what a friend has said, it gives folks the warm fuzzies.

If the account is for a business or professional organization, you can list the names of the folks who will be updating your Twitter in the “bio” section, or as part of a background image. On top of that, you can suffix each of your tweets with the poster’s initials, like so: “-JB”. This can help your followers grasp more easily the different voices coming through the account.

If you’re selling something, offering a Twitter-specific promotion may be a way to gain attention, but be wary of spamming your followers with promo after promo, and certainly do not cross-post the same message to multiple accounts. Instead, try to encourage your followers to retweet your promotion.

Finally, if you’re providing links but using a URL shortener, try one like bit.ly, which can provide click tracking statistics that keep you updated on how many of your followers are following the links you put out.

Hopefully, all of these tips will help you take advantage of Twitter to succeed professionally!

So far, we’ve just discussed what Twitter is, and how to use it, at a very basic level. This time around, we’re going to examine some of the more innovative uses of Twitter.

First up, we’ll look at a relative newcomer: Sell Simply. Sell Simply is, in their words, “the simplest way to buy & sell anything.” They’ve taken advantage of some domain and TLD hacking to get a URL that is as short as possible, which, in the world of Twitter, is über-important. More importantly, though, they utilize Twitter’s @username mention and direct message systems to receive sale submissions and notify users that something they’re looking for has been submitted.

Utilizing Twitter as their backbone means that they don’t need to create their own user account system, nor do they have to create any of their own forms or submission systems. They just explain their syntax for submitting an item, guide users to the notification mechanisms, and craft a filtering system to parse the hashtags on each item. Far simpler than, say, creating a new eBay or something similar.

Next, let’s take a look at what may seem to be an unusual company taking advantage of Twitter: Tasti D-lite. This is a dessert franchise that’s been growing in the New York area for more than twenty years, and it might seem that a food service company, especially what basically amounts to an ice-cream shop, wouldn’t have much to gain from using Twitter. However, Twitter is about being connected. Like other companies that have been successful using Twitter, Tasti D-lite has fostered a community by connecting with customers one at a time.

One of the coolest examples of this business-growing technique involves a worker in the Empire State Building who tweeted about a craving for Tasti D-lite while decrying the building management’s ban on deliveries. It turned out that Tasti has a location in the building and is exempt from this restriction. Because of Twitter, they realized their customers in the building were unaware of this accessibility and were prompted to craft new signage at the Empire State Building location.

Finally, an example that’s more public service than business: the U.S. Geological Survey’s @USGSted, or Twitter Earthquake Detector. They datamine tweets for any mention of an earthquake and plot these tweets on a map, which can very quickly demonstrate the reach of the ‘quake. Combined with instrumentally-derived estimates of magnitude and location, this is extremely useful information. And often, Twitter can continue working in areas where the voice circuits are overloaded, so it offers valuable instant information.

There are dozens more innovative ways that individuals, groups, institutions, and companies are using Twitter. Keep your eyes peeled, or come up with you own!

This next series of posts is about Twitter, one of the newest kids on the social network block. Twitter was founded in 2006 and has experienced astounding growth since then, with a membership exceeding 100 million users. So what is Twitter, exactly?

Twitter can best be thought of as the text messaging of the internet. Unlike blogging, which generally encourages longer-form writing, Twitter’s messages are limited in length to 140 characters, similar to the limit of 160 characters for SMS messages via mobile phones. But unlike the technology-limited nature of SMS messages, this is an arbitrary limitation on Twitter’s part to encourage succinctness.

Head over to twitter.com and sign up for an account. Like so many other online services, you’ll need to pick a username and password. Then you can actually decorate your Twitter homepage with a background image and even change some colors. Now it’s time to write your first tweet (i.e. Twitter message)! Originally, Twitter asked, “What are you doing?” but it now asks “What’s happening?” Though this is just a suggestion; feel free to type in whatever you want. Then comes the fun part: finding people to follow and encouraging others to follow you.

Lastly, a little syntax. When referring to a Twitter user by her account name, you want to prefix it with the “@” symbol, like so: @ArtisanTalent. Later in this series, we’ll discuss why using this syntax is not only semantically useful but also technically useful.

Next time ‘round, we’ll talk about this ‘follow’ business and what it’s all about.

So what’s this ‘follow’ business? Writing 140-character messages and posting them is all well and good, but Twitter is really built on creating a community around yourself. Once you follow someone, his or her tweets (the name for a Twitter message) will appear in your Twitter homepage list (called the timeline or Twitterstream) in reverse chronological order, alongside your own tweets. And if this person follows you, your updates will appear in his or her timeline. This creates a kind of conversation, though, unlike email, it tends to be far more timely and informal. If you’d like to see an example of a moderate, personal Twitterstream, feel free to peruse this writer’s Twitterstream.

In addition to the basic follow setup, you can also follow lists, which are compiled by fellow users and are kept separate from your main timeline to ease congestion. Lists offer some topical separation. As a web developer, for example, you might follow Carsonified’s top-web-devs list to read updates from the many talented developers out there. Or if you were curious what the Twitter team has to say using their own service, you could check out their list. And if you’re looking for a little humor, check out Favstar’s Top 50 Funny.

Obviously, you can just follow your friends, but there’s a wealth of useful, informative, and just plain fun accounts to follow. However, just browsing all of Twitter is quite daunting and isn’t the most recommended way to discover new people to follow. Instead, look at useful websites built around Twitter to seek out suggestions of great users.

One such website is Listorious, which bills itself as a place to “find & interview experts on Twitter.” Listorious is fun because it doesn’t merely list users, but rather, aims to create a sort of forum for Twitter users to get in touch with other users who have shown themselves to be valuable, both within Twitter and in the world at large. Another interesting facet of Listorious is that it allows your response to a question to be greater than 140 characters, which does tend to take things out of the realm of Twitter itself.

Another useful site is WeFollow, a “user powered Twitter directory.” Like Listorious, anyone can join, but here, the idea is not to ask questions or create a community beyond Twitter, but instead to generate a greater semantic of what you as a Twitter user are about through tagging. When you add yourself to the directory, you’re asked to tag yourself with up to five tags, the idea being that people who are interested in what you’ve tagged yourself with will find you by searching the WeFollow website.

Finally, there’s Geofollow, a location-based Twitter directory. While it’s quite a bit more commercial than the previous two, its location-based focus makes it quite valuable for finding Twitter users in your area who are interesting to you.

Start with these resources, and go follow!