I made this to learn more about Javascript and to actually make something that works. Still early in development but I've had fun this far so it might go places.
##What it does Radial Share Buttons, or rsb for short, is a simple share button. It used jquery and css3 to show and animate five (as of right now) preset share options; Facebook, Twitter, Pinterest, Google+ and E-mail. It takes up a small space (50x50px normal and 200x125px expanded) and is easily positioned. The script can handle multiple buttons on a single page (see demo.html). You can configure rsb so that multiple buttons use the same settings or use their own. These can be mixed so that two buttons use the same settings and a third use it's own settings.
##Installation and how to use Download the script and include it in your html as such:
<script type="text/javascript" src="path/to/rsb.js"></script>
You probably also want to include the default css:
<link rel="stylesheet" href="path/to/rsb.css" />
Lastly add this:
<script type="text/javascript">
rsb();
</script>
Rsb automatically look for one or several elements with the class rsb to hook on to. Of course you can change this, see settings below.
You can include multiple instances of rsb and change settings individually, like this:
<script type="text/javascript">
rsb({
selector: '.myAwesomeClass',
position: 'bottom',
facebookShareUrl: 'https://www.facebook.com/UnderstanditAB',
twitterShareUrl: 'http://understandit.se'
});
rsb({
selector: '.myAwesomeClass2',
twitterUsername: 'olofbrickarp',
emailSubject: 'Check this out'
});
</script>
Just make sure that all the selectors exist, in this case .myAwesomeClass and .myAwesomeClass2.
##Default Settings Global
- selector (string) - The selector that rsb will look for. Default: '.rsb'.
- position (string) - Position of the buttons. Available values: 'top', 'bottom'. Invalid values will return 'top'. Default/Wildcard: 'top'.
- zIndex (number) - Starting z-index, added so that rsb will be easily compatible with z-index heavy sites. Default: 10.
- facebookShareUrl (string) - The URL that will be shared on Facebook. Default: Current page url.
Twitter variables
- twitterShareUrl (string) - The URL that will be shared on Twitter. Default: Current page url.
- twitterShareMessage (string) - The actual tweet message. Default: current page title.
- twitterUsername (string) - Will add "via @twitterUsename" to the tweet if set to anything but ''. Default: ''.
Pinterest variables
- pinterestShareUrl (string) - The URL that will be shared on Pinterest. Default: Current page url.
- pinterestDescription (string) - The description of the pin. Default: Current page title.
Google+ variables
- googleplusUrl (string) - The URL that will be shared on Google+. Default: Current page url.
E-mail variables
- emailSubject (string) - The subject of the e-mail. Default: current page title.
- emailMessage (string) - The content of the e-mail. Default: current page url.
- emailTo (string) - Optional default e-mail to send to. Default: ''.
##ToDo
- Add globalShareUrl setting to change all share url's at once.
- Add support for left and right button positions.
- Add settings for button size and placement.
- Backward compatibility in older browsers (javascript animations)?
Move settings to a more convenient placeGive the option of multiple share buttons on a single page with their own settings