I'm developing a small website which has half a dozen static text content pages and an image gallery, with one image per page/url (a dozen now, targeting a few hundred in the long run). I want to add social buttons, and it seems there are too many things to choose from. It's a simple website, I want my users to be able to use the most basic features, I don't want to make these buttons too visible or add too much to the page load time.

For Facebook, you can add a dynamic like button, share button and many others. By dynamic I mean that they count the number of likes/shares. You can also add a static share button, with your own design, by opening a certain sharing URL in a popup window.

Google+ has some similar things, a dynamic +1 with a counter, and the sharing popup window. And there are some other players, but I don't know any of them.

The different buttons are semantically different, they mean different things in different social sites, but I want a consistent behavior, if possible. Is there any guidance about that? If I want to add dynamic counter buttons, should those point to the main page of the website or each page individually?

  • and with "adding social buttons" you mean the dynamic or the static ones ? Because the dynamic ones are a service and a critical part of the branding of the given company, you are not allowed to modify any part of them, including the way they appear and work. So assuming that you are talking about the static ones, the trend now is to make them rounded, basically circles. May 6, 2014 at 1:52
  • "Is there a recommended and consistent way of adding social buttons?" It would seem that, according to Matt Mullenweg, the recommended way would be to avoid them.
    – zzzzBov
    May 6, 2014 at 5:00
  • "I don't like" them is hardly a fair criticism. Feb 5, 2015 at 9:57

4 Answers 4



I just published Social Pins yesterday which provide exactly this: dynamic social badges with a consistent design.

Example to add a Tweet button: http://sopins.herokuapp.com/twitter/https://ux.stackexchange.com/pin.png

And this is what it renders like.

http://sopins.herokuapp.com/twitter/https://ux.stackexchange.com/pin.png http://sopins.herokuapp.com/twitter/https://ux.stackexchange.com/pin.png

(This IS a dynamic button)

Check out the full docs here: http://sopins.herokuapp.com/

Check out the source code here: https://github.com/karan/sopins

  • why the downvote?
    – KGo
    Jul 9, 2014 at 14:28
  • 1
    got a feeling this will be going against the brand guidelines for twitter, facebook, google+, etc. They like their social buttons styled a certain way.
    – Dave Haigh
    Aug 8, 2014 at 15:28
  • @Dave Haigh Can you provide a reference? I look at the feedly app in mobile and their share buttons are totally customized to the look and feel of the app Sep 8, 2014 at 16:40
  • @Dave Haigh Did you mean the dynamic buttons must follow the branding guidelines? Good to see a reference.. Sep 8, 2014 at 16:48

A good example (I don't know if this is best practice) is Digg. They've picked three options, so the user isn't overwhelmed, and the options are clearly suggested and insitu, as opposed to ShareThis where the user has to dig around to find their preferred social button.

enter image description here

  • This approach feels a bit too "in your face" to me.
    – Brian
    Aug 8, 2014 at 16:30
  • People still used Digg in 2014?
    – Joe Z.
    Mar 7, 2015 at 0:26

Yes, there is a recommended way, but not a consistent one

Unfortunately, that recommended way is probably not what you're expecting. It's not a fixed layout (i.e. put buttons after the image, or in a console to the right).

Instead, it's a design approach that involves figuring out how you want to direct user flow across your content.

  • Typically, you will want to quickly visualize the desired user's workflow, which is something like: read title, look at image, decide whether to share.
  • That will help you figure out how to lay out your content. The layout should promote smooth visual flow from the start to the end of the workflow. This article has some notes on how users perceive and are influenced by layout flow.
  • In most viewing flows, social buttons should logically appear after the main content (or at least, after the user has read enough of the main content to make an informed decision on whether to share or not).
    • Sometimes sites put a permanent floating "share" console next to the content. This can be effective too but users can often tune this out as background because they see it before they have a chance to read the content, so they cognitiviely dismiss it from the outset.

By focusing on your user flow instead of generic layout advice you are much more likely to figure out the right placement for your site.

  • Taking generic advice like "place the buttons at the bottom and make them square" is a little like taking a random drug prescription from a stranger without any regard for what your specific medical concerns are.

You'll be happy to learn that are a wide range of solutions to just this problem. Check out services like AddThis, AddToAny, and ShareThis. As their names suggest, they don't differ too much, but it's worth experimenting with each to find the one best fits your needs. You're asking for minimal functionality, and one may do a better job not pushing the glitter than the others. If none of them work, Google around, there are probably some other providers. Those are just the ones I know off the top of my head.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.