Automatic ShortURL For Every Blogger Post [Widget]

This tutorial will explain how to automatically generate short urls (using the bit.ly API) for every Blogger post, and display this URL in a box at the bottom of each post - TechCrunch style. For Wordpress blogs there are plugins which you can use to achieve this but as always, making this possible for a Blogger blog is tricky.

Before we get started, I would like to thank Francisco from BlogAndWeb for sharing this with us.

Now we can proceed to implementing this into a blogspot.com blog:

1. Expand Widget Templates Go to your Blogger dashboard > Layout > Edit HTML and check the "Expand Widget Templates" box. Now search for the following piece of code:

<div class='post-footer-line post-footer-line-3'>

Please note: it can be post-footer-line-1 or post-footer-line-2 instead of post-footer-line-3. Also, it can be a <p class= ... instead of <div class= ...

2. Paste the following code right after the line you found from step 1:

<b:if cond='data:blog.pageType == "item"'><form id='shorturl'/></b:if>

If you want this short url box to be displayed in some other area of your template, you can put the above code in some other location into your template.

3. Search for the </head> tag into your template, and paste this right above it:

<script type="text/javascript" charset="utf-8" src="http://bit.ly/javascript-api.js?version=latest&amp;login=bitlyapidemo&amp;apiKey=R_0da49e0a9118ff35f52f629d2d71bf07"></script>
<script type="text/javascript" charset="utf-8">
BitlyClient.addPageLoadEvent(function(){
BitlyCB.myShortenCallback = function(data) {
// this is how to get a result of shortening a single url
var result;
for (var r in data.results) {
result = data.results[r];
result['longUrl'] = r;
break;
}
document.getElementById("shorturl").innerHTML = "Dirección para compartir: &lt;input type='text' value='" + result['shortUrl'] + "' name='bitlyurl'/&gt;";
}
BitlyClient.shorten(document.location, 'BitlyCB.myShortenCallback');
});
</script>

If the above code returns an error, copy & paste the code from HERE instead of the one above.

If you want to track your shorturl clicks, replace the bit.ly login and API key in the code above with your own (you can get an API key by registering for an account on bit.ly - don't worry, it's free).

4. This is an optional step: you can also style this shorturl box. For this, in your template, search for ]]></b:skin> and paste this code right above it:

form#shorturl {
color:#666;
font-size:11px
}

#shorturl input {
color:#999;
border:1px inset #CDCDCD;
padding:1px 5px;
}

You can modify it, add some other styles, etc, all by using CSS.