I've add in some social buttons to one of our pages. I don't want to have to put them in a horizontal row because that'll push more products down below the fold.

This is my idea so far:

Close up:
enter image description here

I pushed the table above the products to the right a little and squeezed them in.
But surely this is a bad idea right? Is there any better ways to implement this?


  • I know the site design is horrible. Ignore that.
  • Why can't I just put them on the right-hand side? That's not finished. Our own Facebook likebox, twitter feed and more will be on the right. Whereas the buttons on the left are to share the current page/group of products. It's a business site but think of the social buttons on the left as liking the current blog post and the stuff on the right is related to the blog as a whole. The social buttons are not over on the right-hand side or even on the right-hand side of the table (above the products) just to save confusion.
  • As a fellow designer, let me say I am so sorry for your design hahah I know how it feels to have to add a bunch of buttons all of a sudden. All business and functionality aside.
    – jonshariat
    Jun 9, 2011 at 16:21
  • @jonshariat It's not my design. I'd be ashamed if it was haha
    – Adam Lynch
    Jun 9, 2011 at 16:46
  • haha it doesnt look so bad, its rather clean :)
    – jonshariat
    Jun 9, 2011 at 16:51

3 Answers 3


Oh, this question is so unfair :)

"Our own Facebook likebox, twitter feed and more will be on the right"

Until you know the size/shape of that, we don't know what other space is/isn't available. Also with the title and much else blurred out, we have to do a lot of guessing what the options for changing things there are.

So three options:

IF Social Buttons are TOP priority

Keep them exactly where they are so that they have the high-priority spot. Use Photoshop to make all three buttons the same height, and extend the widths of some so that using tables and pixel padding you have them fully aligned up left/right and top and bottom.

TWO: Social Buttons are MEDIUM priority

Move them in with your own facebook custom like-box twitter feed etc on the right, and do something fancy there so that users can first select their preferred social media, and then subscribe to feeds, share this page etc using that service. I am guessing you will be crowded there, so will be adopting a solution of one-social-medium at a time. Once you do this, you have the space to add the words 'share this page' - so you are turning the problem of confusion about action into an asset - everything to do with that social medium is in one place. I am guessing it is likely each visitor who uses social media will predominantly use one service.

THREE: Social Buttons are LOW priority

After the title add a "share this" link, which shows the social media buttons as a roll-over. This is if you want a hint to point people to a way to share, but it's more important to save space - and not disturb the sober appearance with these new fangled interlopers. Don't shoot me. I did say 'if low priority'.

  • It's safe to assume all the space on the right will be taken up. The page isn't too long and my boss wants a likebox, twitter feed and a big enough ad in there. 1st suggestion: wouldn't that lead to confusion? And is it bad to place them in a group so tightly like that anyway? (that was part of the question, I might have worded it incorrectly). 2nd suggestion: I don't want to lose the recognition the Facebook "Like" button/logo has by hiding it behind a share button.
    – Adam Lynch
    Jun 10, 2011 at 8:11

From the blurry image this looks like an overview page. Is that correct?

If so, I would not put them here and put them on a more detail more specific page with unique none-changing information. Why would they tweet this page? is it the main page?

If its the main page and you really want them to link to your site, than perhaps you could put the blue box flush left and the buttons flush right.

Like so:

switched around

  • It's an overview page I guess. Each company has it's a page like this each. Someone might want to like this company, as opposed to having likes and shares on each product related to that company we sell. "The social buttons are not over on the right-hand side or even on the right-hand side of the table (above the products) just to save confusion" between the like and tweet button for the current page and the like/follow/etc buttons/widgets on the right for us/our company/our overall site
    – Adam Lynch
    Jun 9, 2011 at 16:46
  • I dont think it would be confusing. Do you have the ability to do user testing or A/B testing?
    – jonshariat
    Jun 9, 2011 at 17:00
  • I wouldn't say so. I think what'll happen is I'll have to come up with a proposal and my boss (non-technical) will accept it or not
    – Adam Lynch
    Jun 10, 2011 at 8:13

Down the left side in a single-file column, like on SE question pages?

  • Ok but they are all different sizes. And they are official buttons, e.g. the Facebook "Like" button, unlike SEs custom share button
    – Adam Lynch
    Jun 10, 2011 at 8:09
  • @Adam - So try not using the official buttons. Is there any reason that you need to? Jun 14, 2011 at 19:52
  • @Matt Recognition
    – Adam Lynch
    Jun 15, 2011 at 8:36
  • @Adam - As long as you use their icons or logos in your buttons you will be fine. A great deal of sites customize their own. The Facebook, Twitter and LinkedIn icons are 3 of the most recognizable icons around. Jun 15, 2011 at 11:53

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.