WordPress Toolbar v 2.1 – Adding support for tinyurl, sociable and a lot more


WordPress Toolbar Version 2.0 allowed bloggers to catch their viewers on the go. It modifies all the internal/external links in the blog post (except those specified for exception), to open them with an attractive toolbar. Since wordpress toolbar used javascript to enable this functionality, your SEO always remain intact.

Moving forward, I accumulated all the suggestions posted in more than a 100 comments on the introductory blog post, and tried to include as many features as possible in version 2.1. A few features worth talking about are:

New in Version 2.1:

  • Plugin Size: Inspite of adding new features in version 2.1, plugin size has decreased from 100+ Kb to 50+ Kb. This is mainly because, plugin now uses site favicons fetched using Google S2 web service. It will allows for parallelization as your blog loads.
  • Tinyurl: Version 2.1 introduces support for tinyurl. If you are wondering what does that mean, scroll down to the bottom of this blog post and you will see tinyurl corresponding to this post. Enabling this feature inside admin panel will automatically submit your post to tinyurl and display it at the end of the blog post.
  • Sociable: Version 2.1 also introduces sociable. Enabling it inside the admin panel will put the social icons at the end of every blog post. You can choose icons from the admin panel. For an example scroll down to the bottom of this post.
  • target=”_blank”, was one of the most wished feature in all the posted comments. Enabling it from admin panel, will force open the url’s in your post into a new window.
  • New Toolbar Skin: Version 2.1 adds facebook toolbar skin into its kitty. From admin panel you can choose dark shade stumble upon skin or light blue facebook skin.
  • Add More Custom Skin: Yes, you read it right. I found a lot of bloggers using this plugin, wish to have their own custom toolbar skins. However, they just don’t want to tweak the code directly. Version 2.1 allows blog publishers to add their own custom skins without having to tweak the code manually. Read through to know how to add your custom skins
  • PHP4 Support: Last but not the least, support for PHP version 4.

Installation Guide:

  1. If you are trying to upgrade from version 2.0, you can either go for manual upgrade or automatic up using wordpress admin panel.
  2. Manual Upgrade: Deactivate version 2.0, Delete wordpress-toolbar folder from plugins directory, Download version 2.1, Copy wordpress-toolbar directory to plugins folder, Activate version 2.1, Visit wordpress toolbar administration panel
  3. Automatic Upgrade: Go to wordpress admin panel, click on plugins in left navigation bar, scroll down to wordpress-toolbar and click upgrade automatically

Version Change logs:

  1. Version 2.1.x : Enhancements added to version 2.0. Specifically it includes:
    • Support for tinyurl – url shortening service
    • Support for sociable – adding social share icons at the end of every post
    • Facebook skin added
    • target=”_blank” support added
    • Plugin is now PHP4 compatible
  2. Version 2.0 : Version was upgraded since 2.0 is a complete overhaul from 1.x series. Specifically it allows you to do the following:
    • You can now use auto upgrade for future releases without caring to move the plugin files everytime
    • Admin panel allows you to fully customize your toolbar
    • You can now ever choose social icons of your choice to be displayed on the toolbar
    • Choose domains for which you don’t want to activate this plugin
    • Unlike 1.x series, 2.0 do not change the href=”” urls. Instead now it uses javascript onclick event to activate toolbar and hence taking care of your SEO needs
  3. Version 1.1 : Include emergency CSS and HTML Validation fixes for IE browsers
  4. Version 1.0 : The first release of wordpress toolbar

How to add my own custom toolbar skin:
Before you go ahead and put in your custom skin, a little about various components populating that toolbar.

  1. home.gif: The left most home icon on the toolbar
  2. background.gif: The background image of your toolbar
  3. button_left.gif: The left cap image for “comment back” button
  4. button_right.gif: The right cap image for “comment back” button
  5. close.gif: The right most close icon on the toolbar

