Good examples of "Share this page" UI
10 years ago from Conlin "Wuz" Durbin, f-f-frontend @ lessonly.com
I am looking for some "Share on Facebook/Twitter/etc." UI inspiration. What si your favorite way to show a share button?
10 years ago from Conlin "Wuz" Durbin, f-f-frontend @ lessonly.com
I am looking for some "Share on Facebook/Twitter/etc." UI inspiration. What si your favorite way to show a share button?
I have my own little "scroll tweet" module that has boosted follows and tweets tremendously. I'm thinking about cleaning it up and releasing it. Here's an example, scroll down to the bottom half of this page and it will appear. It goes away on scroll-up (or clicking close): http://paulstamatiou.com/android-is-better
That's really nicely done, kudos.
Nice, you should release it :)
Love this approach. Doesn't get in the way and immediately gets focus of the user when it becomes visible.
Does anyone have stats on how often these buttons are used? Personally I have never used one, I'll just copy/paste the link.
I'm curious about this, too. I've literally never used them.
I couldn't find any that were quick-loading and looked nice, so I made this:
http://carrot.github.io/share-button/
It's open source. You can have it, and if you want to make it better, send in a pull request:
https://github.com/carrot/share-button
<3
Click the hamburger menu and share is on the bottom right.
With a transition added i really like this example: http://boston-theme.com/about-the-theme/ (found it here: https://news.layervault.com/stories/7228-introducing-boston-a-premium-responsive-theme-for-wordpress)
In response to the 'skinned' share buttons: I think most designers are too quick to redesign the share buttons. They're meant to look the way they do — especially if you're trying to increase shares. A custom button or action doesn't immediately invoke the same response from an everyday user. I'd be careful in 'skinning' them if your primary intention is to increase shares.
Normally I hate, really hate, these buttons. If I want to share something, is has nothing to do if there is a link or not. Plus, I hate it that Facebook and twitter can track sites.
But, if you really want to, the way www.thenextweb.com is has implemented I really like. They place the code at https://github.com/thenextweb/TNW-Social-Count
Sharrre is a good option if you want to have a play around making your own button styles http://sharrre.com/
I saw this one a while ago http://codepen.io/adamfathony/pen/Akyez however I think I'd tweak a bit, remove the zoom in for sure.
Slightly off topic from what you asked but I have recently been playing around with social locker by OnePress - there's a plugin for wordpress and jquery. Haven't had it running long enough yet to report on results but has a nice clean design and isn't too obtrusive.
I am currently using a javascript window.open to load in the Facebook sharer page. Basically I designed a button that runs the javascript. My app is a little different in that "sharing" is done to ask people on facebook for books and items that you need. I am curious as to what peoples thoughts would be on such a goal.
Ideally you have to show the official share / tweet buttons.
However (because they're fugly) I usually just design an overlay that when on hover, replaces the image with the official button to click. You could use some jquery to reveal the button how you like although this obviously depends on what it's for.
Some examples which may help: FastCo articles – http://bit.ly/1a5zFbJ SkyShare app – http://bit.ly/1anEigr Samsung HA app – http://on.fb.me/13Q5xeM Circular nav – http://bit.ly/15VQP90 Creative buttons – http://bit.ly/11Jtofu
If the button is visible a standard vistor will click it and lastly using a service like addthis or similar you can track how many people actually use the buttons versus the real ones.
Designer News
Where the design community meets.
Designer News is a large, global community of people working or interested in design and technology.
Have feedback?
Login to Comment
You'll need to log in before you can leave a comment.
LoginRegister Today
New accounts can leave comments immediately, and gain full permissions after one week.
Register now