17 Add Automatic ShortURL Widget For Every Blogger Post

This tutorial will explain how to automatically generate short urls (using the bit.lyAPI) for every Blogger post, and display this URL in a box at the bottom of each post .

Now, using bit.ly’s API, Twitter’s default service, we can create and publish short URL’s for every entry on Blogger.

Tutorial Step by Step

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 find (CTRL+F) this code in the template:
</head>
And immediately before it, paste this code:

<script type="text/javascript" charset="utf-8" src="http://bit.ly/javascript-api.js?version=latest&amp;login=YOURUSERNAME&amp;apiKey=YOURAPIKEY"></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 = "Share this link: &lt;input type='text' value='" + result['shortUrl'] + "' name='bitlyurl'/&gt;";

}

BitlyClient.shorten(document.location, 'BitlyCB.myShortenCallback');

});

</script>



Note: Remember to Replace YOURUSERNAME with your Bit.ly Username and YOURAPIKEY with your bit.ly Api key before you save the code.You will get this both things while you signup to bit.ly.


2. 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;
}

3. Now in third step you need to choose the place for displaying the shorted links.For this Search for the following line in your Blogger Template.but remember to Expand the Template before you proceed.

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

</div>
Now Paste the following line of code between the above code in your Template.
<b:if cond='data:blog.pageType == "item"'><form id='shorturl'/></b:if>

Now click Save Template




As a result, with the given style sample, in every individual page it looks like this:

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=bitlymmmmm&apiKey=R_2c11203612a1769b97204826413d57f1

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