Find solution
Is there a recommended and consistent way of adding social buttons?

Is there a recommended and consistent way of adding social buttons?

  • 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?

  • Answer:

    Yes. I just published http://sopins.herokuapp.com/ yesterday which provide exactly this: dynamic social badges with a consistent design. Example to add a Tweet button: http://sopins.herokuapp.com/twitter/http://ux.stackexchange.com/pin.png And this is what it renders like. (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

fejesjoco at User Experience Visit the source

Was this solution helpful to you?

Other answers

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.

user3599871

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. http://www.uxbooth.com/articles/comics-and-ux-part-2-flow-and-content/ 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.

tohster

You'll be happy to learn that are a wide range of solutions to just this problem. Check out services like http://www.addthis.com/, http://www.addtoany.com/, 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.

DanielF

Related Q & A:

Just Added Q & A:

Find solution

For every problem there is a solution! Proved by Solucija.

  • Got an issue and looking for advice?

  • Ask Solucija to search every corner of the Web for help.

  • Get workable solutions and helpful tips in a moment.

Just ask Solucija about an issue you face and immediately get a list of ready solutions, answers and tips from other Internet users. We always provide the most suitable and complete answer to your question at the top, along with a few good alternatives below.