Thursday, December 1, 2011

Social buttons

Today, I finally got around to implementing those social Like buttons that you see on all of the websites. Personally, I never click them, but it is clear lots of other people do so I'm going with the bandwagon.

They look something like this:

The top ones are Facebook, then Twitter, then Google+.

Styling the first two rows of buttons with CSS is simple. They have class="fb-like" and class="twitter-share-button". I can move them around on my page and place them exactly where I want them quite easily.

What does Google have you ask? Nothing. Zip. Zilch. Instead, it has id="___plusone_0" which means that it is somewhat useless as a general CSS selector.

I know this is nit picky on such a small issue, but an oversight like this seems hard to fathom. I've google'd around a bit and it really makes me wonder, how come no other site designers have brought this up?

I was hoping that a work around for this would be to just write it as a div instead of as the <g:plusone> element. But it turns out that div loses the class attribute when it is re-written by their JavaScript.

<div class="g-plusone" data-size="tall" ... ></div>

In the end, I just put my own div around the element, but that seems like such a kludge when the other services seem to do this correctly.

Maybe I'm reading too far into this because it is such a little thing, but it really makes me feel like Google doesn't understand the needs of site developers like the other Social players do.


Stefano Mazzocchi said...

What's wrong with ID selectors?

Jon Scott Stevens said...

Generally, nothing. However, in this case...that id selector in this case is obviously generated and of the form __name_num which the prefix __ is generally considered a 'private' field (ie: it could change at any time) and the num part increments. So, say I have multiple buttons on a page and want all of them on the right side of the page, I'd have to add a specific selector for each of them. Adding a simple class="" with a good name would solve this problem instantly. FB and Twitter have it right.

Stefano said...

Gotcha. Yeah, I agree that it sucks.