HOW TO: Add Social Sharing Buttons to Your Website

This post originally appeared on the American Express OPEN Forum, where Mashable regularly contributes articles about leveraging social media and technology in small business.

If you run a blog or website of any kind, chances are you’re always trying to encourage more people to talk about and share your pages and posts through a variety of channels, including social media and e-mail.

For many sites, adding social sharing buttons is a simple and effective way to quickly boost pageviews and sharing stats. Unfortunately, it can also be a way to clutter up your pages, confuse your users, and cause massive bugs and layout issues.

Here’s a quick guide to best practices for adding social sharing buttons to your site or blog.

1. Use a Catchall Service

One way of getting a streamlined row of similarly styled buttons on your pages is using a catchall service like ShareThis or AddToAny. These services will generate a tidy interface — just a few lines of code — for you to place on your site.

The downside is that these buttons may not have the big, call-to-action impact of a Twitter or Facebook stand-alone button. And they may not give you a count of the number of shares. The upside is that you can’t really screw them up too much. If your site is prone to clutter, this might be a good idea for you. Most of these services will also give you a decent dashboard for analytics.

Here are a few services to try out.

Add to Any features the most streamlined sharing button we’ve seen. This service’s stats can be rolled into Google Analytics.
Add This is a popular sharing platform with a huge list of services readers and users can share through. The interface isn’t unpleasant (as many catchall interfaces are), and it can be customized to feature small or large buttons for popular services. Buttons with share counts are also available, although this beta feature isn’t as visually appealing.
Share This is a similar service with a UI that features a small, single button, large icons, or even larger icons with horizontal or vertical share counts.

Other catchall services worth checking out include Sociofluid and Joost de Valk’s WordPress plugin Sociable.

2. Use Only What You Need

Another approach that we favor is giving your users only the buttons they’re actually going to use in significant numbers. This frees your page from clutter and frees your users from irritating and possibly confusing fly-outs, all while providing compelling, actionable buttons for the services that affect your traffic the most.

Most social sharing services will have buttons and code for you to grab — check for resources provided by the service you’d like to include.

Twitter and Facebook work well as sharing buttons for almost every kind of content. Use a LinkedIn sharing button if you’re going for a big professional network or creating content around professional topics. An RSS button is good if your audience is nerdy enough to appreciate RSS, and include an e-mail button if you’re cultivating an older or less “public” demographic — or if your content is sensitive or personal. A Hacker News button works great if you’re going for a technical audience. Likewise, Digg or Reddit buttons are best if you’re aiming for virality with a general and web-minded audience, and Stumbleupon is useful if you’re going for casual and social browsers.

Ultimately, the best practice is to take note of where your current traffic is coming from and optimize accordingly. If 80% of your non-search traffic comes from Google Reader and LinkedIn, maybe a LinkedIn button and RSS button are all you need.

Whatever you do, don’t go overboard. Aim for less than three buttons for social sharing, and house them within one widget. “Stop adding so many social media widgets to your websites,” advises Community Manager Elliot Volkman. “You only need one. If people like your content, it will spread… Base your design off of user experience and necessity.”

3. Where to Put Sharing Buttons

In a great article on “web shui,” the folks at SocialFollow write, “There is a theory in conversions that the bigger the button, the more action it will receive. While this is true of call-to-action buttons that actually create conversions and sales, the rule doesn’t always apply to your social media buttons.”

Discreet but cleverly placed social media buttons strike the right balance between content and promotion. They don’t draw too much attention to themselves, but they are simple to find.

You should include your sharing buttons “above the fold” on all relevant web pages — that is, it should be visible as soon as the user loads your page, no extra clicking or scrolling required. In some cases, especially if you tend to write long blog posts, you can also include sharing buttons at the end of the post.

As you’ll note on Mashable‘s pages, we’ve eliminated the redundancy by using a floating widget. We’ve embedded a code snippet below, courtesy of Mashable lead developer Chris Heald, and you can see more on how to integrate this feature at Heald’s GitHub page.

More About: facebook button, sharing buttons, social media, social media buttons, tweet button, web design

For more Dev & Design coverage: