28
Mar 12

Perfect Social Sharing Buttons

Alrighty, last week I was complaining about how social sharing buttons are broken.

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.

Image of great social sharing buttons from The Next Web

Share button perfection

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

Kudos, TNW, way to be progressive.

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

23
Mar 12

Social Sharing Buttons are Busted

Any self respecting web developer out there probably has the same problem I do, share buttons don’t play well together.

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:

1
2
3
4
5
6
7
8
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_GB/all.js #xfbml=1&appId=210899475625228";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

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

1
2
3
<a class="twitter-share-button" data-url="http://mybackupbox.com" data-via="BackupBox" data-text="Scheduled transfers between FTP and Dropbox, and lots more!" data-count="vertical">Tweet</a>

<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id; js.src="//platform.twitter.com/widgets.js"; fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

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:

1
2
3
4
5
6
7
8
9
10
<div class="g-plusone" data-size="tall" data-href="//mybackupbox.com"></div>

<script type="text/javascript">
 window.___gcfg = {lang: 'en-GB'};
(function() {
 var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
 po.src = 'https://apis.google.com/js/plusone.js';
 var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
 })();
 </script>

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!:

1
2
3
<script src="//platform.linkedin.com/in.js" type="text/javascript"></script>

 <script type="IN/Share" data-url="http://mybackupbox.com" data-counter="top"></script>

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:

1
2
3
<div style="display:inline; margin-left:5px"><a href="http://bufferapp.com/add" data-text="Scheduled transfers between FTP and Dropbox, and lots more! via @BackupBox" data-url="http://mybackupbox.com" data-count="vertical">Buffer</a>

<script type="text/javascript" src="http://static.bufferapp.com/js/button.js"></script></div>

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


12
Mar 12

Why We Made Backup Box

Five months ago things we very interesting. I was waist deep in the Start-Up Chile accelerator program, living in Viña del Mar, and working on our startup product, Surreal WiFi. I was also just finishing reading Lean Startup and one of my roommates at the time was an excellent sounding board for all my crazy ideas.

Now, for a long time I’d had a problem: I still use FTP. Don’t get me wrong, I understand what version control is, but I’m just too lazy to use it for small projects, which is what most of my web design clients end up being. I currently host around 80 odd domain names on a Media Temple shared hosting plan, all of which I access using FTP. None of this is backed up, ever. Big problem.

Backup Box v1

For whatever reason I decided that it was time to back things up. A bit of research determined that I either had to set up custom server-side scripts to automate an rsync job, or download some software that I run on my computer to backup my domains on a schedule. I tried the software, it was clunky and complex and I ditched it quickly.

I’m an avid user and fan of Dropbox. I knew there were lots of third-party apps out there and I was hoping there might be something to help me out. Searching through the forums I discovered that there was a lot of conversation happening around the whole FTP to Dropbox problem. Lots of conversation, yes. Solutions, no. Word on the street was that Dropbox would never support FTP connections and yet nobody was addressing the problem!

Needless to say, this was a lean startup dream! I had a problem, which many other people do too. My very first assumption was satisfied, that I’m not alone in needing this service. But I still needed more validation before I start coding.

Backup Box V2

So I threw up a landing page. I wrote a cute description of the problem, slapped down four payment options, and recorded what you clicked, and then asked for your email address to be notified when we launch.

I posted a few times in the Dropbox forums letting people know I was going to help solve their problems, and I weaseled an AdWords credit out of Google. Forums worked, AdWords were useless.

From October 16th to March 8th we had over 570 unique people sign up to use the site. I was ready to build it at 50 signups, but real-life and our other startup got in the way. Plus I was still in Chile and we were travelling around!

Backup Box Launch

The very night that I returned to Canada I went to the second hackathon put on by Startup Edmonton. Mark, my partner, and I had decided that this hackathon would be a good place to start our Backup Box development. We built the prototype in roughly 15 hours. Over the next four weeks we revamped the prototype and prepared it for users and accounts and automation, etc. That’s what we launched with.

So here we are. We launched with a few posts in the Dropbox forums and emails to the early signups. Albeit we didn’t have our screencast up at the time, but it’s up now. We’re tracking conversions on almost everything our users click. Looking forward to what the future holds with Backup Box!


09
Nov 11

jQuery .keyup() vs .change() vs .bind()

I’ve found that using .keyup() in jQuery doesn’t always work like I want. For example, if I want to ensure that a user can’t put a special character into an input field I want to check for that character every time the input changes. Only using .keyup() allows someone to right-click and paste a bad value in.

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.


26
Oct 11

Google Apps for Startups

I’ve toyed with the idea of this post for a long time. Recent interactions and my time spent with Start-Up Chile have really shown me that it needs to be written. I get too many business cards with @gmail.com email addresses. Give me a break. It costs $10 to register a domain name and Google Apps is free.

If you own a small business, or a startup, then you absolutely need to use Google Apps. Hands down, Google Apps is the best tool to manage your business. There’s a reason over 4 million businesses have switched.

Your role as a startup owner is to run your damn business, not fiddle around with mail servers and worry about document backup. That’s where Google Apps comes in.

Continue reading →