Twitter’s Anywhere platform allows you to turn any website into a Twitter application. All basic functionality that you would find in a Twitter client is supported. It appeals to your average user who just wants a fancy follow button, to more advanced business and technical users. This will be a quick walk-through on how, exactly, you can get started with @Anywhere with minimal technical knowledge.
Set Up a Twitter Application
This isn’t as hard as it sounds. Visit the Twitter @Anywhere Dev site and click the Start Using It Now button. This will take you to the application setup screen. Don’t get tied up in the details here. You know your site’s name and URL. That is all you need. Be sure to choose Read & Write access for your new application.
Once you’ve created your application, copy the API key to your clip board. You will need it for the next step.
Paste The Relevant Code
You knew this was coming. The first code snippet goes in the header of your page, before the </head> tag (this is usually the case for most external Javascript you use). It should look something like this:
<script src="http://platform.twitter.com/anywhere.js?id=YOUR_API_KEY&v=1" type="text/javascript"></script>
Just be sure to replace the YOUR_API_KEY part with your actual API key from the first step.
Activating @Anywhere Features
This part can get a little technical, but is still just a cut and paste job if you keep things simple. You activate specific @Anywhere features calling the corresponding methods within your Javascript code. The features currently available are:
- Auto-linkification of Twitter usernames – automatically link @usernames to their Twitter profiles.
- Hovercards – show a small preview of a user’s Twitter profile when you hover their username.
- Follow buttons – allow one-click following of a specified user. No need for them to leave your website to follow you or anyone else you would like.
- Tweetbox – allow your visitors to easily send a tweet from your website, optionally specifying default content for them to tweet. Very useful if you use your imagination.
- User login and signup – some activities of @anywhere require the visitor to connect their Twitter account to your site. Stuff like Following and tweeting, for instance. You don’t have to include a separate login button, though.
At the very least, you probably want a follow button so that your visitors can easily connect with you on Twitter. Hovercards are also useful in allowing visitors to take action on users and it implies the auto-linkify feature. To enable hovercards, place the following code in the footer of your site before the </body> tag.
<script type="text/javascript"> twttr.anywhere(function (T) { T.hovercards(); }); </script>
Adding a follow button is a two step process as you will need to create a place for the button to go, and then include the code to actually draw the button. So, first we create a <span> element on our page with a specific id, which we will refer to in a moment. You might place this in your blog’s sidebar, for instance.
<span id="follow-blackweb20"></span>
Next, place the following Javascript code before the </body> tag of your page. In this case, we are creating a follow button for the Twitter user @blackweb20 and we are telling the @anywhere API to put the button in the page element with an id of “follow-blackweb20.”
<script type="text/javascript"> twttr.anywhere(function (T) { T('#follow-blackweb20').followButton("blackweb20"); }); </script>
Your pages can include multiple anywhere blocks to keep your features separate.
That’s It
There are multiple @Anywhere plugins for WordPress. I can’t vouch for any of them yet, but give them a shot and let me know which you like. If you are very wary about editing your template, these will probably be your best bet. Of course, if you want to get a little advanced, feel free to ask questions in the comments if you have any problems.
Also, for those more technically inclined or with creative minds, what uses can you think of for @anywhere?