You can see my site here. The share buttons on the left side obviously look quite untidy... Any ideas on how to make them look better?

  • That site was marked private and we can currently not see your site. Can you share what you ended up doing – JGallardo May 7 '13 at 22:18

An easy way to make them better is to get rid of most of them. Large sites with lots of visitors see Twitter/Facebook in use but not a lot else.

Don't bother with the StumbleUpon buttons because SU people have their little toolbar and are in the habit of using the toolbar for that. Same goes for any other link - people don't click them.

Also consider usability. The buttons need to be in some logical place on the content, not thrown on the page to look like you are all modern what-with-your-Facebook-button-n'all. People expect navigation on the left, you have to go with their expectations. In the top-right is no good either - people will not go looking in blindspots for the 'twitter button'. If you are selling products then by the 'add to cart' button is a good idea as people will maybe think of checking with their other half/friend on some purchase that they may not be immediately wanting to buy.

  • Thanks @mathew - I've gotten rid of all but facebook and twitter, you're right about this. But I'm not sure if I agree with you about putting the navigation on the left side. Most people are right handed, the scroll bar is on the right - and look at this site, they have a right-sidebar and navi at the top... I'm not selling anything (yet) and if I did, it would redirect to another site anyway, so I'm not worried about that. Thanks for all of your suggestions though! =) – Tara May 11 '11 at 9:49
  • I looked at your site, but not enough! You can put some usability testing on there to see where people actually move their mouse to: [link]labsmedia.com/clickheat/index.html[/link] – Theodore May 11 '11 at 9:57

As they stand now, a simple tweak would be to make them uniformly sized and aligned with each other. Here's how they look with guides visible and gutters highlighted in red-yellow:

Current icons lack cohesion

You could also add a background around them to make them appear as a cohesive page element and may want to consider using reworked icons that better fit your theme. Some links for inspiration are at the end of this answer.

One of my favorite integrations of social icons is at DanielMarques.me. His site looks like a bookshelf and his icons look like they're sitting on the shelf:

Excellent social integration

Inspirations: http://webdesignledger.com/inspiration/55-examples-of-beautifully-integrated-social-media-links-in-web-design Icon sets: http://speckyboy.com/2009/01/26/30-amazingly-creative-social-bookmarks-icon-sets/

  • Thanks @farray. Yeah, I noticed that the Like button keeps changing sizes!! So, I'm giving up on trying to make it uniform. I like the counters... the example you've given looks more like subscribe buttons than share buttons to me. – Tara May 11 '11 at 9:51
  • @Tara - I'll admit some naivety with the social site interactivity. What's the difference between a "subscribe" and a "share" button? – Farray May 11 '11 at 15:25

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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