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!