Sep 4
Let’s Talk About Share Buttons
posted by Martha Ormiston on September 4, 2013
Share buttons have become a standard element in web design. Almost every website has a button that allows a user to share on Facebook, Twitter, or via email at the very least. Sharing increases awareness, outreach, donations, pageviews, and engagement – what organization wouldn’t strive for shares?
Custom Share Buttons
At Fission we often create unique share buttons for our clients that are designed to compliment the rest of the web page in their color, style, and typography. A few examples of our custom share buttons can be found on the following sites:
WhereIAmGoing.org
ONE Campaign
Civic Data Challenge
No More Names
Immigration is: DOCUMENTED (Define American)
Freebies For Designers
We also have a few different resources available for you to create your own custom social share buttons. Our Free Icons for Nonprofits icon pack contains many of the logo icons of the most popular social media networks.
Our post on the importance of social giving provides a downloadable .psd containing two different share button styles - both flat and gradient. These are all free for personal and commercial use. We ask that if you reblog our .psds that you link back to our site for the download, and if you use any of our freebie graphics, let us know on Twitter! We’d love to see what you’ve done with them.
Default Embeddable Share Buttons
In some cases, a more default looking approach for share buttons is needed. These buttons are quicker, and sometimes even make more sense in certain areas of a design. These share buttons are added to a website by using embeddable codes provided by specific social media plugins. These buttons are not customizable in their overall appearance, but sometimes a specific username can be added to them. This style of share button works well under blog post titles (like ours!), popups, dropdowns, and sidebar widgets.
When designing WhereIAmGoing.org, Fission decided to use the standard Facebook ‘Like’ & Twitter ‘Follow’ buttons in a Thank You popup that appears after a user shares the video. By using the default styles in this popup, we are signalling to the user that this is a secondary action. The user never asks “...wait, didn’t I just click that?” because they understand that they are finished sharing, and are now onto a different action (Liking or following). These visual cues can be key to not confusing your supporters!
For our web design of the National Honesty Index (a project by Honest Tea), we used a generic ‘Like’ button in the fixed header navigation. We felt that using this style here would help the ‘Like’ button standout from the other icons that make up the navigation, and not get lost in the design.
On the No More Names site, we included generic ‘like’ and ‘follow’ buttons in dropdown menus in the fixed navigation bar header. Much of this site consists of blog posts that feature custom share buttons, so we wanted to make sure that the user could clearly differentiate the functionality between each set of social media related buttons that they find on the page.
What button design styles do you like? Leave us a link and let us know in the comments below this post!