Easily create customizable social share buttons without loading any external resources. Instead of dragging in iframes, this plugin uses just the naked share URL for each social sharing service's API. Plus, rather than using images, it uses an icon font generated with Icomoon, so they're easy to style.
Currently, simple-share supports sharing via:
- Google+
- Stumbleupon
- Tumblr
- More to come
simple-share launches each social sharing link in a popup window, similar to the way the services' native buttons work. If desired, it will also add the appropriate icons to these links.
Here's an extremely basic usage of simple-share. Take a look at this markup:
<p class="simple-share">
<a data-service="facebook">facebook</a>
<a data-service="twitter">twitter</a>
<a data-service="google-plus">google-plus</a>
<a data-service="linkedin">linkedin</a>
<a data-service="stumbleupon">stumbleupon</a>
<a data-service="reddit">reddit</a>
<a data-service="tumblr">tumblr</a>
</p>
Any link that you want to work like a share button should have a data-service attribute containing the name of the service. google-plus
is hyphenated; all others are just one word.
Here's the JS function call:
$(document).ready(function() {
$('.simple-share a').simpleShare();
});
simple-share takes a hash of options, if desired.
Option | Type | Default | What it does |
icons |
boolean | true |
Prefaces each social service link with the appropriate icon. |
shape |
string | 'square' |
Determines which shape icons are used. Options are 'square' , 'circle' , or 'none' (just the icon with no containing shape) |
color |
boolean | true |
Whether or not to style icons with the services' official colors. |