Add Automatic ShortURL Widget For Every Blogger Post

Are you a hardcore Twitter user? Yeah? You might have seen bit.ly urls shortened in the tweets. We can use the bit.ly API to Add Automatic ShortURL Widget For Every Blogger Post and display this URL in a box at the bottom of each post. Unfortunately Blogspot users don't have automatic plugins like WordPress to add a automatic URL shortener to every blog post. So lets crack it down for blogger.



1.Login to your Blogger dashboard > Layout > Edit HTML and check the "Expand Widget Templates" box.
As I always say before attempting any tutorial or hack its wise to make a backup of your blogger template. So please download your blogger template.
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. After Locating the code in previous step. Paste the following code below the code located in previous step.

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

Note: This will add the Shortened URL in footer line 3 of your blogger template. if you wish to add it on the top or anywhere else then you will have to paste the code in that area accordingly.

3. Now locate </head> and paste the following code just above </head>

<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>

Note: If you want to trakc how many people click on this link then I will tell you how you can do that. You need to be a bit.ly user. Then go to your account and find out your bit.ly login and your own API code. And replace it here ..

login=bitlyapidemo&apiKey=R_0da49e0a9118ff35f52f629d2d71bf07

Replace bitlyapidemo by your bi.ly login. and R_0da49e0a9118ff35f52f629d2d71bf07 by your API code provided for your account. This will enable you to track your clicks on this shortened URL.

4.Now you can see that this widget isn't looking cool enough so you will like to add some style tags to it. add the following code before ]]></b:skin>

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

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

Thank you for reading " Add Automatic ShortURL Widget For Every Blogger Post " You can also get a free subscription to Chethstudios updates. We will be back with more useful content. Get latest hacks and updates on your email