These docs are for an older version. Check out the latest version of socialshares.

Lightweight share buttons for the web.

Make sharing fast and secure.

While it's very easy to copy-and-paste scripts to embed a tweet or Facebook share button, you end up slowing down your site by loading resources from multiple servers. Also, these scripts violate privacy by tracking users even if they don't wish to use them. The good news is that social networks provide a way to share content through special URLs, which socialshares uses to give a lightweight and consistently-designed solution.

Install socialshares View project on GitHub

Demo

You can view the pen on CodePen.

Installation

There are multiple ways to install and start using socialshares (v1.0.5). Pick your preferred method.

Download

Download a ZIP file

Once downloaded and uncompressed, you can reference the CSS and JavaScript files in your project:

<!-- Make sure to edit the file paths as needed -->
<link rel="stylesheet" href="socialshares/build/css/buttons.css" />
<script src="socialshares/build/js/buttons.js"></script>

Bower

bower install socialshares#1.0.5 --save

CDN

You can easily hotlink the files from the awesome RawGit CDN.

<link rel="stylesheet" href="https://cdn.rawgit.com/socialshares/buttons/v1.0.5/build/css/buttons.css" />
<script src="https://cdn.rawgit.com/socialshares/buttons/v1.0.5/build/js/buttons.js"></script>

If you are using jQuery, you can replace buttons.js with buttons.jquery.js.

Usage

To show a share button, use the following markup:

<!-- Default share button -->
<a class="share-btn share-btn-{SHARE_SERVICE}" href="{SHARE_URL}">
    <!-- Share icon -->
    <span class="share-btn-icon"></span>
    <!-- Share text -->
    <span class="share-btn-text">Share</span>
</a>

As you might notice, it is simply an <a> tag with classes that socialshares can style and make functionable.

Share Services and URLs

You will need to change the {SHARE_SERVICE} and {SHARE_URL} depending on whether you want a tweet button, Facebook share button, etc. Each service has its own URL that allows you to pass parameters such as the page that you want to share.

You can place the URL of the page that you want to share after the url= and u= parameters, but make sure that it is encoded. You can use the Online URI Encoder tool to do so.

Example: Let's create a tweet button.

<!-- Tweet button -->
<a class="share-btn share-btn-twitter" href="https://twitter.com/share?url=https%3A%2F%2Fsocialshar.es%2F">
    <!-- Share icon -->
    <span class="share-btn-icon"></span>
    <!-- Share text -->
    <span class="share-btn-text">Tweet</span>
</a>

Branded (colorized) Buttons

You may want to show a button with the service's brand color (e.g. blue tweet button, red Google+ button). You can do so by adding a share-btn-branded class to the <a> tag.

<!-- Branded Tweet button -->
<a class="share-btn share-btn-twitter share-btn-branded" href="https://twitter.com/share?url=https%3A%2F%2Fsocialshar.es%2F">
    ...
</a>

Dark-schemed Buttons

Alternatively, you can create buttons with a dark-gray color by adding a share-btn-inverse class to the <a> tag.

<!-- Dark Tweet button -->
<a class="share-btn share-btn-twitter share-btn-inverse" href="https://twitter.com/share?url=https%3A%2F%2Fsocialshar.es%2F">
    ...
</a>

Small or Large Buttons

By default, the button is shown at a medium size. You can create a small or large button by adding a share-btn-sm or share-btn-lg class to the <a> tag.

<!-- Small Tweet button -->
<a class="share-btn share-btn-twitter share-btn-sm" href="https://twitter.com/share?url=https%3A%2F%2Fsocialshar.es%2F">
    ...
</a>

<!-- Large Tweet button -->
<a class="share-btn share-btn-twitter share-btn-lg" href="https://twitter.com/share?url=https%3A%2F%2Fsocialshar.es%2F">
    ...
</a>

Showcase

Digital Bounds Ninjality Blog Sunny Singh's blog

Browser Support

Tested on all modern browsers, including IE 9+. There are slight alignment issues in mobile browsers, which will be fixed in a future version.

Changelog

You can subscribe to release updates on Libraries.

This project has been rebranded and can be originally found under sunnysingh/share-buttons.