How to Display Social Media Buttons

How to display social media buttonsGuest post by Brad Shorr from Straight North.

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

Displaying community buttons

  1. 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.)
  2. 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.
  3. 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.
  4. 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.
  5. 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.
  6. Test buttons periodically to make sure everything is still working.

Displaying Social Sharing Buttons

Displaying sharing buttons

  1. 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.
  2. 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.
  3. Share buttons should be large enough to be easily seen, yet not so large as to overwhelm the content.
  4. If possible, keep all share buttons grouped together in a single block where visitors can find whatever they need all in one place.
  5. 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.
  6. 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.
  7. 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

Good positioning of social buttons

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

Less effective positioning of social buttons

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

Social icons good positioning

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

Creative social links

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

Creative design of social media buttons

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

Social sharing floating bar

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:

Good positioning of sharing buttons below headline

Then, at the bottom, they place share buttons to more than 300 sites in the author bio section:

Social sharing at bottom of the post

When you click on the share links, a dialog box opens that contains a plethora of additional links:

Expanded share buttons

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

Subtle emphasis of the sharing options

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?

Further Reading

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

Related Posts Plugin for WordPress, Blogger...

10 Mistakes People Make on Facebook Pages and How to Fix Them

Join 10,000+ subscribers and get FREE access to my online course...

  • omnibeat

    Great post. There is nothing worse than Social Media buttons that link to empty pages when they also take up valuable real estate. We have found the WordPress Plugin Digg Digg to be fantastic when it comes to implementing multiple Social Share buttons. 
    http://bufferapp.com/diggdigg

  • http://twitter.com/bradshorr bradshorr

    Good point about empty pages. I’ve also seen community buttons link to the site’s home page, which is an obvious problem.

  • omnibeat

     Yeah, the whole http://www.business.com/# effect.

  • Yuki Chow

    Was just working on some social button recommendations for a new site, thanks for the tips! When it comes to tracking, would you suggest or widgets over individual buttons?   

  • http://www.blogpreneurs.com/ Devesh

    Great stuff. I’ve been using Share bar plugin for floating buttons and it works really well. 

    One thing that I’ve been thinking of implementing is a flaoting bar at the top of the page, something like TheNextWeb & TheVerge have. 

    -Dev

  • http://twitter.com/bradshorr bradshorr

    Yuki – great question. Since I’m not a programmer or familiar with the technical side of analytics, I couldn’t make a recommendation, but hopefully someone else can help you out. 

  • http://twitter.com/wowcarwow yuvraj

    really nice post , you can create all in 1 floating social media buttons using this tool chec it out – floatingsocialmediabuttons.com

  • http://skyje.com/ skyje

    Thanks for adding skyje to your examples of social media

  • http://twitter.com/bradshorr bradshorr

    Well deserved!!

  • http://cashinghub.com/ Jeet

    Great, we need to care about both side. People’s side always needed and as far as seo is concern you have no option to remove social media from your site. Thanks anyway. 

  • http://twitter.com/ChandaGunter Chanda Gunter

    I’m limited to my social sharing buttons with WordPress.com, any suggestions?

  • Tobias Gärd

    Great article. Thank you!

    My thoughts about showing numbers or not. If an good article has no shares I’d feel the urge to share it. Just to be among the first one to share it. A prestige maybe? “I found this first”.
    If an article has more shares than the others on the same page. I would get the feeling that this is good, other readers with the same interests liked it and shared, I’m like them so I should do it. But then there is a magical number. When a post get to many shares, I feel like I’ve missed to share this one. I can’t share this now, I’m to late. Does anyone recognize this? :)

  • http://www.stlucia.cc/ st lucia villa rental

    The guru of web usability. Tougher reading, but well worth the effort.

  • http://www.diagnostic-experts.fr/diagnostic-electrique-immobilier.html diagnostic electrique

    Effective display of social media buttons on your blog and website becomes more critical every day:

  • http://twitter.com/diannahuff Dianna Huff

    Thanks for featuring my blog header as an example of an effective share. Location of share buttons is one of the things I’m passionate about. 

  • http://twitter.com/NAV_TV_Corp NAV-TV Corporation

    Great Stuff !!

  • http://twitter.com/bradshorr bradshorr

    It shows, Dianna!

  • http://twitter.com/bradshorr bradshorr

    It all rings true to me. I have no idea what the magic number is, but maybe the number varies depending on the blog. Some blogs get a lot more shares than others, so, say, 100 shares could represent the saturation point or just the beginning. 

  • http://twitter.com/bradshorr bradshorr

    Have you looked into self-hosting? There’s a lot written on that topic, and it seems like there are many reasons to make the change. More flexibility with social buttons would be a fringe benefit. 

  • http://www.abercrombieandfitchonsale.co.uk/ Abercrombie and Fitch

    I wanted to thank you for this great read!! I definitely enjoying every little bit of it I have you bookmarked to check out new stuff you post.

  • http://www.brickmarketing.com/ Nick Stamoulis

    If you are going to display your social share buttons, it’s important to maintain an active social presence.  You don’t want to send a visitor to a social Page that hasn’t been updated in weeks, or even months!  Also, it’s important to consider the goal of your website.  Typically you want a visitor to convert on your web property.  Displaying social buttons too prominently could mean that you are losing those visitors to your social Page and they may or may not return.  

  • Ozio Media

    With the growing number of social media sites that are online now, the range of community and share buttons is potentially huge and can be confusing. It can be tempting to include a lot of buttons in an effort to attract more traffic, especially for bloggers, but it is worth looking at where your social traffic is coming from and concentrating on those. Still the most important one is probably Facebook, but having a presence on Google+ has SEO benefits that are giving it more importance.

  • http://www.blake.co.za/blog Sarah

    Didn’t realize the position of the social media links played such a big roll. But i can see where you are coming from and it makes sense. Thank you for sharing. 

  • http://www.wisestep.com/ WiseStep

    good nice article social media buttons really helps to website owners and will grt traffic and easy to share

  • http://printoutlet.com.au/ Retractable Banner Stands

    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.

  • http://www.tampaflowers.info/ florist tampa

    Using standard images, and grouping them together in a single block.

  • http://www.big-oil-spills.com/ Stephani Escamilla

    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.
     

  • http://www.homesforsalelakenonaorlando.com/ lake nona real estate

    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?

  • http://www.phasesskincare.com/treatments/pearl-resurfacing-2/ laser resurfacing indianapolis

    Effective display of social media buttons on your blog and website becomes more critical every day:

  • http://www.videovirtualsets.com/ videovirtualsets

    This post includes several suggestions for displaying social buttons, as well as screen captures to illustrate various details.

  • http://www.youbihar.com/ Shalu Sharma

    Thank you, this is going to be help to me. 

  • http://www.nobleinfosys.co.uk/ Web Designer, London

     Displaying a Twitter box next to your posts allowing readers to tweet about your post without leaving your blog is another effective way to increase engagement. I have tried this on my blog and it has made noticeable difference.

  • http://www.ritterandramsey.com/ dental implants jupiter fl

    Your company pages opens up huge opportunities for sales, leads and referrals.On the S

  • http://twitter.com/digestreaders digestreaders

    Really very defined and good post.

  • @MarketMeHappy

    This Post is really simple and too the point but effective. I particularly like the Diana Huff example. Too many sites are overcrowded with buttons all over the place and it just becomes really annoying. I like the vertical slide bar its in one place, easy to share and see without distracting from the content.

  • Lynda Colter-Bergh

    Great info. Have you ever had incorrect numbers of shares display? I have a website that keep showing inaccurate numbers.

  • Anthony

    hi…thanks for this information..i am new and this would definitely help me…

  • Spi Der

    Nice Bro :)
    Great !!

    http://vidzzonline.com