BTemplates Blog

Tutorials, documentation and news about Blogger.

How to show short URL’s on Blogger

Twitter has made it mandatory to make use of each one of the characters we use to spread ideas in a few words and using short URL’s to give us a bit more room. Considering Twitter is getting every time a more valuable source for traffic, it really pays off to give our readers an easier alternative when they want to share our contents by providing short URL’s.

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

Step by Step

  1. To show a short URL at the bottom of every entry, do this search with the gadgets expanded:
    <div class='post-footer-line post-footer-line-3'>
    
    </div>

    They might also be post-footer-line-1 or post-footer-line-2, just be careful you open and close the tags the right way.

  2. Inside any of the 3 footer lines, paste this code:
    <b:if cond='data:blog.pageType == "item"'><form id='shorturl'/></b:if>
  3. Right before the closing tag:
    </head>

    Paste the following script:

    <script type="text/javascript" charset="utf-8" src="http://bit.ly/javascript-api.js?version=latest&amp;login=bturls&amp;apiKey=R_37db93397f2c5d6b49a0f3d778d2e142"></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>
  4. As an option, you can give it your own style, in order to match your blog’s layout. For example:
    form#shorturl {
    color:#666;
    font-size:11px
    }
    
    #shorturl input {
    color:#999;
    border:1px inset #CDCDCD;
    padding:1px 5px;
    }

    Just remember that the styles go right before the closing tag:

    </b:skin>
  5. As a result, with the given style sample, in every individual page it looks like this:

    bitly-blogger-shorturl 

    Providing a short URL instead of the original URL to tweet makes it cool to use in any other social networks where a long URL is not very aesthetic, not only Twitter.

13 Questions and comments on How to show short URL’s on Blogger

Beben February 21, 2010 at 7:20 am

undefined…hiks 🙁

Nazir February 26, 2010 at 3:08 am

Its not working! It just says undefined! help fast!!

BTemplatr, Blogger template | BTemplates March 6, 2010 at 12:47 pm

[…] / widgets.Menu with static pages.Menu with social services.Social Bookmarks on individual pages.Short URL’s (bit.ly) on individual pages.Typography Aller in titles (with javascript).Section Banner 125×125.Color […]

Francisco March 12, 2010 at 1:39 am

Updated. Now it should work. 🙂

Beben May 26, 2010 at 3:47 pm

in my place still not work…:(
no showed..

Beben May 27, 2010 at 7:56 am

in my blog not this code “div class=’post-footer-line post-footer-line-3” and i’ll try writed it, and i put in my template still not worked. I’ll try put code (step 2) in good place, not worked too, if you’r not objection can you show demos in domain blogspot.com
thanks 🙂

denis stya August 19, 2010 at 3:48 am

yes, undefinied, because script not at host, please put the script at diffrent host, and use <script src="…. and put the code

puffidredz August 20, 2010 at 1:01 am

yeah what Beben said, the codes, and or post-footer-line-1 or post-footer-line-2 do not exist. i tried lookin for it too and its not there. i’m using the new blogger template designer so maybe thats why.

puffidredz August 20, 2010 at 1:17 am

Ahh nevermind i found it. you forgot a step. u have to have “expand widget templates” on the top right corner of edit html window checked. then the code appears.

puffidredz August 20, 2010 at 1:20 am

well u put it up there but it wasnt really explained clearly cuz i kept staring at when u said with the gadgets expanded but i didnt know what u meant. wasnt until i read someone elses site who explained it a lil better. thx for the tip

me May 27, 2013 at 5:29 pm

not work? any update for this?

Jones Garcia September 28, 2013 at 2:07 am

I still don’t know how to show the URL’s on Blogger.I am poor on this field.

Leave a Reply