The nature of projects like Twitter’s @Anywhere and Facebook’s Graph API open up a lot of opportunities for the web. This is not only for developers, but for average web users as well. The key lies in the fact that these technologies rely on simple languages like HTML and Javascript. No advanced development skills are necessary to do some very interesting things.
In a previous post, we covered the basics of setting up @Anywhere on your website. Here, we will take things a step further and describe how to create a members only or VIP section. This will be a page or section of a page on your site that is only visible to certain people. These are Twitter users who have authorized your site to connect to their Twitter account via OAuth. This connection could later be used as part of a marketing funnel or leveraged using more advanced techniques.
This is all possible using a little bit of Javascript. In my implementation, I stuck the code into the sidebar on one of my WordPress blogs. This method is the easiest and most useful because it will attract more eyeballs. Also, putting Javascript inside a post or on a page is actually more difficult than it sounds. Here is the example code:
<span id="authContent"></span> <script type="text/javascript">
twttr.anywhere(function (T) { $j = jQuery.noConflict(); var currentUser, screenName; if (T.isConnected()) { currentUser = T.currentUser; screenName = currentUser.data('screen_name'); $j('#authContent').append("Hello, " screenName); } else { T("#authContent").followButton('BlackWeb20'); };
});
</script>
First, we create a <span> element with an id of “authContent” (you could pick any name you like) which will be a place-holder for our content. What follows is an @anywhere block that does a couple of things:
- We check to see if the visitor has already logged into Twitter and authorized your site.
- If they have, we show them a personalized greeting that includes their Twitter username. This is the section where you would put some type of premium or VIP content.
- If they have not, we show a button that allows them to simultaneously connect to your site via OAuth and follow you on Twitter. Just be sure to change the “BlackWeb20″ part to your own Twitter username.
Digging Deeper
I kept this example dead simple so that it would be easy to grasp the basic concept, but this is definitely just the tip of the iceberg. All you’ve got here is a way to get people following you that might actually be interested in your brand or site, but you can take things much further. Here are a couple of examples that I’ll leave as exercises for the reader:
- Why should the visitor follow you on Twitter at all? It’s relatively simple to reorganize things so that you entice visitors to follow you in exchange for something. This could be a free download of some kind, for instance.
- Why not go viral? @Anywhere provides a Tweetbox feature that lets you set the default content. It’s somewhat tricky, but possible to offer something of value in exchange for a shout out on Twitter. Hint: You’ll need a way to differentiate these @mentions, maybe via a custom hashtag, phrase, or link that must be included.
As always, feel free to ask questions in the comments. What ideas can you think of for leveraging @Anywhere? Have you already implemented anything? Tell us about it.