Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/kni-labs/rrssb
:arrow_right_hook: Ridiculously Responsive Social Sharing Buttons
https://github.com/kni-labs/rrssb
facebook rrssb sharing social-buttons social-shares twitter
Last synced: about 2 months ago
JSON representation
:arrow_right_hook: Ridiculously Responsive Social Sharing Buttons
- Host: GitHub
- URL: https://github.com/kni-labs/rrssb
- Owner: kni-labs
- License: mit
- Created: 2014-02-13T18:04:49.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2020-10-01T06:54:12.000Z (almost 4 years ago)
- Last Synced: 2024-04-20T13:44:37.566Z (5 months ago)
- Topics: facebook, rrssb, sharing, social-buttons, social-shares, twitter
- Language: HTML
- Homepage: https://rrssb.netlify.com/
- Size: 1.21 MB
- Stars: 3,404
- Watchers: 109
- Forks: 426
- Open Issues: 25
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# Ridiculously Responsive Social Sharing Buttons
[](https://gitter.im/kni-labs/rrssb?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)  [](https://www.npmjs.com/package/rrssb)
Love them or hate them, social sharing buttons appear to be with us for a while. It seemed like [**we**](http://www.kurtnoble.com) 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**](http://sass-lang.com/), 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**](https://rrssb.netlify.com/)
## Usage
1) Copy css to your document or link to the css file in header:
```html
```
2) Copy `.rrssb-buttons` unordered list to desired location(s):
```html
```
- Only copy the `
- 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.)
- Buttons will automatically flow to the size of the ul `rrssb-buttons`. If fixed sized buttons are needed, nest `rrssb-buttons` in 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**](http://meyerweb.com/eric/tools/dencoder/).
- Alternatively, all share metadata and links can be configured [using Javascript](#javascript)
3) Copy `rrssb.min.js` to 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**](http://css-tricks.com/snippets/jquery/fallback-for-cdn-hosted-jquery/), and `rrssb.min.js`):
```html
window.jQuery || document.write('<script src="js/vendor/jquery.1.10.2.min.js"><\/script>')
```
**Optional: Configure URL and share text with javascript:**
Instead of editing each `href` by 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 `href`s by hand.
Paste the following before the closing body tag, after the scripts you added in the last section:
```html
jQuery(document).ready(function ($) {
$('.rrssb-buttons').rrssb({
// required:
title: 'This is the email subject and/or tweet text',
url: 'https://rrssb.netlify.com/',
// optional:
description: 'Longer description used with some providers',
emailBody: 'Usually email body is just the description + url, but you can customize it if you want'
});
});
```
## Other install options:
Service | Link
:---------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
npm | `npm install rrssb`
bower | `bower install rrssb`
Wordpress * | [**https://wordpress.org/plugins/rrssb/**](https://wordpress.org/plugins/rrssb/)
[**https://wordpress.org/plugins/wpsso-rrssb/**](https://wordpress.org/plugins/wpsso-rrssb/)
[**https://wordpress.org/plugins/rrssb-for-wp/**](https://wordpress.org/plugins/rrssb-for-wp/)
Drupal * | [**Drupal Install Instructions**](https://drupal.org/project/rrssb)
CDN * | [**CDN by jsDelivr**](https://www.jsdelivr.com/?query=rrssb)
* Managed by 3rd parties. Please contact project hosts for support.
## Support
Currently tested between [**140px**](https://www.dropbox.com/s/2k6lcebg2887ge3/Screenshot%202014-02-18%2009.45.45.png) and [**15,465px**](https://www.dropbox.com/s/1juq03011lixk3r/Screenshot%202014-02-18%2009.43.57.png) on current versions of Chrome 33, Safari 7.0.2, Firefox 27, Opera 20, and IE9+.
Requires [**SVG**](http://caniuse.com/svg)
## Contributing
Thanks for helping! Pull requests are welcomed.
### Build setup:
- Make sure [gulp](http://gulpjs.com/) is installed globally: `npm install -g gulp` (May require `sudo`.)
- run `npm install` to install the dependencies for this project.
- run `gulp` to create a local server at `localhost:3000` and watch for file changes.
## About
RRSSB is a [**KNI Labs freebie**](http://kurtnoble.com/) crafted by [**@dbox**](http://www.twitter.com/dbox) and [**@joshuatuscan**](http://www.twitter.com/joshuatuscan).