August 13, 2014 | Sarah Danks


We all know social media’s “where it’s at” today. Straight from the horse’s mouth: even if you don’t think it’s an important part of online marketing, content marketing, or whatever-type-of-marketing you do, it is.

(So best get on the bandwagon and start having a social media presence. Because, like it or not, it’s here to stay.)

But, there’s a fine line between suggesting people share your online content and, well, blatantly screaming at them SHARE THIS LIKE THIS TWEET THIS DO IT DO IT NOW!

Case in point: I was interested in reading a blog post that would tell me how to pump out half a year’s worth of blog ideas in less than half an hour. Sweet! I clicked on the link from my Twitter feed and started reading…

…only to realize I wasn’t going to be able to read this article very easily, since there was this, THING, in the way of the text (not to mention a glaring grammatical error):

annoying social media share bar

What the heck?

Sure, it’s a scrolling social media share bar. No biggie. Except it’s floating directly over the left-hand side of the article, blocking text as it goes. See?

annoying share thingy on blog post

Define “annoying.”

Oh, and detrimental to the blog, as far as I’m concerned, since I didn’t bother to attempt reading the article — sorry, I shouldn’t have to hunt around for the ideal location of where the share bar is in relation to the text I’m trying to read.

Nope. I’m too lazy for all that.

But wait. Back up the horse — you’re rolling your eyes right now, aren’t you? You’re thinking, “you dumb blonde, all you hafta do is increase the size of your browser and the share button will move farther to the left. duh.

*Sigh* FINE. I’ll widen my browser — which, by the way, is taking up half of my 27″ iMac — just to humor you.

maximized screen got rid of annoying share button problem

Okay, okay, fine, you win.

Or, do you? Sure, I’m working on a computer with a hefty screen. I should have my browser at full scale all the time, right? Wrong. I’m busy. I’m doing this and that and the other thing. I’ve got two separate browsers open, each taking up half the 27″ screen (Chrome on the left, Firefox — don’t judge me — on the right).

But, just because I HAVE all this screen real estate, does it matter?

More importantly: why’s this STILL an issue? As in, why aren’t people testing their sites — and all features within it — on different “sizes” of browsers? Oh, and let’s not forget to mention other devices…for instance, check out this same blog post on my iPhone:

2014-08-07 09.22.01

SERIOUSLY? This is a horrible user experience. The odds of me attempting to read this article — much less share it on any of the social venues listed on this annoying share bar — are slim to zero. Regardless of device.

Again, I ask you: why, in the year 2014, are we still running across websites/blogs that don’t offer visitors of all devices a good user experience? Not only should everyone be creating websites with responsive web design; they also need to be testing them across all sizes/types of browsers and devices to ensure optimum usability.

The question they should be asking themselves is simple: “Does everything on the site work all the time?

Sure, on my iMac I can just increase the size of my browser for optimum readability (again, keep in mind my browser takes up HALF of my 27″ screen)…but what about my co-worker who works on a laptop? Well, here’s HER view — as expanded as she can get on her small 15″ screen:

Screenshot (14)


She said she sees this type of thing all the time (i.e., annoyingly floating social share bars), and rather than try to work around the blocked text, she simply hits the “back” button. It’s just not worth her time to hunt around for the ideal scroll placement so she can see the content.

I’m not trying to kick this one blog — I have nothing against them (minus the annoying nature of their floating social share button). Instead, it’s my hope that blogs/websites realize their layouts have to look good — and offer up a good user experience — no matter the size of the browser or which device is being used to access the content.

And you can definitely include social share buttons on your site — that’s not my issue. The problem is when said share buttons aren’t taken into account when the design changes to accommodate different resolution/screen/device sizes.

News flash: just because the share buttons are way off to the side of the blog when your designer has the browser open across his/her massive screen doesn’t mean they’re going to stay there for someone viewing the same article on their laptop. Or their smartphone.


Social Media Share Buttons: You’re Doing It Wrong

Do Not Pass Go, Do Not Collect $200

Let’s take a look at some other websites that don’t quite get it (yet).

Example #1

Not too big of a deal, but I noticed on the ShareThis support sub-domain they have a floating social share bar:

sharethis floating social share button

No biggie (again, this browser is taking up half of my 27″ screen). Share This (please). And then I minimized my screen…

sharethis floating social share button 2

Cue Cleveland falling.


Example #2

Here on the Danny Brown blog, he starts off with very unobtrusive social share buttons:

dannybrown blog social share buttons

 

But, we start to have issues once the screen is minimized down to what it’d look like on a laptop:

dannybrown blog annoying social share buttons

Bummer.


Example #3

This is a blog I really respect…

wordstream blog social share button

…but their design doesn’t “readjust” when the browser/screen size is diminished; it merely shrinks overall (read: not responsive).

