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.

3 comments:

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.