How to align social buttons without losing vertical space?

Question

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:

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?

---

NOTES:

• 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.

Answer 1

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'.

Answer 2

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:

Answer 3

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