Subscribe by RSS
Are You Following Me?
7/28/2010 9:00 AM By Jeff BWe’ll tackle two of @Anywhere’s abilities this time: Follow Buttons and the Tweet Box.
Follow Buttons
When clicked, Follow Buttons should say “You’re following @username” if the user is already following them. Otherwise, they say “Follow @username on Twitter.” Here’s what you need to create one:
<span id="follow-artisan"></span>
<script type="text/javascript">
twttr.anywhere(function (T) {
T('#follow-artisan').followButton("artisantalent");
});
</script>The above tidbit inserts a span with an id of “follow-artisan,” and then the JS will place a Follow Button into that <span>. The argument for followButton itself is the username that you want it to be referencing, so change that to suit, and, of course, the id can be anything, just make sure to change it’s reference in the T bit.
Tweet Box
The Tweet Box allows users to tweet something directly from within their site without leaving. Like with the Follow Button, start with an element, then attach it to that element and call tweetBox, like so:
<div id="tweet-box"></div>
<script type="text/javascript">
twttr.anywhere(function (T) {
T("#tweet-box").tweetBox();
});
</script>We’ve just inserted a Tweet Box into the tweet-box <div>. But unlike the Follow Button, there are some configuration options for the Tweet Box. It takes the options like so:
<div id="tweet-box"></div>
<script type="text/javascript">
twttr.anywhere(function (T) {
T("#tweet-box").tweetBox({
height: 100,
width: 400,
defaultContent: "<YOUR DEFAULT TWEETBOX CONTENT HERE>"
});
});
</script>This example sets a specific height & width, and supplies some default content for the Tweet Box to contain. You can set all of these options:
counter: This is a boolean property, which defaults to true, that displays a counter in the Tweet Box for counting characters.height: A number, which defaults to 515 (measured in px), this determines the height of the Tweet Box.width: Likeheight, this is a number, defaulting to 65 (also in px), that determines the width of the Tweet Box.label: A string defaulting to “What’s happening?” that corresponds to the text above the Tweet Box. It is a call to action, if you will.defaultContent: This is also a string, but it has no default. It can be used to pre-populate text in the Tweet Box. Useful for an @mention, a #hashtag, a link, etc.onTweet: This is a function, defaulting to none, where you can specify a listener for when a tweet is sent from the Tweet Box. The listener receives two arguments: a plaintext tweet and an HTML tweet.data: This is an object, with no default, expessed as a key + value pair representing any of the additional metadata that can be set when updating a user’s status. See the REST API documentation for a complete list of the possible options.
So now you’ve got two more simple, but quite powerful, tools to further encourage your visitors to interact with your site using Twitter.
Tags: twitter
