kni-labs / rrssb Goto Github PK

Chrome issue:

After scaling browser down, then back up hover items are jumping around. Not sure this was happening before.

Okay in Safari, Firefox

While minimizing the width, it works but there's some problem while expanding.

Anyone knows why the WP version disappeared from the WP Plugins Repository?!

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

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?

/cc @joshuatuscan @garand @scottaohara @Rynaro

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.

Am looking at the code and see something for all the provided icons except for that. Am I overlooking something?

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

sign [a bullet point] right before each button [see screenshot]. Is there any way to remove it or make it invisible?

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,

This looks broken http://kurtnoble.com/labs/rrssb/ :)

Hello! :)
Are there a callback when sharing succeeded? (Facebook and Twitter)

Thanks in advance!

https://twitter.com/jitendravyas/status/436517045471952896/photo/1

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

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.

Great work, fellas.

It would be great if you could add a Reddit sharing button.

Damian

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:

http://validator.w3.org/check?uri=http%3A%2F%2Fkurtnoble.com%2Flabs%2Frrssb%2F&charset=%28detect+automatically%29&doctype=Inline&group=0

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.

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

Large format icons are pushed down on Safari in iOS7. I haven't done extensive testing but this fix solved the issue for me.

.rrssb-buttons.large-format li a .icon svg {
height: 100%;
width: 100%;
position: absolute;
top:0;
}

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/

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!

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?

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.

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.

We have added rrssb to Open Source CDN: http://osscdn.com/#/rrssb

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.

• aarreedd

I'd like to be able to pass that info into the submit page when someone shares on reddit.

Thanks

• Should show only on icon view
• Variable to be on or off (default on)
• Text powered by alt text? Data attribute?
• Wording should be consistent with site shared:
  • "Post to Facebook"
  • "Tweet This"
  • "Share on LinkedIn"
  • "Share on Google Plus"
• 1px border radius
• 50% alpha black bg with no images
• Nice animation ala http://kushagragour.in/lab/hint/ (first one in basic)

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?

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"

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

Any plans to add this great library to bower?

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.

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 :)

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&amp;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.

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

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 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

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.

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 ?

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?

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

double check line height isn't dependent on normalize.css

Are there any plans to add it?

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.

Thank you for everyone who has contributed to RRSSB - the buttons are awesome! I just wish I could get the popup to work.

http://www.kayako.com/company/careers/26376

I've got an issue where i've added the RRSSB inside a modal window.
The buttons seem to load very very small when the modal first opens, but the minute i resize the screen, it works perfectly.

I've attached a screenshot