So by now you know, to add your custom skin to the toolbar all you need is 5 images. Lets see what all I did to add facebook skin in this release.

  1. First of all you must choose a short name and full name for your skin. I chose a shortname “fb” and fullname “facebook” for the facebook custom skin
  2. Go to plugins/wordpress-toolbar/extra/skins folder and create a folder. Name it “fb” (the shortname for your skin)
  3. Inside this folder drop your 5 images. (Remember names of the images must be same as above)
  4. Along with the images you need to drop a stylesheet named style.css to customize the font family, font sizes etc appearing on the toolbar. For reference see the style.css file inside “fb” folder bundled with this plugin
  5. Finally you need to create a “readme.txt” file inside “fb” folder. Open it and type in your skin’s fullname inside this file. This file will be used more extensively in future releases.

Now go to your admin panel and if you did it right you must see an option to choose your custom skin next to “choose a skin” option. Wasn’t that easy!

Planned Future Releases:

  1. The plugin is still not compatible with the Google Analytics and Shadow Box Plugin, mainly due to similar nature in which all the plugin’s operate. Need to work on that.
  2. Waiting for more suggestions and feedbacks from the plugin users on how we can evolve this plugin to serve the open source community

Do leave a comment or any suggestion for improvement and don’t forget to give a rating at http://wordpress.org/extend/plugins/wordpress-toolbar/.

  • Pingback: Wordpress Toolbar Plugin | Abhi's Weblog()

  • chris

    Truly some great enhancements. target=”_blank” was what I needed.  Adding custom skins is a great addon too.
    Great work!

  • Pingback: Posts about SEO as of June 24, 2009 | All About WordPress()

  • http://blog.heysal.com/ ECS Dave

    Hi Abhi!
    I appear to be having some issues with what looks to be an AWESOME plugin…
    Warning: Cannot modify header information – headers already sent”
    appears when clicking on an outbound link…
    Any ideas?

  • http://www.extratuts.com ExtraTuts

    Thanks prof :)
    I will test it today ..
    thanks very much :)

  • http://www.urlgeek.co.uk B. Hanilgi

    Using this on Php 4, installation gave me no issues. However on following  links I can’t see the bar. It doesn’t show up. Any help…

  • http://www.urlgeek.co.uk B. Hanilgi

    Update: there may be issues with the facebook skin, as I have left the original setting, and now seems running perfect :)

  • http://abhinavsingh.com admin

    Thanks Hanilgi.
    @Bloggers: Kindly let me know about issues if any while deploying version 2.1

  • http://www.bollywoodreview.de Andy

    Namaste, great update!
    But not perfect ^^
    First my screen:
    -> http://www.datei123.de/screen_wp_toolbar.jpg
    The “email icon” gfx is missing…

  • Pingback: » Wordpress Toolbar v 2.1 – Adding support for tinyurl, sociable and … Wordpress Plugins: Just another WordPress weblog()

  • http://abhinavsingh.com admin

    Released a minor version 2.1.1. You can upgrade to that to fix email and printer icon not showing up on toolbar issue.

  • http://blog.heysal.com/ ECS Dave

    Would this update include a “fix” for the issue I’m having as well?
    Be Well!
    ECS Dave

  • http://www.bollywoodreview.de Andy

    Do I have to delete again all fieles?
    Thats not ok, because I have to do my changes again (translating a.o.)

  • http://abhinavsingh.com admin

    Automatic update will do the work i guess. Or alternatively you just need to replace the toolbar.php file in the plugins/wordpress-toolbar directory.

  • http://www.bollywoodreview.de Andy

    Hmm but now I have to translate again 😉
    Lucky are only some words. No the email feature is working in the toolbar, but there is still no graphic in the blog posts.

  • mr.Job

    Thank you very much, I was looking for this!

  • http://www.bollywoodreview.de Andy

    No support anymore?

  • http://abhinavsingh.com admin

    Support for what? The development on plugin will keep going, what exactly are you looking for?

  • http://www.bollywoodreview.de Andy
  • http://abhinavsingh.com admin

    alright, yes thats in the notebook. Will be out soon.

  • http://vimey.com Jordan Singer

    I love the plugin idea but I cannot seem to get the toolbar to appear on any links I open. http://vimey.com is my site. I have WordPress MU and PHP5 with Linux hosting. Also, does the plugin not work for twitter.com?

  • http://abhinavsingh.com admin

    Hi Jordan,

    Probably my bad, I have not tested wordpress toolbar on wordpress MU. Shall do that shortly and release a fix, if I am able to do so 😀

    Since  I see http://vimey.com/wp-content/plugins/wordpress-toolbar/toolbar.php this link active on your site, I assume bug is on my end only.

    Thanks for bringing this to my eye.

  • Pingback: Automate The Maintenance of your WordPress Blog – FREE!()

  • http://giftah.com/blog rez

    Hi there,
    I gave this plugin a try but it is not working. Once activated and tried clicking on any of the outbound links no toolbar appears.
    I am running the latest wordpress, 2.8.1

  • http://giftah.com/blog rez

    Started receiving the following error on the blog’s main page:
    Warning: strstr() [function.strstr]: Empty delimiter in /home/giftahco/public_html/blog/wp-content/plugins/wordpress-toolbar/wp-toolbar.php on line 435

  • http://abhinavsingh.com admin

    Hi rez,

    This happened because you might have removed all the domains from “exclude domains” list. If this is the case, can you go in the admin panel and put atleast one domain in the exclude domain list. I guess it should work, and if it does you helped me catching a bug. Will fix this thereafter. Kindly confirm.

  • http://giftah.com/blog rez

    Thanks for the quick reply!
    I added a a url right after i posted the last comment and the error did disappear but the toolbar is still not showing up on outbound links.
    What do you think may be causing it not to show up?

  • http://abhinavsingh.com admin

    do you have any plugin enabled which also modifies the anchor tags and add an onclick event to them? google analytic plugin is one such known plugin to me.

  • http://giftah.com/blog rez

    That did it! I did have analytics installed and upon de-activating that it now *somewhat* works. When I click any outbound links I can see the plugin url appended to the link but receive the following message:
    Ooops…This IP’s access has been restricted for this domain.

  • http://abhinavsingh.com admin

    can u activate the plugin and click on one of the outbound link. Finally send me the url of the new toolbar enabled outbound link so that i can investigate more…..

  • http://giftah.com/blog rez
  • http://giftah.com/blog rez

    The problem seems to be with our server setup (we are using Lightspeed and nto Apache). If the tourl paramater does not contain “http://” but just the domain the toolbar shows up and no error is shown but of course the link then does not work.
    I am just going to disable it for now, maybe when you get a chance to release any updates you can take a look at issues with lightspeed.
    Thanks for the help!

  • http://designbrushes.net/ Simon

    Any ideas about how to implement on the site in my sig, It won’t work, I am not using shadow box, and I tired turning off GA, but it still doesn’t work. I have a few other js effects running on the site. Any help would be much appriciated. Cheers

  • http://abhinavsingh.com admin

    Hi Simon,

    Just tried checking the following url for your website:


    I see a toolbar appearing. Hence plugin is not a problem.

    Can you enable the plugin for a few minute and send me the <a href=”(.*)” onclick=”(.*)”>(.*)</a> HTML code for any link on your blogpost. You can use firebug to get this information from your blogpost page. I might be able to help you more after that.

  • http://jorgelinares.com Jorge Linares
  • http://www.nrgdownloads.com/webmasters-corner/ refulez

    hi nice plugin but it doesnt seem to work on my blog …just installed it and when i clik a outbound link the toolbar doesnt apear…. why?

  • http://www.balkhis.com Syed Balkhi

    For some reason, the title only shows in Windows machines but not in Mac. Just tried on my PC laptop … Firefox works ….
    IE works but title is misaligned .. then opened it in my Mac and it doesn’t show neither in FF or in Safari… the bar shows just the post title doesn’t …

  • http://abhinavsingh.com admin

    Hi Syed,

    Good news is that I got a MacPro 2 days back itself 😀 The problem shd be fixable. Will check and let you know.

  • http://www.balkhis.com Syed Balkhi

    Thanks also I was wondering if you can custom code it for me. I don’t know how hard it will be, but I like the features of WP-Bar plugin. But that plugin has severe compatibility issues.
    You see what I mean. I actually want to have my logo on the left. Title of the site that we are on. Not the title of my post.
    Link of the original source.
    Potentially making the url smaller because the url generated with your site is way too long. Let me know if that is possible.

  • http://witmax.cn Maple Nan

    WordPress Toolbar will replace <a name=”#index”>Index</a> and <a href=”#index”>Back</a>, which is not correct. Would you please fix it.  Thanks!  One more problem is that & in the long urls should be replaced with &amp; in order to pass w3c XHTML validation.

  • http://abhinavsingh.com Abhinav Singh

    @Maple Nan I am really sorry for delay in releasing a new updated version of the plugin. Its been planned for so long and so many thing to add and fix.

    I will try to comeout with a new version this weekend, Checkout 😀

  • http://www.blogul.net Marius Patrascu

    Plugin wi’ll be really cool if path to plugin we’ll be hidden, “shorted” like from
    OR at least

    Any chance to expect this?

  • http://abhinavsingh.com Abhinav Singh

    Why not, if you notice the 1st version of this plugin, it provided you a short url like mysite.com/toolbar.php

    However with this approach problem happens when u try to auto upgrade the plugin. Anyways this is still achievable by providing options in the admin panel. Surely will include in upcoming releases.

    Thanks for the suggestion 😀

  • http://www.blogul.net Marius Patrascu

    Cool! Subscribed! We’ll keep an eye for future development! Good luck!

  • http://www.paulpetch.com paul

    i installed plugin and i have the same issues as above. it does not appear :) I’ll keep an eye out for updates and once it works- i’ll give it another go. Great idea.

    • http://abhinavsingh.com Abhinav Singh

      Hey Paul, welcome.

      Can you tell me the your wp version and also are you running liteSpeed as ur hosting server?

  • http://abhinavsingh.com Abhinav Singh


    Anyone ready to contribute and help in plugin translation. Any language which you think this plugin should have support for will do.

    I am planning a new release in coming weekend and hopefully you will see all the fixes requested above and through emails.

    If we can have a few translations by then, we can wrap them up for the coming release. Your name and link to ur blog/twitter goes with the plugin release. Will be displayed on the admin panel.

  • Max

    Hi great plugin, but im having 404 errors, i know thats mod_rewrite, but i dont know how solve it… can you help?

    • http://abhinavsingh.com Abhinav Singh

      404 error on what page? The toolbar page? Can you provide a lil more details? e.g. sample url and error log informations?

  • http://inetblogger.de Nicooo

    It is still possible to track your outgoing traffic with Google.

    You must deaktive the “Track outbound clicks & downloads:” from “Google Analytics for WordPress” or “Outbound link tracking:” from “Google Analyticator” !!

    Then you go to “Analytics Settings” and to your “Profile Settings: http://www...” and Edit it.

    Query Parameter to “wp-toolbar-tourl” and Save

    Now Google track your Outgoing traffic in the “Site Search” Cat.

    For me a good substitute

    Thanks to the programmer :)

  • http://inetblogger.de Nicooo

    I´d like to translate your toolbar to german, if it is not already there. Message Me!! :)

    • http://abhinavsingh.com Abhinav Singh

      Hi Nicooo,

      Thanks. I will contact you shortly via email. German translation is still not done.

    • http://witmax.cn Maple Nan

      Is chinese simplified translation available? if not, I would like to have a try.

    • http://abhinavsingh.com Abhinav Singh

      Hi Nan,

      No chinese translation is not available yet. It would be great if you can take care of chinese translation.

  • http://witmax.cn 晴枫

    I’ve finished the chinese simplified translation. Anyone can get it from http://witmax.cn/wordpress-toolbar-cn.html.

  • http://inetblogger.de Nicooo

    …and i have finished the german version too…

    WordPress Toolbar v 2.1 – Mit tinyurl, Sociable Tool und mehr – Deutsch


  • http://abhinavsingh.com Abhinav Singh

    Thanks guys. I am working on other bugs like cross plugin compatibility. Shall release a combined version soon. Will mail you guys shortly. Thanks again.

  • http://witmax.cn Maple Nan
    • http://abhinavsingh.com Abhinav Singh

      Thanks, added in to-do list and i m working on the list 😀

  • Pingback: Wordpress Toolbar v 2.1 – Mit tinyurl, Sociable Tool und mehr – Deutsch | INetBlogger.de()

  • http://abhinavsingh.com Abhinav Singh

    Hello Friends,

    Kindly upgrade to latest bug fixed version 2.2.3. For new feature details read http://bit.ly/98IoX4

    – Abhi

  • Pingback: 枫芸志 » WordPress Toolbar插件v2.2.3汉化版()

  • John

    Please help me for install WordPress Toolbar v 2.1