Here is an example screenshot from Backup Box

It seems kind of ok at first, except that none of the bubbles are the same size. Google is the worst for this, at least the vertical height of the Facebook, Twitter, LinkedIn, and Buffer widgets are equal.

Ignoring bubble size, lets look at how I implemented this.

First up, Facebook:

<div class=”fb-like” data-href=”http://www.mybackupbox.com” data-send=”false” data-layout=”box_count” data-font=”verdana” style=”top:-3px;right:-1px”></div>

I need to add a div for them, for whatever reason, then paste in a bunch of wonky JS to get the right tags and link to their script. The final part is the actual like div, which I expect. They make use of the HTML5 compliant data attributes, which is awesome. You’ll notice that I had to modify the styles to actually line it up with the other widgets. One should not have to do that. You’ll also notice that their JS source is a nice // instead of http or https, this gets around browser rules about insecure content. More about this later.

Next we have Twitter, they’re my second favourite:

Twitter uses an a tag instead of an, no big deal. They also make use of data attributes, so thumbs up. I add a line of javascript but I still have to actually write some JS instead of just linking… *sigh*

Now Google:

What the heck? 10,000 engineers can’t come up with something a bit simpler than this? I’ll give them credit for using a sprite (since if you manually change the height of their iframe in the console you can see all the images), but not much else. Data attributes are good. Tons of stupid javascript is not.

LinkedIn, the best share button implementation on the internet!:

Damn, that was simple! Two lines! There is ONE problem with LinkedIn’s implementation that I’ll mention further down.

Last but not least is Buffer. These guys are new to the scene, doing an awesome job, so I try to support them:

Ok, Buffer does a great job too, following in the footsteps of Twitter and LinkedIn, no doubt. Their only mark against them is they don’t support HTTPs. I actually had removed them from our homepage at the time of writing because of this.

The BIGGEST problem that ALL of these buttons have is that they don’t support a data-href without a protocol prefix, ie. //. Every one, excluding Google+ requires me to specific http:// or https://. This is a serious problem if you have an SSL certificate. For example, Facebook discriminates likes between https and whether you include the www prefer in your domain. There’s a potential four different like counts the we can have. I can either change the code to https://mybackupbox.com and lose our likes or leave it as http://www.mybackupbox.com and retain them. I shouldn’t have to make this decision For new companies like Buffer, having their javascript link not support SSL means that I have to remove them or have the “mark of the beast” beside my URL.

"Mark of the beast 2.0"

A few things to mention. A good share button will have:

• One <div> tag where the button will go
• One <script> link to an external file
• All settings are defined using HTML5 data attributes
• Support for non-prefixed links to their scripts, eg. //twitter.com/plugin.js
• Support for non-prefixed data-href links for their buttons so developers are forced to choose.

This post barely scratches the surface when it comes to share buttons. We’re only using the bubble count style and each widget has multiple form factors. Hopefully these companies can get it together and standardize on things. Maybe that’ll be my next project? Who knows.

If you liked this post you should follow me on Twitter: @EricWarnke

You should also check out our latest project, http://mybackupbox.com

Instead I use .bind(“change keyup input”) to catch all changes on an input field, regardless of how they are done.

For example:

// detect the change
$('input#myId').bind("change keyup input",function() {
    // if there's a bad value
    if (this.value.match(/[^a-zA-Z0-9\-_\s]/g)) {
        // replace it with nothing
        this.value = this.value.replace(/[^a-zA-Z0-9\-_\s]/g, '');
    }
});

Pretty simple, eh?

If you liked this you should follow me on Twitter where I tweet about startups, code, and other useful things.

In order to take an API call to Piwik and use the returned JSON to generate a custom graph with jqPlot, do this:

    $.getJSON(url, function(data) {
        var i = 0;
        var line1 = new Array();
        $.each(dates, function(x, y) {
            line1[i] = [x,y];
            i++;
        });

        $.jqplot("chartdiv", [line1],
        {
        // the rest of your jqPlot options
        });
    });

The part that took me a while to wrap my head around was that jqPlot requires an array of arrays for the data points. Hopefully this is helpful to whomever finds it.

That’s really the goal that myself and Rob and going for, speed. We’re aiming to create inexpensive, customized, and well designed websites for small businesses and organizations. In order to keep prices down and profits up that means we need to be fast. I think that using a CSS framework will help me out.

I watched Yahoo’s YUI introduction video by Nate Koechley and it taught me a lot. Yes I have to submit to their div names and whatnot but I think it’ll speed things up.

Open-Mesh.com is slowly but surely improving. Just recently I noticed their homepage changed slogans. It went from something like “WiFi for the developing world” to “WiFi Where You Need It”. I like the latter, myself.

New firmware updates have also happened and beta 1.21 has been released. There was a glitch upgrading to the c953 firmware because of the technique used to upgrade. This required a lot of people to manually reset their routers if they were using the test firmware. They fixed the problem by using the “normal” way to upgrade and version c955 went off without a hitch.

According to Antonio Anselmi, author of the ROBIN mesh network software which powers Open-Mesh, says that the latest kernel is about a week away. Yay!

There are limitations, for example if you put a PDF with ‘.thumb’ in the directory it will try to link it as an image. This is ok for me because I’m controlling what goes in the directories. I suppose I could add a check for it later if I need to.

<?php

/* This little snippet takes the directory and looks for any files with ‘.thumb’. Then it takes out the ‘.thumb’ to link to the big image. Then it makes a nice little list. */

$dir = ‘gallery/gallery2/’; /* Point to the right gallery directory */

echo “<ul>”;

if ($handle = opendir($dir)) {

while (false !== ($file = readdir($handle))) { /* Loop over directory */

if (strpos($file, ‘.thumb’)) { /* Look for the .thumb */

$filebig = str_replace(‘.thumb’,”,$file); /* Remove .thumb for our big files */

echo “<li><a href=\”$dir$filebig\” rel=\”lightbox[1]\”><img src=\”$dir$file\” border=\”0\”/></a></li>\n”; /* Make the list with both file names */

}

}

closedir($handle); /* Finish */

}

echo “</ul>”

?>