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.
- Copy css to your document or link to the css file in header:
.rrssb-buttonsunordered list to desired location(s):
<!-- Buttons start here. Copy this ul to your document. --><!-- Replace subject with your message using URL Encoding: --><!-- Replace with your URL. For best results, make sure you page has the proper FB Open Graph tags in header: --><!-- Replace href with your Meta and URL information --><!-- Buttons end here -->
- Only copy the
<li>s of the buttons you want (index.html has examples of all available types).
- Adding a class of
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.)
- Buttons will automatically flow to the size of the ul
rrssb-buttons. If fixed sized buttons are needed, nest
rrssb-buttonsin a fixed-width container.
- 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.
Instead of editing each
hrefs by hand.
Paste the following before the closing body tag, after the scripts you added in the last section:
Other install options:
|Drupal *||Drupal Install Instructions|
|CDN *||CDN by jsDelivr|
* Managed by 3rd parties. Please contact project hosts for support.
Thanks for helping! Pull requests are welcomed.
- Make sure gulp is installed globally:
npm install -g gulp(May require
npm installto install the dependencies for this project.
gulpto create a local server at
localhost:3000and watch for file changes.