Oho, did I actually write the right title of this post? Bit.ly is not for tweeting, it’s for shortening the long URLs right, but hey, why bit.ly is so popular now? Most common answer could be twitter. I don’t know if people would used this service that much if there wasn’t twitter. Anyways, this is very important to shortening something in your tweet as twitter has character limits. So let’s see how we can actually tweet something from a website using this REST based Api method calls.

Note one thing that if your site is using wordpress or any kind of CMS that allows to use plug-ins then you don’t have to worry about it. This is something you can use only for updating some content to twitter from your site. Hope I made it clear at first….

After digging bitly apis, I think its pretty easy to do it as bitly provides Javascript client library so there shouldn’t be any varier about back-end language. So let’s see how easily we can tweet some content from our site.

First of all, if you redirect anything with the following URL, twitter will get your message in the text box and all you have to do is, just press the update button.

http://twitter.com/home?status=your_message_comes_here

So our message has to be customized and you cannot allow anybody to send message more than 140 chars right. This is why we will use bitly api to customized it.

First of all, we have to add the API library with the following format.

<script type="text/javascript" charset="utf-8" src="http://bit.ly/javascript-api.js?version=latest&login=junal&apiKey=R_888fefa724b856672a3276a3905d8e30"></script>

you need to login to get user name and password from bitly, though you can use demo user name and apikey from here but later you have to use your own authentication information.

Anyways, we are done connecting with bitly by including their JS client library. Now let’s create some functions of our own to call them. Open a JS file and paste the following there, you can find this example codes in the bitly documentation.

var TweetAndTrack = {};
TweetAndTrack.open = function(targ, url) {
var callback_name = url.replace(/\W/g, '');
BitlyClient.call('shorten', {
'longUrl': url,
'history': '1'
}, 'BitlyCB.' + callback_name);
return false;
};
 
TweetAndTrack.popResult = function(data) {
// Results are keyed by longUrl, so we need to grab the first one.
for (var r in data.results) {
return data.results[r];
 }
};

now it’s time to create our own function to call. Here is the example one…

function tweetMe(msg, url) {
var textMessage = msg.replace(new RegExp("^(.{0," + 80 + "}\\b).*"), "$1");
var callback_name = url.replace(/\W/g, '');
BitlyCB[callback_name] = function(data) {
var result = TweetAndTrack.popResult(data);
var tweet_url = "http://twitter.com/home?status=" + encodeURIComponent(textMessage+ "... " + result.shortUrl );
window.open(tweet_url);
};
 
BitlyClient.call('shorten', {
'longUrl': url,
'history': '1'
}, 'BitlyCB.' + callback_name);
 
return false;
}

I have used regular expression here to truncate the message. I kept the length of the message 80! why? Because, your URL will take some chars as well and you should also keep some space for people who will retweet your tweet

Now, we have to call this javascript function called “tweetMe()” and it has 2 params right. We have to pass the message and the url along with the message and bit.ly api will make sure that whatever we are sending, it will be customized before sending. So how can we call this function?

<a href=”#” onclick=”return tweetMe(‘Content or message of your tweet‘, ‘URL of your along with your message‘);”>tweet this </a>

Ok, now just click on “tweet this” and then you it will take you to the twitter heaven. Be happy there, and ask me any questions if you can’t reach there