Tutorials, tips and tricks about Blogger

20 Jan

How to show short URL’s on Blogger

13 Comments | by in Design, Tips and Tricks, Tutorials | 2010

Español Português

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

    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:

    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">
    		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;
    			document.getElementById("shorturl").innerHTML = "Share this link: &lt;input type='text' value='" + result['shortUrl'] + "' name='bitlyurl'/&gt;";
    		BitlyClient.shorten(document.location, 'BitlyCB.myShortenCallback');
  4. As an option, you can give it your own style, in order to match your blog’s layout. For example:
    form#shorturl {
    #shorturl input {
    border:1px inset #CDCDCD;
    padding:1px 5px;

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

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


    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 Comments, leave a reply · Feed
  1. undefined…hiks 🙁

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

  3. Francisco March 12, 2010

    Updated. Now it should work. 🙂

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

  5. 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 🙂

  6. denis stya August 19, 2010

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

  7. puffidredz August 20, 2010

    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.

  8. puffidredz August 20, 2010

    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.

  9. puffidredz August 20, 2010

    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

  10. Thanks!

  11. not work? any update for this?

  12. Jones Garcia September 28, 2013

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


You must be logged in to post a comment.

Tutorials, tips and tricks about Blogger