Programming

Programming / Software / Web Design — 1 Comment
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

Programming / Web Design / Websites — 2 Comments
9
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.

Build Off / Programming / Software — No Comments
24
Sep 11

Piwik and jqPlot

This took me waaaaaay longer than I wanted it to, so I’m making a point of posting it.

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.

Business / Design / Programming / Web Design / Websites — No Comments
2
Feb 09

CSS Frameworks

I’m going to start developing sites using a CSS framework. I’ve read lots of arguments for and against and I feel like I won’t be delving into super complicated content anytime soon and therefore a prebuilt framework should speed things up a lot.

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.

Programming / Software / WiFi — No Comments
27
Jul 08

Open-Mesh Update

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!

← Older Entries