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/.

Toggle : A Javascript game, anyone up for the challenge?

This weekend I came across a game made using java applets. Initially looked like its possible to solve it, but slowly we realized that there might be no solution to this game. Finally I decided to clone it using javascript and see if you can solve the same.


PS: Tested on all browsers except IE

I included a custom mode in this game. Original game had only the classic mode.

  • Classic Mode: When you click a square in classic mode, that clicked square and all neighbourhood squares toggle their colors (excluding diagonal neighbours).
  • Custom Mode: In custom mode, when you click a square, the clicked square and all neighbourhood squares toggle their colors (including diagonal neighbours).


  • Destination is to fill all the squares with black color.
  • Ideally game should be played in a single mode only. However I have provided an option where you can switch modes in between the game. So you are free to either play it in a single mode throughout, or switch modes as and when you feel is the requirement
  • If you are finally able to make it, click view history, copy the steps you followed to conquer this game and post it as a comment to this blog post

Source Code:
The source code consists of toggle.js and toggle.css. Find below the source code, and towards the end, find how to embed the same on your page/blog.



  Script: toggle.css
  Author: Abhinav Singh mailsforabhinav[at]gmail[dot]com
  Website: http://abhinavsingh.com
  Code license: GNU General Public License v3

.box {
  border:1px solid #000000;
.boxColored {
  border:1px solid #FFFFFF;
  background: #000000;



  Script: toggle.js
  Author: Abhinav Singh mailsforabhinav[at]gmail[dot]com
  Website: http://abhinavsingh.com
  Code license: GNU General Public License v3

Array.prototype.unique = function(b) {
  var a = [], i, l = this.length;
  for(i=0; i<l; i++) {
    if(a.indexOf(this[i], 0, b) < 0) { a.push(this[i]); }
  return a;
var $ = {
  html: '',
  cid: 'container',
  xBoxes: 5,
  yBoxes: 5,
  boxWidth: 50,
  boxHeight: 50,
  version: 'classic',
  history: Array(),
  init: function() {
    var tmp = '';
    for(var i=0;i<this.yBoxes;i++) {
      for(var j=0;j<this.xBoxes;j++) {
        tmp += '<div onclick="$.toggle(this)" name="box" id="box-'+i+'-'+j+'" style="position:absolute; left:'+(j*this.boxWidth)+'px; top:'+(i*this.boxHeight)+'px; height:'+this.boxHeight+'px; width:'+this.boxWidth+'px" class="box">';
        tmp += '</div>';
    tmp += '<div style="position:absolute; top:'+((this.yBoxes*this.boxHeight)+5)+'px; left:0px;">';
    tmp += '  <b style="float:left">Version:</b> ';
    tmp += '  <select style="float:left" id="version" onchange="$.version = this.options[this.selectedIndex].value;">';
    tmp += '    <option value="classic">Classic</option>';
    tmp += '    <option value="custom">Custom</option>';
    tmp += '  </select>';
    tmp += '  <div style="float:left; padding-left:20px; text-decoration:underline; cursor:pointer;" onclick="alert($.history.unique())">View History</div>';
    tmp += '</div>';
    document.getElementById(this.cid).innerHTML = tmp;
  toggle: function(t) {
    id = t.id; ids = id.split("-");
    xid = parseInt(ids[1]); yid = parseInt(ids[2]);

    for(var l=xid-1; l<=xid+1; l++) {
      for(var m=yid-1; m<=yid+1; m++) {
        if(l>=0 && l<this.xBoxes && m>=0 && m<this.yBoxes) {
          if(this.version == "classic") {
            if((l == xid-1 && m == yid-1) || (l == xid+1 && m == yid-1) || (l == xid-1 && m == yid+1) || (l == xid+1 && m == yid+1)) {

            else {
              var boxid = document.getElementById('box-'+l+'-'+m);
              if(boxid.className == "box") boxid.className = "boxColored";
              else if(boxid.className == "boxColored") boxid.className = "box";
          if(this.version == "custom") {
            var boxid = document.getElementById('box-'+l+'-'+m);
            if(boxid.className == "box") boxid.className = "boxColored";
            else if(boxid.className == "boxColored") boxid.className = "box";

How to embed toggle on my page/blog?

  • Simply copy the js and css files from above or download them from here: toggle.js, toggle.css
  • Include the two on your page/blog. toggle.js automatically calls up $.init() on load. $.init() method will look for a div with id $.cid on you page, and populate the game in the same div. Hence make sure you have a div with id $.cid on the page.
  • $.xBoxes, $.yBoxes, $.boxWidth, $.boxHeight are a few tunable parameters you may want to play with

Happy Toggling!

SEO Analyzer v 1.2 – Adding support for Bing along with Google and Yahoo

On May 28, 2009 Microsoft announced Bing which has now replaced Live search. And within 2 week of it’s release, Bing seems to have leapfrog Yahoo search in U.S.

With Bing coming up as a strong contender to Google and Yahoo search engines, I have added support for Bing in SEO Analyzer v 1.2. This will enable you to analyze a site’s ranking for a particular keyword on Bing search engine, along with Yahoo and Google search engines.


SEO Analyzer Future Roadmap:

  • Saving reports on spreadsheets
  • Comparing two sites for a list of keywords
  • Keyword density extraction tool

Happy SEO Analysis!