For many of our clients, incorporating the ability to share content through social media channels is an important feature for their website. Ideally you want to make it as easy as possible for your website visitors to share your content with their peer group, whether that be on facebook, twitter or a popular news aggregator like Reddit. In this blog post we’ll explore some of the solutions available.
To start, I’d like to show some of the different visual layout approaches used to share your site.
1. Static – Above content or in a sidebar
One of the primarily used methods for displaying share buttons. Placing them horizontally right above the content or in a sidebar provides the web visitor with a familiar place to locate the buttons, and allows them to share the content instantly, before they even start reading. One disadvantage to this approach is that if the user wants to share after they finish reading the page, they may be forced to scroll back the top to share the content. This can be easily overcome by placing a second set of sharing buttons at the bottom of the page or article.
Share Buttons Are Displayed Just Above Content
2. Fixed, vertically on side of page.
This popular method provides the advantage of the share buttons “following” the user as they scroll up and down the page allowing them to share at anytime. One disadvantage to this approach is that if the user zooms the page or their resolution is low, the vertical bar can cover content or even disappear from view.
Not Covering Content
Zoomed In - Covering Content
3. Responsive – Vertical and Horizontal
A responsive design provides a combination of the first two options. If the user’s viewing space allows for it, a vertical bar is shown that follows the user up and down the page, but as they zoom in, or their resolution decreases, it will move automatically into place horizontally above the content. You may have seen this technique used on popular sites such as mashable.com.
Buttons Respond To Screen Size and Adjust To Fit
Now that you’ve seen examples of common layout approaches used for sharing butons, what options are available for getting those icons there in the first place?
Button Generators:
Many social media websites offer friendly, easy to use code generators for displaying commonly used features. For example, you can use this page : https://developers.facebook.com/docs/reference/plugins/like/ to generate a facebook like button for your website. Twitter offers a similar service for its tweet button.
Sharing Platforms:
1. ShareThis : sharethis.com
ShareThis is a popular sharing platform with many integrated social channels. Through their website you can build a ShareThis widget which you can use on your website. ShareThis also bundles analytical tools into their widget allowing you to see statistics such as number of page views, number of shares, most shared content and many other variables.
2. AddThis: addthis.com
Addthis is another popular sharing platform similar to ShareThis. They allow you to create a widget, use analytical tools and feature a large list of social channels to choose from.
Custom Solution:
Finally, you could have a custom solution built to fit your needs. Several of our client asked us to include a share bar on their sites similar to mashable.com. We developed a module for SilverStripe CMS that allows us to easily deploy a “share bar” with the responsive functionality described above. Developing a reusable module saves our clients time and money by making it easy to setup the share bar across any number of sites.
On our own site, we went with a clean approach. We added a facebook like button and digg share button just above the blog articles. Throughout our site (www.webbuildersgroup.com) you can find a like button, tweet button and a send to a friend button just below the content.
Each of the options listed above require some level of xhtml and/or javascript knowledge to implement. Need help getting a like button on your page? Contact us today.
What methods have you used or seen on websites? Which do you feel is best? We'd love your feeedback.