Adding Bit.ly Info To Every Post

Jon Steinberg tipped me off to a post at the Bit.ly blog, showing how to add Bit.ly info to every post:

[from How to Add a bit.ly Info Chicklet to Each of Your Tumblr Posts by Kortina]

Here’s a cool little javascript any Tumblr users can add to their blogs that adds a bit.ly Info Chicklet to each post. Add the following line to your Tumblr Custom HTML inside the {BlockPosts} section:

<a href=”javascript:var%20Bitly={url:’{Permalink}’},e=document.createElement(‘script’);e.setAttribute(‘language’,’javascript’);e.setAttribute(‘src’,’http://bit.ly/bookmarklet/load.js’);document.body.appendChild(e);void(0);”>Info for this post by bit.ly</a>

You’ll now have a little button after each post people can click to view a bit.ly overlay about that page. This overlay shows traffic data, referrers (other websites where links to your blog post appeared), and conversations about your post from Twitter and Friendfeed. The overlay will also of course contain a bit.ly URL for your post that your readers can use if they want to tweet about what you wrote. Try clicking the link below this post that says “Info for this post by bit.ly” to see this in action.

Wordpress users, this should be trivially easy for you guys to do as well, but you’ll have to use a different placeholder where this code has {Permalink}. We’ll work on packaging this up as a Wordpress plugin soon to make things easier on you.

I replaced the “url:’{Permalink}’” with “url:’<$MTEntryPermalink$>’” on this blog (running Typepad), and it works like a charm:

Bit.ly Info Javascript, originally uploaded by Stowe Boyd.

Here I have selected the traffic information from bit.ly after clicking on the ‘bit.ly info’ link that appears on the footer of every /Message post, now. Other options include ‘conversations’ which pulls Twitter and Friendfeed references into the hovering info box. I also like ‘recent’ that displays other recently created bit.ly URLs.