Subscribe by RSS
Here, There, @Anywhere
7/26/2010 9:00 AM By Jeff BThis 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.
Tags: twitter
