Display Short URLs for Blogger Posts with Bit.ly

short-urls-for-blogger-posts-with-bitly

Having a Shorter Version of your Blog Post’s URL is much useful especially when sharing links with others. For example Take a look at this Link http://bit.ly/aJMJNI . If you visit that link, you will end up right back here. This URL shortening was done with the Help of the Bit.ly API. Bit.ly is one of the most reliable URL shortening services on the Web. Wordpress has got its own URL shortener namely WP.me. If you are interested in providing Short Sharable URLs of your Blogger Posts to your readers, then read on. Demo is present on the post page.

Template Tweaking to Add the  Short URLs

  1. Login to your Blogger Dashboard and navigate to Design > Edit HTML
  2. Click on the Check Box which says “Expand Widget Templates.
  3. Locate
    </head>
    and add the following JavaScript Snippet just above that
    <script charset='utf-8' src='http://bit.ly/javascript-api.js?version=latest&amp;login=tweettrackjs&amp;apiKey=R_7e9987b2fd13d7e4e881f9cbb168f523' type='text/javascript'/>
    <script src='http://blogger-plugins.googlecode.com/files/bloggerplugins.org.bit.ly.short.url.generator.js' type='text/javascript'/>
  4. Now Locate
    <p class='post-footer-line post-footer-line-3'>

    Or if that is not there then find

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

    Or if that is not there then find

    <data:post.body/>

    and place the  following code  just below any of these lines[whichever is present in your template].

    <div id='bp_shorturl'>
    <form expr:id='"bp_short_holder_" + data:post.id'/></div>
    <script type='text/javascript'>
    Bloggerplugins_shortener.init(&quot;bp_short_holder_<data:post.id/>&quot;,&quot;<data:post.canonicalUrl/>&quot;)
    </script>

Save the changes and now you should See a Sharable Short URL below each of your posts .If you want to tweak further, then read on.

Optional Tweaks

1.Styling the Share Link

Locate the following line in your template

]]></b:skin> 

and just above that line add

#bp_shorturl {
color:#666;
font-size:11px
}
#bp_shorturl input {
color:#999;
border:inset 1px #CDCDCD;
padding:1px 5px;
}

and save.

2. Display the Short Link on Post Pages Only

If you want to restrict the Short URLs to your post pages, then wrap the codes mentioned in Steps 1 and 4 within Conditional tags like :

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script charset='utf-8' src='http://bit.ly/javascript-api.js?version=latest&amp;login=tweettrackjs&amp;apiKey=R_7e9987b2fd13d7e4e881f9cbb168f523' type='text/javascript'/>
<script src='http://blogger-plugins.googlecode.com/files/bloggerplugins.org.bit.ly.short.url.generator.js' type='text/javascript'/>
</b:if>
and
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='bp_shorturl'>
<form expr:id='"bp_short_holder_" + data:post.id'/></div>
<script type='text/javascript'>
Bloggerplugins_shortener.init(&quot;bp_short_holder_<data:post.id/>&quot;,&quot;<data:post.canonicalUrl/>&quot;)
</script>
</b:if>

3. If you have your own Bit.Ly Login and API key, then you can replace them in the code of Step 1(tweettrackjs and R_7e9987b2fd13d7e4e881f9cbb168f523). Its free to signup and it is advised to use your own login and API because too many API calls on the same login can create an undefined error

Demo: (wont appear if you are reading this in a a feed reader or else where)

Share this:

30 comments :

  1. Ist Comment saved, I will try it Dude! Thanks

    ReplyDelete
  2. Hi, a lifetime ago I mentioned I'd write a post featuring Blogger Plugins. I ended up writing one simpler than I initially thought, but the tag is there. :)

    http://bit.ly/visual_rev

    (short link customized with bit.ly, how fitting, heh)

    Here's the long version, in case you feel more comfortable:

    http://marisrandomities.blogspot.com/2010/08/visual-revolution.html

    Thanks for your hard and most useful work!

    ReplyDelete
  3. @Mari - Thanks for the kind words :)

    ReplyDelete
  4. This is really cool. They don't need to shorten their url every time and if others use the same short url, they can even track the analytics.
    And Its really suggested to have their own login and API for tracking analytics and real click time data from bit.ly

    ReplyDelete
  5. Another cool blog tip worth trying -- and of course worth sharing! Thanks.

    ReplyDelete
  6. nice.. atleast I don't need to use bit.ly separately when sharing on Twitter.

    http://www.teknisyan.net

    ReplyDelete
  7. i love u web so much more interestingg new www.khmerx.blogspot.com

    ReplyDelete
  8. With this people will never the URL of the blog

    ReplyDelete
  9. Chinna

    Hi
    i tried this

    Individual Posts not working on ie7


    http://img521.imageshack.us/img521/4658/errorie.jpg

    ReplyDelete
  10. How can I replace the Bit.ly to Goo.gl?

    ReplyDelete
  11. AHHH! I love this! I have been searching for a way to make my Blogger links shorter. Thank you! you are a genius.

    ReplyDelete
  12. Thank You Very Much
    It's Working 100% .
    But can u make the same with google's shortener url ???
    http://code.google.com/intl/en-US/apis/urlshortener/v1/getting_started.html

    ReplyDelete
  13. how can i add this URL SHORT but with goo.gl.com .

    ReplyDelete
  14. i tried but it was no working for my blog.

    ReplyDelete
  15. Thanks for you help :) i really appreciate your this post. But i want to know how can i put an Widget or ads above the comment box in blogger, Please help me regarding this.

    Thanks

    ReplyDelete
  16. Worked great, nice widget, thanks!

    ReplyDelete
  17. thanks for share keep it up........:D

    http://khandost.blogspot.com/

    ReplyDelete
  18. Thanks for this tutorial. Anyone know how I can have the "Share Link" on top of the post instead of the bottom? Thanks

    ReplyDelete