kni-labs / rrssb Goto Github PK
View Code? Open in Web Editor NEW:arrow_right_hook: Ridiculously Responsive Social Sharing Buttons
Home Page: https://rrssb.netlify.com/
License: MIT License
:arrow_right_hook: Ridiculously Responsive Social Sharing Buttons
Home Page: https://rrssb.netlify.com/
License: MIT License
In tags I see 1.6.0, 1.6 and 0.0.2. I guess the latest is 1.6.0? They are all released on the same day.
A bit confusing.
I am trying to use this plugin in a plain HTML website. I would like some simple examples or some link to tutorials to use the plugin. Can you help me here ?
Interface guidelines for mobile always recommend a clickable area of 44px x 44px. Some of these buttons when the viewport is resized to mobile are as low as 12px wide. This will result in a lot of miss-clicks and frustration.
More info and dicussion: http://stackoverflow.com/questions/1928991/minimum-sensible-button-size-on-iphone
Someone has been so kind (just like you :) and created a Drupal module: https://drupal.org/project/rrssb
Can you add it as an installation option? I just realized we've spend too much time integrating it with our theme and creating a module for it, while it had already been done before!
Great work, fellas.
It would be great if you could add a Reddit sharing button.
Damian
When RRSSB is placed inside a Bootstrap's Popover (http://getbootstrap.com/javascript/#popovers) the popup window does not work. I know it has to be related with the click events but I could not solve this problem.
28px x 28px
This looks broken http://kurtnoble.com/labs/rrssb/ :)
Am looking at the code and see something for all the provided icons except for that. Am I overlooking something?
Having an issue where the popup box isn't displaying when using the popup class and instead it's opening up in the same window (i.e. Facebook & Twitter). Not sure if I've missed something? Everything else works well :s
-Included CSS (at bottom of stylesheet, to avoid extra HTTP request)
-Included JS file
-Added button HTML code
Demo here if necessary: http://www.moviesforarainyday.com/movie/motorcycle-diaries-2004/
Just putting this here so I don't forget. .large-format
font-size is currently only optimized 7 items. Need to rework it so it is consistent no matter how many icons there are.
Hi,
I found a bug where the email button can take all the place and let other buttons in minimized state, as you can see in this screenshot.
Sometimes it can be both email and FB buttons that are larger than the others.
This happens on desktop browsers (tested with Chrome 32 on Windows7 and IE11 on Windows7) when you resize the window with the mouse to a small size , and then hit the maximize window button.
Edit: seems to be the same problem as the other opened issue: #1
Anyone knows why the WP version disappeared from the WP Plugins Repository?!
I've experienced some troubles with the bower package.
Every time I downloaded it, inclusively when I've uninstalled and cleaned the cache, the code wasn't up to date. The css and js files were different from the current version of git.
Any plans to add this great library to bower?
Hi, in the Readme file it says to make a <ul>
and then populate with <li>
and include links for each service. The content within the <li>
is referred to with ...
however it may not be clear what to put there. From looking at the demo, it appears that the HTML inside the <li>
would be something like this:
<li class="email">
<!-- Replace subject with your message using URL Endocding: http://meyerweb.com/eric/tools/dencoder/ -->
<a href="mailto:?subject=Check%20out%20how%20ridiculously%20responsive%20these%20social%20buttons%20are&body=http%3A%2F%2Fkurtnoble.com%2Flabs%2Frrssb%2Findex.html">
<span class="icon">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" width="28px" height="28px" viewBox="0 0 28 28" enable-background="new 0 0 28 28" xml:space="preserve"><g><path d="M20.111 26.147c-2.336 1.051-4.361 1.401-7.125 1.401c-6.462 0-12.146-4.633-12.146-12.265 c0-7.94 5.762-14.833 14.561-14.833c6.853 0 11.8 4.7 11.8 11.252c0 5.684-3.194 9.265-7.399 9.3 c-1.829 0-3.153-0.934-3.347-2.997h-0.077c-1.208 1.986-2.96 2.997-5.023 2.997c-2.532 0-4.361-1.868-4.361-5.062 c0-4.749 3.504-9.071 9.111-9.071c1.713 0 3.7 0.4 4.6 0.973l-1.169 7.203c-0.388 2.298-0.116 3.3 1 3.4 c1.673 0 3.773-2.102 3.773-6.58c0-5.061-3.27-8.994-9.303-8.994c-5.957 0-11.175 4.673-11.175 12.1 c0 6.5 4.2 10.2 10 10.201c1.986 0 4.089-0.43 5.646-1.245L20.111 26.147z M16.646 10.1 c-0.311-0.078-0.701-0.155-1.207-0.155c-2.571 0-4.595 2.53-4.595 5.529c0 1.5 0.7 2.4 1.9 2.4 c1.441 0 2.959-1.828 3.311-4.087L16.646 10.068z"/></g></svg>
</span>
<span class="text">email</span>
</a>
</li>
Is this correct? If so, it might help to point to these code snippets in the Readme. If this is not the appropriate setup method, then it would help to describe how someone who is not using a CMS like Wordpress or Drupal should set this up on a static HTML webpage.
Some of the RRSSB wordpress plugin users are encountering problems when their theme or another plugin have a CSS class with the same name as one in the RRSSB plugin. For instance 'icon' is common and often causes conflict. If users have other social sharing buttons on their page then the classes 'facebook','twitter','linkdin', etc often conflict as well. If we prefix all of the classes with 'rrssb-' these problems would be resolved.
I could change this in just the wordpress plugin but I would like to keep the changes between the wordpress plugin and the original RRSSB project to a minimum. Also, this change may help others avoid problems when integrating RRSSB directly into their sites or when using one of the other third-party versions.
I'm not able to figure out how to use either small icons without text or icons with text. Are these classes added in the js? I copied the demo exactly and I'm getting half with text and half without text but I'm not able to determine how that's occurring. Thanks for any pointers :)
Justin
Just implemented RRSSB here: http://www.archi-ninja.com/vote-for-the-next-concrete-ring-design/ and can't quite figure out why the set of buttons is now not resizing. This was working splendidly at first but then just seemed to start adding a "small" class to the final icon out of the blue.
Spoke too soon, appears that if we decide to have the buttons implemented in two places on the same page (i.e. across the top of a blog post then again at the bottom), the calucations take into account the second set of icons not as their own unique set and throw off the calcs.
If i get the chance I'll do a pull request and submit a fix.
Cheers!
DB
Hi, not an issue. But
Would it be possible to use the buttons in e-mail? (and all css in-line)
Also, would be great of the demo had an "Enter your page url here" option that would then create an option like "Grab you code here"
Just thinking
Thank you for everyone who has contributed to RRSSB - the buttons are awesome! I just wish I could get the popup to work.
I'd like to be able to pass that info into the submit page when someone shares on reddit.
Thanks
Hello! :)
Are there a callback when sharing succeeded? (Facebook and Twitter)
Thanks in advance!
I've installed RRSSB andit works well with the exception that on iphone (5s) if I change orientation from portrait to landscape, the icons seem to go to the full-size versions resulting in the page over-running the viewport. I've isolated the issue to RRSSB by taking it out - the page reflows fine without it. This doesnt happen if I resize my browser window on desktop - only on the actual device.
I'm using this viewport meta-tag
Any ideas?
rrssb is licensed "Creative Commons Attribution-ShareAlike 4.0 International license". Wordpress requires a GPL-Compatible license for all plugins in their repository. As a result, WP removed the rrssb plugin. Can rrssb's license change to be GPL-Compatible?
Hi It just took me hours to figure out that the buttons break if you use them several times in one page. Probably got something to do with the size of the button being calculated based on all the buttons that appear on one(entire html) page.
So for instance I have 4 buttons appearing 5 times. Total of 20 buttons displayed on my site.
The size of my buttons will always be really small because rrssb thinks there are 20 buttons in a row. But there are only 4.
Hey, I just wanted to let you know that your bower package ain't working for rails folks using bower via rails-assets.org to install rrssb... There seem to be a version number not present error... If your know a solution or can fix the bower package to make it compatible with rails-assets, that would be awesome ! Thanks.
double check line height isn't dependent on normalize.css
We have an ajax application, so we would need a way to refresh the share buttons. Should be enough if rrssbInit() could be called anytime.
The next thing we'd like to add is a way to edit all the meta attributes across all the services as variables.
It seems all the services use something from this list (Am I missing any?):
$shareUrl
, $shareEmailSubject
, $shareEmailBody
, $shareImage
, $shareDescription
, $shareDescriptionEncoded
(could be done auto .. too much?)
Some of these may need to be changed on a page by page basis.
Question for you guys: what would be your ideal workflow for inputting this data? Data-attribute? JS config file?
does anyone know how to set the:
a href="https://www.facebook.com/sharer/sharer.php?u=http://kurtnoble.com/labs/rrssb/index.html" class="popup"
so that it links to the blog post url in a rails app
(something similar to this)
a href="<%= post_url(@post) %>" class="popup"
Total sharing counts can be tracked with www.sharedcount.com. So we can show something like:
I have no idea how to fix this, but i thought maybe its a nice idea :)
Hey guys,
First of all, Thanks you for this project and make it better everyday.
In the meantime, i'll like to warn you about the versioning.
Four days ago, you pushed an update from 1.6.0 to 1.6.4. It should have mean patches commits, but actually you have made some important changes like the name of the class.
Could you the next time use a Semantic Versioning?
Thanks.
Hi,
I've been looking for this kind of share buttons for weeks. I like how they look and they work well (I only use the FB and Twitter buttons), but for some reason, when someone clicks on the buttons the dialog doesn't open in a popup but in the same page, losing that visitor.
But the class="popup" is there. I don't know why it doesn't work and how to make it work. Any advice?
There's a second issue with the plugin. It shows the
I've noticed a third issue. In Safari the buttons doesn't show the symbols (F for Facebook and the bird for Twitter).
Any help would be appreciated.
Thanks,
We have added rrssb
to Open Source CDN: http://osscdn.com/#/rrssb
Business Insider:
http://www.businessinsider.com/share-of-iphone-ownership-in-the-us-2014-5#!HlFqK
Anyone else seen it around the web yet?
Hello,
I recently installed the rrssb plugin for WordPress. I would like to use the shortcode [rrssb] to display the sharing buttons on top of my posts. Here is an example: http://socialmediawithpb.com/5-tips-on-how-to-use-pinterest-for-social-media-marketing/ (sample). But as I keep on reducing the size of the page, the buttons should resize themselves right? Not sure why this is not happening in my case. When I make the window size smaller they become distorted. If you view the code, you will see that I have set a style: "width=20%" because the buttons don't display properly otherwise. They don't span the size of the post.
Can someone please help me with this? What am I doing wrong? Thank you.
Priyanka
Are there any plans to add it?
Chrome issue:
After scaling browser down, then back up hover items are jumping around. Not sure this was happening before.
Okay in Safari, Firefox
I'm working on a site that doesn't have an SSL.
The URL is dynamically populated. When I add https to the URL, it displays the correct info(but the link back to the site doesn't work because HTTPS is not available on the server). When I switch it back, I get the 500 internal error again.
There are unescaped &'s in href attributes on the demo page. From what I understand HTML5 now allows it, even though the W3C validator complains about them:
I think it might still be nice to escape them as &
, because some people seek to have a clean validation result, but also because of older browsers.
Well, this is very weird.
It happens only at this width, and stops happening when the next item is not at the same width. Example here: http://migre.me/k7nfY
Any thoughts?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.