Effective display of social media buttons on your blog and website becomes more critical every day:
- On the people side, social media for business has gone mainstream, so building a community around your company pages opens up huge opportunities for sales, leads and referrals.
- On the SEO side, social shares are being given more weight by Google and other search engines. Content that is liked, tweeted and +1’d will perform better in SERPs than lonely, unloved blog posts and web pages.
This post includes several suggestions for displaying social buttons, as well as screen captures to illustrate various details.
Tips for Displaying Social Media Buttons
Displaying Community Buttons
- Display community buttons for networks where you have an active presence. (If it’s only a token presence, think about whether you want to encourage people to check you out on that network.)
- You can help visitors find your community buttons quickly by making them reasonably large, using standard images, and grouping them together in a single block.
- Since visitors may get the urge to connect no matter where they are on your site, it makes sense to place your block of community buttons in the header of every page template. Placement at the top of the sidebar is a good alternative for blog sites.
- Another good place to display community buttons is in the footer. Visitors don’t always want to scroll back to the top, but may be very interested in connecting after reading a page of great content.
- Somehow let visitors know that these buttons are for joining your communities, not for sharing your content. Since share buttons look similar, visitors may be unsure about the purpose of a particular button.
- Test buttons periodically to make sure everything is still working.
Displaying Social Sharing Buttons
- Facebook, Google+, LinkedIn and Twitter share buttons should always be displayed, since there’s a high probability visitors will be active on at least one of these networks.
- Display buttons to other networks if they are especially applicable to your content and audience. Popular candidates are StumbleUpon, Digg, and Pinterest (especially if you have cool images). Be careful about displaying every possible button, though: offering too many options can clutter your design and possibly confuse the visitor.
- Share buttons should be large enough to be easily seen, yet not so large as to overwhelm the content.
- If possible, keep all share buttons grouped together in a single block where visitors can find whatever they need all in one place.
- The most popular placement for share buttons is at the top and bottom of the blog post. Sometimes people share content before they read it, based purely on the title and/or your reputation. And certainly, the motivation to share will be high after someone has read your post. Be careful not to let share blocks to get lost among other design elements such as ads, bylines, subheads, bios, and comments.
- Another popular display option for share buttons is a vertical sliding button panel on the left page margin. The nice feature of this approach is that the buttons are always in view no matter where the reader is on the page.
- Test button functionality periodically to make sure everything is working properly.
Two Big Display Issues
1. Should you show the number of fans and shares?
If your numbers are small (e.g., fewer than 100 in your community and single-digit tweets), it seems sensible to hide them, but then again, many people are as likely – maybe more likely — to retweet under-shared content as widely shared content, as long as it’s good content.
If your numbers are huge, displaying them would seem to be a no-brainer, And yet, how interested are people in sharing content that’s already been shared a thousand times? How interested are they in joining a community where they will just be a face in the crowd?
What do you think? Show numbers or hide them?
2. Should you display big honking community widgets on your sidebar?
When Facebook introduced its widget, everybody rushed to display it. Other networks offer them as well, and though they may be effective for some bloggers, they have disadvantages.
First, these widgets distract from the page’s content. Second, when social –link design elements are scattered, they force users to search harder for the links they want. Third, if widgets are placed high on the sidebar, this valuable real estate probably can be put to better use. If widgets are low on the sidebar, few users will see it, so what’s the point?
What do you think? Widgets or no widgets?
Social Linking in the Real World
A. Community Buttons
Example 1 – Good design by Dianna Huff
Dianna’s blog header nicely combines branding and conventional button images – notice how the white space helps focus attention on the various design elements. She positions her community “link block” perfectly, at the top right of the header where nobody can overlook it. Placing contact information below the link block helps users identify the buttons as community buttons rather than share buttons.
Example 2 – Less effective design
Here, the community buttons appear as something of an afterthought, not clearly identified and unevenly spaced. The buttons are not large enough to be easily noticed, and having two Facebook buttons could be confusing to users.
Example 3—Good positioning from Skyje
Skyje’s blog home page is extremely long, so footer links aren’t practical. Instead, Skyje places this community block on the sidebar, just below the fold. The buttons are large and use standard colors, making them hard to miss. I also grabbed the hover text here, so you can see how helpful it is.
Example 4 – Creative linking from Memeburn
Memeburn’s Mobile links are extremely cool. Memeburn is making it easy for content to be read and shared on mobile devices, which is something all content marketers should be doing. Very smart.
Example 5 – Creative design from Adverblog
Remember the tip about always using standard images? Adverblog does the opposite and succeeds brilliantly. By sticking with standard colors and smartly positioning the link block, they have a little fun and get the job done.
B. Share Buttons
Example 1 – Sliding vertical panel at SocialMouths
Vertical slide panels are arguably more noticeable than share buttons that appear at the top and bottom of a post, and they are always right in front of you. Here, six links are displayed, which is about perfect: some blogs display upwards of ten buttons, which gets distracting.
Example 2 – Simple and complex linking options from Technorati
Technorati places share buttons for Facebook, Twitter and Google+ at the under the post title, which is good:
Then, at the bottom, they place share buttons to more than 300 sites in the author bio section:
When you click on the share links, a dialog box opens that contains a plethora of additional links:
The placement of these share links is strange, but all these options may have appeal to Technorati’s geeky audience. Technorati is probably wise to have simple sharing options at the top, and bury the complexity.
Example 3 – Subtle emphasis from Jason Falls
To avoid having the share buttons get lost at the top of the post, Jason adds a little shading to the share block, making it stand out and yet not overwhelm the actual content. As usual, Jason hits the ball out of the park!
Over to You!
What do you think? What are your likes and dislikes about social button display? Do you see anything in your own design you’d like to change?
Studying web design and usability is quite helpful for maximizing a site’s effectiveness – and that includes social media community building and content sharing. To learn more:
- Don’t Make Me Think, by Steve Krug. Subtitle is “A Common Sense Approach to Web Usability.” Be uncommonly great by reading it!
- Jakob Nielsen – The guru of web usability. Tougher reading, but well worth the effort.
Do you have any great resources to share?
Photo credit: Coletivo Mambembe