atestu / rrssb

Ridiculously Responsive Social Sharing Buttons

Ridiculously Responsive Social Sharing Buttons

Love them or hate them, social sharing buttons appear to be with us for a while. It seemed like we were constantly making custom buttons for every single project, so we decided to create a super flexible system that would work in any container.

RRSSB is built with SASS, so you can easily customize it by tweaking a few variables. SVGs allow for tiny file size and retina support. Add or remove icons as you see fit — the rest will fill in automagically in the container.

Demo

View the demo here

Usage

1. Link to the css file in header:

<link rel="stylesheet" href="css/rrssb.css" />

2. Copy .rrssb-buttons unordered list to desired location(s):

 <ul class="rrssb-buttons clearfix">
 	<li class="email"> ... </li>
 	<li class="facebook"> ... </li>
 	...
 	<li class="googleplus"> ...</li>
 </ul>

• Buttons will automatically flow to the size of the ul rrssb-buttons. If specifically sized buttons are needed, nest rrssb-buttons in a fixed-width container.
• Only copy the lis of the buttons you want.
• Adding a class of popup to the anchor tag for each share button will make the share dialog open in a popup, rather than a new window. (Good for Facebook, Twitter, Google Plus, etc.)
• Each sharing URL requires various parameters that allow you to pass through messaging in the sharing dialog. A useful tool for URI escaping any messaging that needs to pass through the share URL can be found here.

3. Link to javascript files (jQuery CDN, jQuery fallback, and rrssb.min.js):

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery.1.10.2.min.js"><\/script>')</script>
<script src="js/rrssb.min.js"></script>

Other install options:

Service	Link
With Bower	bower search rrssb
In Rails	Rails Setup by @rimkashox
In Wordpress	Wordpress plugin by @aarreedd
CDN:	OSSCDN by MaxCDN

Support

Currently tested between 140px and 15,465px on current versions of Chrome 33, Safari 7.0.2, Firefox 27, Opera 20, and IE9+.

Requires calc and SVG

About

RRSSB is a KNI Labs freebie crafted by @dbox and @seagoat.

This content is released under the Creative Commons Attribution-ShareAlike 4.0 International license.