While the floating social share button doesn’t cover up the copy, the entire page becomes very hard to read on a mobile device — especially a smartphone:

wordstream blog on iphone

Okay, okay, so that’s not what we’re discussing here. Oh, but when I enlarge the post to be able to read the itty-bitty print, that pesky social share bar (using fixed or absolute positioning) is now completely in my way.

GAH! Another one.

2014-08-13 09.58.52

Obviously the Wordstream website is built to cater only to desktop devices. I’d like it if they’d consider responsive design.


Example #4

Here’s an interesting article on findandconvert.com about improving website performance:

findandconvert floating social media share button

Looks good — I especially like the pops of color (that’s right, I said “pops”). But, then I minimized my browser size…

findandconvert annoying floating social media share button

…and found myself here yet again. I love how that oh-so-annoying social floater covers up the headline talking about a good user experience.

Yeah, yeah, it worked “just fine” on half my screen, but then I went ahead and CHEATED by shrinking my browser to FORCE this issue! How dare I.

And yet — and yet the experience on a mobile device suffers just as much:

2014-08-12 16.07.48

Think that’s the last thing you’d expect to see on a blog post talking about user experience?


Example #5

Try THIS on for size: here’s a Shareaholic blog post specifically about — wonder of wonders — how to customize floating share button positions!

shareaholic floating share button

Stellar.

Of course, on a blog post that’s telling us how to work with social share buttons, I’d expect no less than that they’re perfectly placed. But, I still had to minimize my screen just to be sure.

And then, and THEN things got ironic:

2014-08-08 11.38.34

Yikes. Notice how this screenshot is from the iPad — on my desktop I saw how that pesky social share bar covered up the left-hand side of the content when I scaled back my browser, but I wanted to view this particular content on a smaller device just to be sure.

So yeah. I love Shareaholic but I’m somewhat disinclined to heed their advice on how to correctly position floated share buttons after seeing this.

And, I mean. C’mon. How can I NOT razz them for this?!


Social Media Share Button Wins

Bank Error in Your Favor, Collect $200

Now, what about some of the floating social media share button users who’re doing it correctly?

Winner #1

Here’s an article from the ConversionXL blog. Notice the floating share button off to the left (this browser view is, per usual, half of my 27″ screen)?:

conversionxl social share button

Nice! It’s off to the side, doesn’t cover any content, and isn’t obnoxious. But, what happens when I minimize my screen? <nervously biting fingernails>

conversionxl social share button switch

BAZINGA! Lookit that magic. </nervously biting fingernails>

What a concept — knowing that as their visitors’ browsers/devices get smaller the left-hand floating social share bar would become an issue, the folks over at ConversionXL said, “let’s make sure this experience stays positive for everyone, regardless of device” and moved the entire bar to the top of the article.

I love it.

You get a gold star for the day, ConversionXL!


Winner #2

Here’s another blog — this one’s Woorank — that does it right (original was a left-hand floating button; when minimized it changes entirely).

Camera 1:

woorank social share button

And Camera 2:

woorank social share button change

Well done! Thanks for not annoying me.

Let’s take a look at another, shall we?


Winner #3

Recently Search Engine Land got a makeover — they went responsive!!! — and apparently added social share options:

search engine land floating share button

And in the process they made sure their social media bar wasn’t obtrusive:

search engine land floating social share button 2

This is just all kinds of awesome sauce.


Winner #4

Here’s Crazy Egg’s blog:

crazyegg blog social share buttons

They take a different approach for smaller devices/minimized browsers — they eliminate the social share bar altogether:

crazyegg blog social share buttons disappear

While not maybe ideal for the sharing aspect, I’d rather a site eliminate the social share options than risk having the buttons cover up content I’m trying to read.


Winner #5

And, in honor of Left Handers’ Day — and to demonstrate it’s not just marketing websites that can get it right — the pièce de résistance…
Camera 1:

lefhandersday floating social share bar

Camera 2:

lefthandersday social share bar change

BOOM. Now that’s how you handle social media share buttons (and yes, it works on mobile devices, too. Damn, those lefties are in their right minds!)


So, yes, social media is important — and getting people to share your content upon those venues is hard. I get it.

It seems there are lots of social share button plug-ins for all the various platforms out there. Or you could have your developer work their own code, I’m sure.

Either way, if you’re adding floating/scrolling share buttons, please, PLEASE ensure they’re not creating awful user experiences for your multi-device users. And/or those of us who have big-a$$ screens but prefer to have lots of stuff open at once…

…and for those of you mentioned here: you don’t learn anything the SECOND time the horse kicks you in the rear!

 


Categories


Archives


Subscribe To Our Newsletter

Our newsletter includes industry news, tips, and upcoming events!