Subscribe by RSS
Treat Your Users Right
7/28/2010 9:00 AM By Jeff BThe 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!
Tags: twitter
