Image Credit: © matthamm, arrayexception
The other week I came across an interesting article on Twitip by Chris Webb (@FreeWebApps). It was about a new service (for want of a better term) from Twitter called @Anywhere. Let me tell you… @Anywhere is nothing short of amazing! With it, you can give any website the ability to interact with Twitter directly (no need for any 3rd party apps) with just a few lines of javascript.
Show Me The Magic
I guess you are wondering just what this @Anywhere thing can do. Well, before I tell you what it can do, I want to point out that everything that it does do, it does so without your reader leaving your site. That in itself is worth the price of admission. 
OK, lets take a little tour.
First of all, “Follow” buttons. Have a look at the top right of this page (sorry, RSS people, you’ll have to view the original article on Steve Youngs dot Com), just under that picture of that devilishly handsome guy there. You’ll see a “Follow @SteveYoungs on Twitter” button. If you click that you’ll start following me. If you haven’t already given the app, “Steve Youngs dot Com” permission to connect with your Twitter account you’ll get a pop up asking for that permission. That only happens once, and I’m sure it is something that you have seen in the past already.
The next ultra-cool thing would be the automatic linking of any Twitter style user name, and “Hovercards“. Every Twitter user name mentioned on your page becomes a link to that user’s Twitter profile (there’s no need to manually add the href). But that’s fairly boring, the coolness comes when you put your rat pointer over the link. Up pops this “Hovercard”. From within the hovercard you can follow or unfolow the user, see the number of people they follow, the number following them, the number of tweets they’ve sent, their bio, and their last tweet.
Try it out on some of these (all awesome folks that you should be following): @6aliens @giveabrick @HorstBurkhardt @garyvee @problogger @SteveYoungs
But I Want More!
You want more, you say? How about this…
Does that look familiar? It should. It is the exact same tweet box that you see at the top of the page on twitter.com. Try it out. It is a live and working tweet box. If you type something in the box and hit the “Tweet” button it will be sent to twitter.
You can, of course, customise the tweet box…
Again, that is a live tweet box. Oh, and if you do try out this second one, I’ll see it (providing you leave me in the content), and I promise I will reply to you.
The Tweet Box’ Hidden “Feature”
I do encourage you to try out one of the tweet boxes on this page, especially the “Retweet” one at the bottom 
because there is something I want to show you. After you have tweeted from here, go to your normal Twitter client (or to twitter.com itself) and have a look at the tweet there. You’ll see that the app used to send the tweet was called “Steve Youngs dot Com”. Depending on your client, that will be a link back to this site (the twitter website does this if your client doesn’t). Woohoo! Free publicity! Maybe even some extra traffic.
Alright, I’m Sold, How Do I Get This?
There are a couple of things that you have to do to set this up, but it isn’t too painful. The basic steps are…
- Sign up with @Anywhere to get an API key
- Use that key together with some javascript on your site
Signing up with @Anywhere is fairly straight forward. Just go to their sign up page and fill out the form there. On that form, “Application Name” is the text that will show up on tweets as the app used. And for “Default Access type” you must choose “Read & Write”, otherwise write actions such as tweeting won’t work.
Once you have filled in and submitted that form, go to “View your applications” and you’ll see your new app listed. Click on its name and you’ll be taken to a detailed view of your app. Your API key is listed there.
WordPress Setup Without Getting Your Hands Dirty
Yes, you are in luck, there are already some WordPress plugins for @Anywhere integration. I’ve seen two so far, the one that Chris listed in his article, and “Twitter @Anywhere Plus“. The latter is the one that I would personally recommend. The plugin does lack a couple of features, but if you go to the plugin page you’ll see that I left the guy a comment explaining what I felt was missing, and he replied saying he was adding those things in a future version.
This plugin is available through wordpress.org, so you can install it via your dashboard in the normal way. It doesn’t come much easier than that.
WordPress Setup — The Dirty Hands Way
Some people just have to dig into the source code and stick their grubby hands all over everything (yup, that’s me!). So I have set up most of the @Anywhere integration here manually. Now, if you are likely to want to do it this way, my guess is that you have no trouble following instructions and documentation, so jump right in from the @Anywhere docs.
Bonus — Code For Retweet Box Used Here at SYcom
At the bottom of every article here you’ll see a “Retweet box” that is pre-filled with the article’s title and a shortened URL. That comes from a few lines of javascript and jquery in single.php (the file that displays a single article). Here is the code that brings the magic to life (you can copy/paste into your own site)…
<!-- Tweetbox -->
<div id="tbox" style="text-align: center;"></div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript">
twttr.anywhere(function (T) {
function CompressURL(url,success)
{
var link = 'http://to.ly/api.php?json=1&longurl=' + encodeURIComponent(url) + '&callback=?';
$.getJSON(link, function(data){
success && success(data.shorturl);
});
}
CompressURL(document.location.href, function(shorturl)
{
T("#tbox").tweetBox({
height: 40,
width: 550,
defaultContent: "RT @SteveYoungs " + document.title + " " + shorturl,
label: "Tweet this article!"
});
});
});
</script>
<!-- End Tweetbox -->
Please remember that you need more than just that code snippet to make it work. @Anywhere has to be initialised on your site, and that is done via a one-liner that goes into the “head” section of your page…
<script src="http://platform.twitter.com/anywhere.js?id=YOUR_API_KEY&v=1" type="text/javascript"></script>
You won’t need that if you are using one of the WordPress plugins I mentioned earlier. They do that for you.
I hope you enjoy the new Twitter integration, both here and on your own site.
Till next time…
Help me write more great articles like this, fuel my mojo with a coffee!
Previous 
Next 
Categories
Tag Cloud
Blog RSS
Comments RSS
Last 50 Posts
Back
Void 
Life 
Earth 
Wind 
Water 
Fire 
RSS
Buzz
Facebook
LinkedIn
Digg
YouTube
Delicious
Hey
Thanks for the shoutout.
I’ve not got any serious javascript going on on my website, mainly because I like simplicity and I absolutely love the fact that my site renders in Arachne (a DOS browser) and Netscape 4.08 (remember Netscape?) …
This might just make me change that, or at least add a sub-page that lets people whore my site.
This @Anywhere sounds like a great service, and I’ll definitely be sure to try it out somehow! Thanks for the heads-up!
– @HorstBurkhardt
Hey, Horst!
You are very welcome for the shout, mate. Netscape? Now there’s a blast from the past. But I haven’t used it since version 3.something-or-other on OS/2. No, wait, I may have used a Linux build of it once upon a time, but still 3.something.
Twitter: SteveYoungs
That really is super cool Steve. If I wasn’t running around packing for our family holiday, I’d be getting my hands dirty right now. As it is, I’ll have to wait until I get back. Thanks for the heads up though. Looks awesome!
Eleanor Edwards´s last blog ..#CharityTuesday: @TheDrEgg and his hairshaving video
Hi Eleanor!
Yeah, this stuff is pretty spiffy. But I think I must be getting mellow in my old age… I’ve always had a passionate disdain for javascript (& java), and now I find myself using it more and more.
Thanks for stopping by, and I hope you guys have an awesome time on your holiday.
Kind regards,
Steve
Steve Youngs´s last blog ..Twitter And WordPress Can Be Best Friends
Twitter: SteveYoungs
An interesting read Steve. I hovered over some of those links in the post and the only drawback is that it doesn’t tell you if you’re already following them, as I’m already following some of them and I’m still presented with a follow link. No major drama, just being picky I guess.
Does any of this affect your page speed at all?
Sire´s last blog ..WassupBlog’s Posts Are Copyright Protected With Digiprove
Twitter: AussieSire
If you allow my site to connect with your Twitter A/C (either by hitting the “connect” button under the “follow” button just under my pic, or by retweeting) then you’ll see that the hovercards do show if you are following or not. And I’ve just noticed in my Twitter stream that you have indeed connected. Are the hovercards still not showing that you are following some of them?
As for page speed, yeah there is an extra hit on the load time, but it is negligible.
Twitter: SteveYoungs
Nope they’re showing fine now mate.
I must admit I was a little bit confused when tweeting this post because the tweet box didn’t disappear and so I wasn’t sure if my tweet went through. I just posted something about ‘I thought I already did this’ so I reckon all my followers now assume that I talk to myself
Sire´s last blog ..The Need For Speed Computer Style
Twitter: AussieSire
I’ve just seen what you mean about the tweet box not disappearing after you’ve sent the tweet. I’ll get hold of the plugin author and see if there is anything that can be done about that. As I mentioned on Twitter to you, you can dismiss the pop up lightbox style retweet box by clicking your rat anywhere outside the box. Thanks for letting me know about that.
Oh, and I wouldn’t worry about your followers… they already knew you talked to yourself
Twitter: SteveYoungs
There are some really nice WP Twitter plugins out there Steve, but this is definitely one of the coolest.
Thanks for sharing it out with everyone.
Ben´s last blog ..Friday’s Personal Development Homework
Twitter: 6aliens
It’s not any plugin that is cool in this case, mate. The cool thing here is the underlying API and that Twitter was cool enough to make it available to the public.
And don’t forget, the plugin only makes it easier to implement the coolness, it is not mandatory to use the plugin to get the coolness.
Twitter: SteveYoungs