Social Sharing

Add social sharing links and buttons without the bloat.

Download Social Sharing

GitHub Project       Getting Started

How It Works

The widgets provided by Twitter, Facebook, and other services require numerous HTTP requests and can really hurt the performance of your sites and apps.

These simple CSS and HTML snippets make it easy for you to go social - without hurting site performance.


Social Buttons

A few simple classes turn button and a elements into branded social media buttons.

<a class="btn btn-tweet" href="#">Tweet</a>
<a class="btn btn-facebook" href="#">Share</a>
<a class="btn btn-google" href="#">Google+</a>
<a class="btn btn-linkedin" href="#">LinkedIn</a>

Sharing Links

To include sharing links for Twitter, Facebook, Google+ and LinkedIn, just add your URL's and titles where indicated in these snippets.

Make sure to replace spaces with %20 in your article and page titles.

Twitter

<a target="_blank" href="https://twitter.com/intent/tweet?text=YOUR-TITLE&url=YOUR-URL&via=TWITTER-HANDLE">Twitter</a>

Facebook

<a target="_blank" href="http://www.facebook.com/sharer/sharer.php?u=YOUR-URL">Facebook</a>

Google+

<a target="_blank" href="https://plus.google.com/share?url=YOUR-URL">Google+</a>

LinkedIn

<a target="_blank" href="http://www.linkedin.com/shareArticle?mini=true&url=YOUR-URL&title=YOUR-TITLE&summary=YOUR-SUMMARY&source=YOUR-URL">LinkedIn</a>

Adding Icons & Expanded Sharing Options

To add icons to your share links, try using icon fonts.

If you'd prefer to offer a single sharing icon that reveals all sharing options, also include Modals or Houdini.


Browser Support

Social Sharing works in all modern browsers, and IE 6 and above.