share-it

Modern share. No dependencies. Just JS. Just 2kb gzipped.

Use share-it with one click and share your data easily!

See share-it in action: http://cezarlz.github.io/share-it/

Supported Social Networks

• Facebook
• Twitter
• Google+
• Pinterest
• Linked In
• Buffer
• Digg
• StumbleUpon
• Tumblr
• Reddit
• Evernote
• Wordpress
• Pocket
• Whatsapp

Install

Using bower:

bower install --save share-it

Using npm:

npm install --save share.it

Usage

var share = new ShareIt({
  specs: {
    width: 720,
    height: 300
  }
});

share.init();

After initialization, just put data-share attribute in your target button or whatever element.

<button
  class="btn"
  data-share
  data-share-facebook
  data-share-facebook-url="http://example.com"
>
  Share on Facebook
</button>

<button
  class="btn"
  data-share
  data-share-whatsapp
  data-share-whatsapp-text="Hi guys, like share-it!"
>
  Share on Whatsapp (only mobile)
</button>

API

Init params

Property	Type	Default	Required?
specs.width	number	550	No
specs.height	number	350	No
target	string	'_blank'	No
newTab	boolean	false	No

In specs, you can use another values. See more here.

For example:

var share = new ShareIt({
  specs: {
    left: 20,
    top: 20,
    menubar: 'no',
    titlebar: 'yes',
    resizable: 'no'
  }
});

share.init();

Facebook

<button
  data-share
  data-share-facebook
  data-share-facebook-url="http://example.com"
>
  Share me!
</button>

Twitter

<button
  data-share
  data-share-twitter
  data-share-twitter-url="http://example.com"
  data-share-twitter-title="May the force be with you!"
  data-share-twitter-via="cezar_luiz"
  data-share-twitter-hashtags="one,two,thre"
>
  Share me!
</button>

Google+

<button
  data-share
  data-share-google
  data-share-google-url="http://example.com"
>
  Share me!
</button>

Pinterest

<button
  data-share
  data-share-pinterest
  data-share-pinterest-url="http://example.com"
  data-share-pinterest-img="http://example.com/image.jpg"
  data-share-pinterest-is-video="1"
  data-share-pinterest-title="Awesome JS library!"
>
  Share me!
</button>

Linked In

<button
  data-share
  data-share-linkedin
  data-share-linkedin-url="http://example.com"
  data-share-linkedin-title="My awesome article!"
  data-share-linkedin-summary="Description here"
  data-share-linkedin-source="The New York Times"
>
  Share me!
</button>

Buffer

<button
  data-share
  data-share-buffer
  data-share-buffer-url="http://example.com"
  data-share-buffer-title="Share It on Buffer!"
>
  Share me!
</button>

Tumblr

<button
  data-share
  data-share-tumblr
  data-share-tumblr-url="http://example.com"
  data-share-tumblr-title="Share It on Tumblr!"
  data-share-tumblr-desc="Description of my Tumblr!"
>
  Share me!
</button>

Digg

<button
  data-share
  data-share-digg
  data-share-digg-url="http://example.com"
  data-share-digg-title="Share It on Digg!"
>
  Share me!
</button>

StumbleUpon

<button
  data-share
  data-share-su
  data-share-su-url="http://example.com"
  data-share-su-title="Share It on StumbleUpon!"
>
  Share me!
</button>

Delicious

<button
  data-share
  data-share-delicious
  data-share-delicious-url="http://example.com"
  data-share-delicious-title="Save my link on Delicious!"
>
  Share me!
</button>

Reddit

<button
  data-share
  data-share-reddit
  data-share-reddit-url="http://example.com"
  data-share-reddit-title="Share on Reddit!"
>
  Share me!
</button>

Evernote

<button
  data-share
  data-share-evernote
  data-share-evernote-url="http://example.com"
  data-share-evernote-title="Save my link on Evernote!"
>
  Share me!
</button>

Wordpress

<button
  data-share
  data-share-wp
  data-share-wp-url="http://example.com"
  data-share-wp-title="Share on Wordpress!"
  data-share-wp-desc="Description of my link!"
  data-share-wp-img="http://example.com/image.jpg"
>
  Share me!
</button>

Pocket

<button
  data-share
  data-share-pocket
  data-share-pocket-url="http://example.com"
  data-share-pocket-title="Read later on Pocket!"
>
  Share me!
</button>

Whatsapp

<button
  data-share
  data-share-whatsapp
  data-share-whatsapp-text="Share any text on Whatsapp like a message! PS: Works only in smartphones."
>
  Share me!
</button>

License

MIT.

Do you like? Fork and contribute :D

Made with ❤️