Update: they still are, however, I just stumbled upon The Next Web’s share button. Look how amazing it is! It counts the number of shares they have around the web. Pure awesomeness.

Share button perfection

The only thing missing is the one-click share but that’s hardly a detraction.

Kudos, TNW, way to be progressive.

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.

First off, this thing was cheap. We shopped around and found a cutter from US Cutters on eBay (don’t buy from their website). After negotiating my own shipping the end price door to door was around $505. Not too shabby for a 36″ vinyl cutting monster.

The cutter itself is about 50″ long and it comes with a stand. Along with the tiny little cutting blades there is a pen plotting attachment that you can use to draw with.

We’ve cut a few things already, mostly stuff for Rob’s farm as you will see in the pictures.

Applying vinyl is pretty straight forward as long as you think things through in advance. It’s really sticky and once it’s on whatever surface you are using it’s not really coming off without being destroyed.

Anyway, with the amount we spent it’ll save us a fortune in sign making costs. Since cutting a few yards of vinyl ourselves will cost about $4/yard and having a shop do it would cost 10 times that.

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.

I made the “executive” decision to start calling each device a Community Router. Alternatively you could say Community HotSpot or Community Node, just throw Community in there because that’s what it’s all about

Whether you want to help out at home or work you can order a community router on our website for $60. We’ll send you a box in the mail with instructions and everything you need to get started.

Tell your friends and let’s get Edmonton connected!

I certainly hope it’s a stop-gap before a better logo because this one looks like someone spent five minutes learning Photoshop while making it.

To Mike and anyone involved with Open-Mesh, I suggest you check out Worth1000. It’s an awesome site where you can get a really quality logo for only a couple hundred dollars.

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>”

?>

Because it’s doing well I decided to order 20 of the Open-Mesh routers. At that number I get them for $39.99 each. The plan is to cover my street in wireless and then go and sell ads to the businesses that operate in the area.

The reason I’m switching to Open-Mesh from Meraki is pretty clear cut. First the price of a Meraki router is like three times more than an Open-Mesh one. The gain isn’t that much smaller and I can easily stick a bigger antenna on them.

Open-Mesh also comes pre-flashed with RO.B.IN which is an open source mesh network. Meraki has proprietary, locked down, restricted software that doesn’t let me properly implement a good splash page, which is essentially my goal.

At a municipal WiFi focus group a month ago I learned about the proposal of having an Edmonton WiFi portal of sorts that shows you information about the area you are in. I think some sort of Wiki would be perfect for this and I’m going to look into it for my project.

My friend, Mack, suggested that I demo the mesh network stuff at the next DemoCampEdmonton. While it would be interesting to show, it’s not my technology, I’m just doing an implementation.

The last two months have been pretty frustrating as DreamHost was constantly having problems and my blog was extremely slow. Even just navigating their control panel was a boring nightmare. And WordPress! It’s slow enough as it is but when I have to wait a full minute to post something it’s not bearable.

So I switched to GoDaddy. My friend Rob and I pitched in for a Virtual Dedicated Server together and it’s only costing about $35/month total. So far it’s going well and I have a lot more options for customization with their full cPanel install that DreamHost’s dumbed down manager.

I am still well within the 90 day refund policy that DreamHost has so I emailed them today asking for a refund. Hopefully they don’t make up an excuse and just give it to me.