Easily create customizable social share buttons without loading any external resources.
JavaScript
Switch branches/tags
Nothing to show
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
examples
fonts
LICENSE.txt
README.md
jquery.simple-share.js
sst-style.css

README.md

simple-share

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.

Supported Services

Currently, simple-share supports sharing via:

  • Facebook
  • Twitter
  • LinkedIn
  • Google+
  • Pinterest
  • Stumbleupon
  • Reddit
  • Tumblr
  • Email
  • More to come

How it works

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();
});

Options

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.