A Proposal To Add Bit.ly URL Shortening To StatusNet
For those that have been following the news regarding OpenSource Release Feed you will know that I have finally decided that the best way to make this concept work is with a Twitter like stream and have set-up OpenSource Release Feed on StatusNet. One of the things I have not enjoyed is having to open a new tab, navigate to a new site just to shorten the URL I wish to include with my dent. I have been using Bit.ly for my URL shortening needs and decided to look into a way of adding this to StatusNet.
I ended up writing a script using the Bit.ly API and jQuery and will discuss how I went about this in this article. First of we all know the power of jQuery and that combined with the simplicity of the Bit.ly JavaScript API made this a pretty simple task. I started by creating the following HTML page:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Bitly</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
<script type="text/javascript" charset="utf-8" src="http://bit.ly/javascript-api.js?version=latest&login=yourlogin&apiKey=yourapikey"></script>
<script type="text/javascript" src="lib/bitly.js"></script>
</head>
<body>
<h1>Bitly</h1>
<form name="form_notice" method="post" id="form_notice" enctype="multipart/form-data">
<fieldset>
<legend>StatusNet</legend>
<label for="statusnet">Status:</label>
<textarea id="statusnet" rows="5" cols="20"></textarea>
</fieldset>
</form>
<div id="shorten_bitly"></div>
</body>
</html>
Looking at the above I first include jQuery using Google and then continue to include the Bit.ly JavaScript API and finally my own script to make use of the previous two. In the bitly.js file I started with the following:
$(document).ready(function(){
if ($("form#form_notice").length) {
addUrlShortner();
}
$("form#shorty").submit(function() {
shortenAndAppend();
return false;
});
});
First I ensure that the DOM is built and ready. I then check whether the document actually contains the ‘form_notice’ form so I do not add the text field on all pages and especially not if the user is not logged in. Once I know the user is logged in and the ‘form_notice’ form is available I call the ‘addUrlShortner()’ method:
var addUrlShortner = function() {
$("#shorten_bitly").html("<form name='shorty' method='post' id='shorty' enctype='multipart/form-data'>" +
"<label for='shortenme'>URL:</label><input type='text' id='shortenme' name='shortenme' /><input type='submit' value='shorten' /></form>");
}
This script will look for an element with the id ’shorten_bitly’ and then add the form to it, please let me know if there is a better/cleaner way of doing this with jQuery. Once our form is there we can start using it. When the shortening form is submitted we catch the event and call the ’shortenAndAppend()’ method. This does all of the work:
var shortenAndAppend = function() {
//Get's the URL from the input field
var shortenme = $(":input#shortenme").val();
BitlyClient.shorten(shortenme, 'BitlyCB.appendToDent');
BitlyCB.appendToDent = function(data) {
var result;
for (var r in data.results) {
result = data.results[r];
result['longUrl'] = r;
break;
}
//Get's the current content of the textarea
var currentContents = $(":input#statusnet").val();
//Replace the value of the text area with it's initial value and the
//shortened URL appended to the end.
$(":input#statusnet").val(currentContents + " " + result['shortUrl']);
}
}
I have added some comments to the code above to explain what’s going on but, I first get the URL entered and then send that of to Bit.ly for shortening. The callback then reads the shortened URL from the response and stores it. We next need to add the shortened URL to the text area. To do this, we first read what is already entered into the text area and continue to replace everything in the text with what was there and appending the shortened URL.
That’s it, we are done. However, I now need some help. I am firstly not well versed in PHP, although I could figure it out, and secondly, I do not know the structure of the StatusNet source well enough to know where to add all of this to integrate it. If you feel that this is something that you want added to your StatusNet installation and know your way around the source I would appreciate the help of getting this integrated. Me for one, would love to have this available. I look forward to your comments, suggestions and help on getting this into StatusNet.
This website uses IntenseDebate comments, but they are not currently loaded because either your browser doesn't support JavaScript, or they didn't load fast enough.