Visually, the “Share” and “Tweet” buttons are very similar, and are structured identically.

On the code-side, however, they are very much the product of two different companies with, I would argue, different outlooks on the web as a whole and HTML specifically.

Facebook’s “Share” Button

Share

There is no such thing as a share_url attribute in any published version of HTML. Facebook just made it up because they felt like it, and it was the easiest way for them to do what they wanted. They’re also mis-using the type attribute, here. type should be a mime-type string, as specified in the HTML documentation, not whatever random data you decide will be helpful.

It would be possible to see these as harmless and (possibly) clever hacks, but this is not a startup based in a garage, this is a billion-dollar company with hundreds of employees. Philosophically it speaks to Facebook’s general lack of regard for the internet as a whole: Facebook does what it wants, and you can go fuck yourself if it bugs you. In other words: Who has two thumbs, a $100 billion valuation, and doesn’t give a shit about your web standards pedantry? This guy.

Twitter’s “Tweet” Button

Twitter uses the HTML5 data attributes, which were created for specifically this purpose, which is embedding useful information in HTML without having to make up your own attributes. As a result, Twitter’s code is not only valid and logical, it’s ahead of the curve. Philosophically this says that Twitter considered the ramifications of this a bit more than Facebook has. This code will be embedded in millions of webpages, many of which will never be updated, so it matters in a big way that it be done right. Yes, the HTML5-style data attributes are a little bit too new for some people to get behind, but today isn’t the only thing that matters. Tomorrow is pretty important, too.

In total, what these buttons say about their companies is pretty simple: Twitter cares about being a good web citizen. Facebook? Not so much.


Update 28 October 2010: Changed conclusion text for clarity.