Grow your CSS skills. Land your dream job.

Sharing

Published by Chris Coyier

I just added "The Big Three" sharing buttons to articles on this site: Twitter, Google Plus, and Facebook. I've shared my thoughts on sharing buttons like this in the past. I essentially decided that I didn't like them for this site. So before anybody skewers me for hypocrisy, I thought I'd go back through my old thoughts and refute myself.

Regarding Traffic

Every website owner in the world wants more traffic, me included. Theoretically, if you put sharing buttons on your site, more people will share the article than would have otherwise, and there will be an increase in traffic to your site. I wrote in that article that I'd tried sharing buttons in the past and saw no significant up tick in traffic. That was true. I'm going to try it again and measure traffic more carefully. But traffic isn't the only factor here.

Regarding User Experience

My personal experience at the time of the last article had me a bit gun shy of clicking social sharing links. I was afraid something might be "auto-tweeted" on my behalf. When that happens, it makes feel like a stooge in front of my friends and I don't like it. I don't think anybody likes that, and the UX of these things has reflected that. I haven't had something auto-tweet for me in a long time.

I don't have any proof of this, but sharing buttons have become so ubiquitous that I think many users almost expect them to be there. In that regard, it's good to not break that expectation, especially when it's of benefit to both of us.

Regarding Which Sites

At the time, it was more common for sites to have a huge rack of sharing buttons. From the obvious big players, to stuff like Delicious and StumbleUpon, to every little trashy niche sharing site out there (e.g. DesignFloat). I was turned off by this and thought that even if I picked my favorites, that would change quickly and turn into a maintenance problem.

Today, I feel like Twitter, Google Plus, and Facebook are the big three and probably will be for some time. I'm only going to use those three for this site. All three of them provide their own native sharing functionality, which I am using. So it's not this "click a link and be whooshed away to some generic sharing URL", it's the native experience.

Regarding Aesthetics

Like anything else, done poorly, sharing buttons can be an eyesore. For my first iteration, I'm just putting them at the bottom of the article in little boxes that go with the other things in that area (Screenshot). Hey I'm not going to win any design awards but I think they work with the design just fine.

Regarding Page Speed

I'm hoping that because I'm using the standard button scripts that all three of these social sites provide, that they will very likely be in users browser cache and thus not affect page speed much. I know that doesn't help mobile out much, where caching isn't nearly as robust. All told, this will slow down the site a bit, I'm just hoping it's not drastic. If it becomes a problem, they'll have to go, speed is a deal-breaker.

I Like Liking Things

I actually use and enjoy all three of these social networks. And I like how each of them has done their unique versions of liking things. For Google Plus, I just click the little +1 button and it feels good. I've shown a bit of appreciation for that content, I can find it again more easily if I lose track of it by going through my old +'s, and other people might see it who are interested in things I +. With just a single click and no big break in my concentration. One of the big motivations for adding these buttons is because I like using them on other people's sites. I want to be able to do it on my own, too.

It's just a test

In a month or so I'll revisit this and see how things have gone. I can see exactly what happens to traffic by comparing pre-November-17th traffic to post. Nothing on the web is permanent. If things are good, they stay, if not, they go.

For comparison's sake, the last ten articles on this site saw an average of 210 tweets, 38 +1s, and 39 Likes. That will be good to compare a month from now. (You know, assuming the content quality doesn't change dramatically =))

