How to Auto Generate Short URLs of Your Posts in Blogger with Bit.ly

In our previous tutorials, we have already showed you how to create short URLs for your Blogger blog Using Google Shortener. However, sometime people like things to be accurate and done with automation. Bit.ly is a fair enough popular URL shortening service that automatically provides you a short URL of your post. This not only helps you to save your precious time, but also displays the short URLs at the bottom of your posts, so that visitors can easily share them too. In this article, we will show you How to Auto Generate Short URLs of Your Posts in Blogger with Bit.ly?

What is Bitly: 

It is an online service that provides you short URLs of your posts so that you can share them with your friends, family, and on the web. This service is fairly popular on microblogging site twitter because it is the default shortening service since May 6, 2009. The shorten links created with this service are permanent and somewhat look like this http://bit.ly/6wgJO.

How to Auto Generate Short URLs of Your Posts in Blogger with Bit.ly

The First thing you will be doing is to login into your Blogger Dashboard. Now After logging in, go to your blog >> Template >> Edit HTML >> and search for the ]]></b:skin> tag. Once you find it, just above it paste the following CSS code.

#shorturl {
float: left;
background: #F8F8F8;
padding-bottom: 10px;
border-top: 1px solid #d2d2d2;
border-bottom: 1px solid #d2d2d2;
padding-top: 10px;
width: 650px;
}
#shorternh2 {
float: left;
padding-left: 20px;
padding-right: 10px;
}
.textinpo {
float: left;
font-family: "verdana",helvetica,Tahoma,Arial,sans-serif;
font-size: 12px;
color: #666;
border: 1px solid #ccc;
border-radius: 3px;
background: #fff;
width: 215px;
padding: 0px!important;
padding-left: 10px!important;
height: 20px!important;
margin: -4px!important;
}

Now after pasting the style sheet coding into your template, it is time to move ahead, and get things a bit more serious. Again in the template, search for <div class='post-footer'> and just above it paste the following JavaScript coding which would generate the shorten URLs and display them at the end of your posts.

<!-- Short URLs Script by MBL -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='shoternUrl'>
<form id='shorturl'/>
 <!-- short url widget script start -->
  <script charset='utf-8' src='http://bit.ly/javascript-api.js?version=latest&amp;login=unbfacts&amp;apiKey=R_cb436480530becb8bb6e628aa34520f2' type='text/javascript'/>
<script charset='utf-8' type='text/javascript'>
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[&#39;longUrl&#39;] = r;
break;
}
       document.getElementById(&quot;shorturl&quot;).innerHTML = &quot;<div id='shorternh2'>Surprise your friend with this fact! Share this link in your Status!</div> &lt;input type=&#39;text&#39;  class=&#39;textinpo&#39; value=&#39;&quot; + result[&#39;shortUrl&#39;] + &quot;&#39; name=&#39;bitlyurl&#39;/&gt;&quot;;}
BitlyClient.shorten(document.location, &#39;BitlyCB.myShortenCallback&#39;);
});
</script></div>
    </b:if>
<!-- Short URLs Script by MBL -->

Congratulations: Once everything is down, simply press the “Save” button and automatic shorten URL script is ready, and good to be live on your website. Now go and check your website to see the  Automatically Generate Short URLs of Your Posts in Blogger.

We hope this article has helped you to learn How to Auto Generate Short URLs of Your Posts in Blogger with Bit.ly. What are your thoughts about this automatic script, which we have brought for all guys out there? Which URL shortening service you are using? If anyone has any problem while applying this tutorial then, do not hesitate to leave a comment below.

Posted in: BLOGGER TRICKS