Share Button – Fast and Beautiful Social Share Buttons

Download Demo

Why Should You Use This?

All the major social networks have their own share buttons you can put on your page, but doing it like this sucks for a lot of reasons:

They are slow-loading, and inject a lot of extra javascript onto your page that’s not needed which makes your page slower.

They don’t look sexy and fit nicely with your site like you want, and you can’t change how they look.

Every time you need them, you have to google ‘twitter share button’ and ‘facebook like button’ and such and go through their interface and copy and paste code and this is repetitive and stupid. It also takes up a ton of space and looks messy in your code.

The buttons themselves take up a lot of space (especially the facebook like button).

Let’s take a quick look at the alternative, using this little js plugin:

It doesn’t load any iframes or extra javascript and overall load time is tons faster.

It looks simple and clean by default, and can be customized in any and every way.

All you have to do to use it is include the script and call .share() on an empty div. That’s two lines of code total, the script link and the share call.

It’s tiny and compact, expanding only when the user actually wants to share something.

Setup

Download the script and include it on your page.

Make an empty div on your page

In your javascript, call $(‘.element’).share()

Pass options to the share call if you want (details below)

Profit!

Options

You can pass an options object when you call share on an element to make things a little more flexible.

url: the url you want to share. default: window.location.href

text: text to be tweeted alongside your link, default: your page’s meta description

image: image to be shared (facebook-specific)

app_id: facebook app id for tracking shares. if provided, will use the facebook API

background: background color of the button, default: #e1e1e1

color: text color of the button, default: ‘#333′

icon: change the icon to the left. choose from this set, default: export

button_text: change the text of the button, default: Share

flyout: change the flyout direction of the shares. chose from top left, top center, top right, bottom left, bottom right, or bottom center. default: top center text_font: include the Lato font set from the Google Fonts API. default: true

Example:

$(‘.element’).share(

url: ‘http://www.youtube.com/watch?v=oHg5SJYRHA0′,

text: ‘check out this awesome video guys!’

)

network-specific options

If you pass an object called twitter, facebook, and/or gplus into the main options, you can get more granular with the share info, specifying different information for different networks. Example objects shown below, with all options specified:

facebook:

name: ‘title’

link: ‘url’

image: ‘share image’

caption: ‘picture caption’

text: ‘short description’

twitter:

text: ‘tweet text’

link: ‘url’

gplus:

link: ‘url’

Example:

$(‘.element’).share(

url: ‘http://www.youtube.com/watch?v=oHg5SJYRHA0′,

text: ‘check out this awesome video guys!’,

flyout: ‘top center’,

text_font: true,

twitter:

text: ‘peep this great video #great #video #hashtag’


)

Public API

The share button also returns a small api that can be used to control it down the line if you need to. Example shown below:

var share = $(‘.el’).share();

share.toggle(); // toggles the share button popup

share.open(); // open the share button popup

share.close(); // closes the share button popup

share.options; // exposes the options listed above, can not currently be changed interactively

share.self; // returns an instance of the jquery object it was called on (for chaining)

This will likely become more powerful down the line as this project continues to be developed – open an issue if there’s anything you wish the api would have.

Share Button – Fast and Beautiful Social Share Buttons