Comments

  1. Good stuff. But I think you ought to have them on for more than one month. Think it’s an arbitrary metric. It could be that traffic ALWAYS spikes on December or actually decreases. It’s best to leave them on for a few months, see how it fares compared to before now, and compared a year or so ago. Also, check your sources carefully, see if they increase via the big three.

  2. Permalink to comment#

    Interesting stuff, I always wondered why you didn’t have sharing buttons ( I never read that older article ). I hope they work out well for you!

  3. Hurray? Wait one second, I gotta Tweet this.

  4. Permalink to comment#

    impressive numbers

  5. Richard
    Permalink to comment#

    Good article! Heads up that The buttons are exceeding the 320 px width on my ipod and messing up your layout ( in the same way long non breaking line might do )

  6. Chris
    Permalink to comment#

    For some reason the Facebook button doesn’t show up for me; which is fine… I use G+

    • I’ve heard reports of that. Using Chrome?

    • Permalink to comment#

      facebook also gone by me. FF 8.0

    • I have had no problems seeing the buttons. I have checked with Chrome & FF8. I did recently have some off topic issues with FF8 that made firebug not even show up. (Fixed with a reinstall of FF. However I cleaned the registry with CCleaner after uninstalling).

      This could be an issue could be localized browser issues that only occur on some people’s computer’s.

      Hope this helps.

  7. Permalink to comment#

    I’ve been hunting something to put “the big three” in the miniature icons for me. I’m sure it’s easy for experienced designers. Seeing the unobtrusive blocks at the end of a page look much more clean to me than that of my site.

  8. Chris, I guess your assumption is right. These three sharing buttons are pillars of social networks rest are online for names only.

    Thumbs up to your opinion.

  9. Yeah man!! I almost never use any other sharing buttons than these when I find some interesting article. At times, I even felt I was lagging behind as I didn’t know some of those sharing and social networks existed.

    Anyways, I’m glad your site now has these sharing buttons. I always wanted to tweet your good articles but had to copy and paste the link from the browser address bar. Now, I’m liking it!

  10. I forgive you :) Nicely integrated.

    • Nicely integrated? They are encased in obnoxiously colored blobs. Looks really cheesy IMO.

    • Permalink to comment#

      I agree with Chris Bracco. It looks horrendously gaudy.

      Something like this would look and feel much better, in my opinion.

    • Permalink to comment#

      Much better to have the buttons at the end of the post so that people see and use them after reading the content, rather than requiring them to scroll right back up to the top if they want to share it with their chosen service(s).

  11. Permalink to comment#

    Good choice but I never understood your auto-tweet concern in the first place. I was under the impression that no sharing button can auto tweet. For that to happen you would need to explicitly grant it access to post in your stream?

  12. I’d rather get rid of that crap :>

  13. Permalink to comment#

    Go thought, Currently me using lots of that trashy niche sharing site out there . Will need to remove all that make thing more cleaner and appealing to visitors. Let’s see how it goes

  14. Totaly agree with you…and i think at this moment these are the ones who count.

  15. Interesting… Facebook’s native sharing functionality is broken in both Firefox and Chrome. Google+ isn’t working in Firefox.

    • I see Facebook’s pop-out window doesn’t play nice when you resize the browser window either. It’s position is locked to the Send button.

  16. Permalink to comment#

    The pressure of conforming… we all do it… If you don’t have order then you have chaos and apparently all these little buttons all over the place give us a sense of security and lead us to believe that all is in order… Nothing wrong with that.

  17. Matt
    Permalink to comment#

    I ‘like’ the fact that anyone who liked this on Facebook now has a drunk picture of you on their page. Ha Ha.

  18. Hi Chris,

    I have recently dealt with trying to implement social buttons on a high traffic international site. This is very tricky to do right. I use AddThis (www.addthis.com), which is pretty customisable, handles asynchronous loading, and different locales.

    Also note that although Google, Twitter, Facebook are the top three social networks in the US or UK, they won’t be in other countries, worth noting for people pushing them onto international sites.

  19. Timothy
    Permalink to comment#

    Hey Mr. Coyier, your buttons don’t seem to work (or even look right) on the iPhone. Just a heads up.

    • Timothy
      Permalink to comment#

      Oh wait, never mind, they do show up on the iPhone, they just take so long to load that I stopped the page before it finished loading them. :) They do go outside of the margin though.

    • Fixed that margin issue

  20. Sarassassin
    Permalink to comment#

    I like liking things too and definitely have come to expect the various sharing buttons on posts. I actually found myself the other day wanting to share an article (on another site) but didn’t see the buttons so I just didn’t share cuz I was too lazy to copy/paste the URL. This is what the internet has done to me.

  21. Permalink to comment#

    As someone who frequently likes to point to your posts, I am very happy with your decision to add the sharing buttons.

  22. hey very nice Chris, I ‘like’ your opinion.

    It can increase your traffic and I believe your site will be better than yesterday :)

  23. Permalink to comment#

    My biggest issue is with Facebook’s offering. Twitter and Google+ both provide code quickly and easily to let you add buttons that reference the current page you are on. Facebook forces you to hardcode a URL the button is tied to, unless you implement their XFBML and get an API key, which is silly.

  24. Permalink to comment#

    I agree with the point that users expect them to be there. If I enjoy an article, I want to share it. I can, of course, shorten the link and post it manually. But I get distracted easily and will sometimes forget. So it’s nice to have the buttons there to remind me that I can share, if I want to.

  25. Facebook content doesn’t appear for me, and I’m using Safari 5.1.

  26. Permalink to comment#

    Thank you Chris… No, I really mean it seriously.
    For a long time I found it a pain in the butt having to copy/paste the links to your excellent articles to both my twitter and G+ account…
    So by adding the big three you’ve just made my life easier, and spared me quite a few clicks pr. shared article – And as I am a great believer in optimizing processes and save time, I thank you once again – and I hope you keep them this time :)

  27. Permalink to comment#

    I’d suggest you also add LinkedIn. I’m sure there are a million other sites that can share but LinkedIn would be important to built business-like relations. When it comes to other sites though, I feel that people should install their own extensions to their browsers to share. I seldom use the “social media” icons (I just hunt for the RSS) but when I’m without my usual setup, the icons need to be present.

    Thanks for the article :)

  28. Permalink to comment#

    I’m a fan of sharing button on sites simply because I do like to share things I find, especially when I find them useful and I think that the content deserves props. With that being said though I only use the ones I use on a day to day basis. So that includes; facebook and twitter mostly.

    Although on my site all the main sharing buttons are available but I don’t think I can change that.

    Good luck with the experiment.

  29. Permalink to comment#

    FB ‘send’ button is doing some weird stuff. Looks like a z-index issue.

  30. Permalink to comment#

    Your good stuff comes to my email as
    “too wide to show”.
    Also my Foxfire browser shows occasional wide black bars across the screen, on your site only (out of thousands).
    Thought you’d like to know, since your good work is so precise.
    Bob Batson

  31. Todd
    Permalink to comment#

    Hi Chris. It would be super rad if you could write a post on the code of how you embedded these. I have had trouble with behavior and aligning them in the past.

  32. 100th +1! – Love you you’ve integrated them, very well done – As always by you.

  33. Permalink to comment#

    I didn’t like the buttons since they slow down page load a bit and look inconsistent. I implemented custom buttons on my site instead, and cache the numbers so it doesn’t slow down the page load much. Here’s a screenshot: http://ss.dan.cx/2011/11/21-22.27.14.png (I do need to make them look nicer, I’m not a designer).

  34. Permalink to comment#

    thats pretty awesome :D i love this site.

  35. Permalink to comment#

    I’ll agree with the notion that social buttons are expected nowadays.

    I specifically remember being annoyed on the old version of iOS when I couldn’t just tweet a page from safari. I had to copy+paste the link then open Twitter, which was rather annoying to do on an iPod.

  36. Nadine
    Permalink to comment#

    I have to admit I’ve wanted to share your posts before and stopped short when it meant I had to copy & paste the url into twitter. Glad to see they’re here for now. Did you consider using addthis for the analytics? Also to note: the +1 only shows up when I hover over it (chrome on mac).

  37. I agree with adding them because they have become a convention. People expect links to be underlined and colored differently. You don’t mess with convention…it messes with you.

    I also respected that you didn’t before. I like when people stick to their guns even when it seems silly to some. Doing things on principle counts with me.

  38. Great..!

    Thanks..! العاب

This comment thread is closed. If you have important information to share, you can always contact me.

*May or may not contain any actual "CSS" or "Tricks".