:arrow_right_hook: 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.
1) Copy css to your document or link to the css file in header:
2) Copy
.rrssb-buttonsunordered list to desired location(s):
popupto 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.)
rrssb-buttons. If fixed sized buttons are needed, nest
rrssb-buttonsin a fixed-width container.
3) Copy
rrssb.min.jsto your document or link to javascript files at the bottom of your page (before the closing body tag for best results - jQuery CDN, jQuery fallback, and
rrssb.min.js):
Optional: Configure URL and share text with javascript:
Instead of editing each
hrefby hand, you can call some Javascript to set the URLs on each social button dynamically.
Note: to support users who have disabled Javascript, you still need to edit the
hrefs by hand.
Paste the following before the closing body tag, after the scripts you added in the last section:
Service |
Link |
---|---|
npm | npm install rrssb |
bower | bower install rrssb |
Wordpress * | https://wordpress.org/plugins/rrssb/ https://wordpress.org/plugins/wpsso-rrssb/ https://wordpress.org/plugins/rrssb-for-wp/ |
Drupal * | Drupal Install Instructions |
CDN * | CDN by jsDelivr |
* Managed by 3rd parties. Please contact project hosts for 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 SVG
Thanks for helping! Pull requests are welcomed.
npm install -g gulp(May require
sudo.)
npm installto install the dependencies for this project.
gulpto create a local server at
localhost:3000and watch for file changes.
RRSSB is a KNI Labs freebie crafted by @dbox and @joshuatuscan.